makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-27 21:58:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3912 from hanakin/ticket/14175

Browse source 
[ticket/14175] Refactor responsive implementation for easier manipulation
This commit is contained in:
Marc Alexander 2015-10-09 15:51:31 +02:00
commit c664bbdf9c
4 changed files with 464 additions and 468 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
phpBB/styles/prosilver/template/overall_header.html
View file

@ -47,7 +47,6 @@
<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" media="all and (max-width: 700px)" />
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

1
phpBB/styles/prosilver/template/simple_header.html
View file

@ -24,7 +24,6 @@
<!-- ENDIF -->
<link href="{T_STYLESHEET_LINK}" rel="stylesheet">
<link href="{T_STYLESHEET_LANG_LINK}" rel="stylesheet">
<link href="{T_THEME_PATH}/responsive.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet" media="all and (max-width: 700px)">
<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css?assets_version={T_ASSETS_VERSION}" rel="stylesheet">

227
phpBB/styles/prosilver/theme/responsive.css
View file

@ -1,6 +1,114 @@
/* Responsive Design
---------------------------------------- */
@media (max-width: 320px) {
select, .inputbox {
max-width: 240px;
}
}
/* Notifications list
----------------------------------------*/
@media (max-width: 350px) {
.dropdown-extended .dropdown-contents {
width: auto;
}
}
@media (max-width: 430px) {
.section-viewtopic .search-box .inputbox {
width: 110px;
}
}
@media (max-width: 500px) {
dd label {
white-space: normal;
}
select, .inputbox {
max-width: 260px;
}
.captcha-panel dd.captcha {
margin-left: 0;
}
.captcha-panel dd.captcha-image img {
width: 100%;
}
.recaptchatable tr td:last-child {
display: none;
}
.captcha-panel .recaptcha-responsive {
display: inline-block !important;
margin-top: 10px;
vertical-align: middle;
}
dl.details dt, dl.details dd {
width: auto;
float: none;
text-align: left;
}
dl.details dd {
margin-left: 20px;
}
p.responsive-center {
float: none;
text-align: center;
margin-bottom: 5px;
}
.action-bar > div {
margin-bottom: 5px;
}
.action-bar > .pagination {
float: none;
clear: both;
padding-bottom: 1px;
text-align: center;
}
.action-bar > .pagination li.page-jump {
margin: 0 2px;
}
p.jumpbox-return {
display: none;
}
.display-options > label:nth-child(1) {
display: block;
margin-bottom: 5px;
}
.attach-controls {
margin-top: 5px;
width: 100%;
}
}
@media (max-width: 550px) {
ul.topiclist.forums dt {
margin-right: 0;
}
ul.topiclist.forums dt .list-inner {
margin-right: 0;
}
ul.topiclist.forums dd.lastpost {
display: none;
}
}
@media (max-width: 700px) {
.responsive-hide { display: none !important; }
.responsive-show { display: block !important; }
.responsive-show-inline { display: inline !important; }
@ -124,13 +232,6 @@ ul.topiclist dd.mark {
ul.topiclist.forums dt {
margin-right: -250px;
}
ul.topiclist.forums dt .list-inner {
margin-right: 250px;
}
ul.topiclist.forums dd.lastpost {
display: block;
}
ul.topiclist dd.mark {
display: block;
@ -151,20 +252,6 @@ ul.topiclist.forums dd.topics dfn, ul.topiclist.topics dd.posts dfn {
font-weight: normal;
}
@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
ul.topiclist.forums dt {
margin-right: 0;
}
ul.topiclist.forums dt .list-inner {
margin-right: 0;
}
ul.topiclist.forums dd.lastpost {
display: none;
}
}
li.row .responsive-show strong {
font-weight: bold;
color: inherit;
@ -177,14 +264,6 @@ ul.topiclist li.row dt a.subforum {
max-width: 100px;
}
/* Notifications list
----------------------------------------*/
@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
.dropdown-extended .dropdown-contents {
width: auto;
}
}
/* Pagination
----------------------------------------*/
.pagination > ul {
@ -327,46 +406,6 @@ fieldset.quick-login label[for="autologin"] {
min-width: 50%;
}
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
dd label {
white-space: normal;
}
select, .inputbox {
max-width: 260px;
}
.captcha-panel dd.captcha {
margin-left: 0;
}
.captcha-panel dd.captcha-image img {
width: 100%;
}
.recaptchatable tr td:last-child {
display: none;
}
.captcha-panel .recaptcha-responsive {
display: inline-block !important;
margin-top: 10px;
vertical-align: middle;
}
}
@media only screen and (max-width: 430px), only screen and (max-device-width: 430px) {
.section-viewtopic .search-box .inputbox {
width: 110px;
}
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
select, .inputbox {
max-width: 240px;
}
}
/* User profile
----------------------------------------*/
.column1, .column2, .left-box.profile-details {
@ -374,18 +413,6 @@ fieldset.quick-login label[for="autologin"] {
width: auto;
}
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
dl.details dt, dl.details dd {
width: auto;
float: none;
text-align: left;
}
dl.details dd {
margin-left: 20px;
}
}
/* Polls
----------------------------------------*/
fieldset.polls dt {
@ -462,7 +489,7 @@ fieldset.polls dd.resultbar, fieldset.polls dd.poll_option_percent {
}
.has-profile .post-buttons {
right: 20px;
right: 30px;
top: 15px;
}
@ -513,40 +540,10 @@ fieldset.display-actions {
.attach-comment dfn {
width: 100%;
}
@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
p.responsive-center {
float: none;
text-align: center;
margin-bottom: 5px;
}
.action-bar > div {
margin-bottom: 5px;
@media (max-width: 850px) {
.postprofile { width: 28%; }
.postbody { width: 70%; }
}
.action-bar > .pagination {
float: none;
clear: both;
padding-bottom: 1px;
text-align: center;
}
.action-bar > .pagination li.page-jump {
margin: 0 2px;
}
p.jumpbox-return {
display: none;
}
.display-options > label:nth-child(1) {
display: block;
margin-bottom: 5px;
}
.attach-controls {
margin-top: 5px;
width: 100%;
}
}

1
phpBB/styles/prosilver/theme/stylesheet.css
View file

@ -18,3 +18,4 @@
@import url("forms.css");
@import url("icons.css");
@import url("colours.css");
@import url("responsive.css");