Merge pull request #3912 from hanakin/ticket/14175

[ticket/14175] Refactor responsive implementation for easier manipulation

phpBB/styles/prosilver/template/overall_header.html

@@ -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">

phpBB/styles/prosilver/template/simple_header.html

@@ -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">

phpBB/styles/prosilver/theme/responsive.css

@@ -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 {
+@media (max-width: 850px) {
-		margin-bottom: 5px;
+	.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%;
-	}
-}

phpBB/styles/prosilver/theme/stylesheet.css

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