Changeset 5835

Timestamp:

08/23/2017 06:12:03 PM (9 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: Fix display of 'Topics' box in handbooks at smaller viewports.

Styles for the box were unnecessarily constrained and thus did not apply within the handbooks, which led to poor wrapping and spacing at smaller viewports.

Props sagarprajapati for initial patch.
Fixes #3040.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer

Files:

• scss/main.scss (modified) (1 diff)
• stylesheets/main.css (modified) (3 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

@@ -1825 +1825 @@
 @media (max-width: 32em) {
         .devhub-wrap {
-                .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
-                        .table-of-contents {
-                                width: 100%;
-                                margin-bottom: 10px;
-                        }
-
-                        section {
-                                overflow: inherit;
-                        }
-
-                        hr {
-                                clear: both;
-                        }
+                .table-of-contents {
+                        float: none;
+                        margin-left: 0;
+                        width: 100%;
+                }
+
+                section {
+                        overflow: inherit;
+                }
+
+                hr {
+                        clear: both;
                 }
         }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

@@ -358 +358 @@
 }
 
-.devhub-wrap .devhub-menu .menu {
+.devhub-wrap .devhub-menu .menu,
+.devhub-wrap .devhub-cli-menu .menu {
   list-style: none;
   float: right;
@@ -367 +368 @@
 }
 
-.devhub-wrap .devhub-menu .menu li {
+.devhub-wrap .devhub-menu .menu li,
+.devhub-wrap .devhub-cli-menu .menu li {
   display: inline;
   padding-left: 20px;
 }
 
-.devhub-wrap .devhub-menu .menu a {
+.devhub-wrap .devhub-menu .menu a,
+.devhub-wrap .devhub-cli-menu .menu a {
   color: #555;
   font-weight: 400;
@@ -2157 +2160 @@
 
 @media (max-width: 32em) {
-  .devhub-wrap .wp-parser-class .table-of-contents, .devhub-wrap .wp-parser-function .table-of-contents, .devhub-wrap .wp-parser-hook .table-of-contents, .devhub-wrap .wp-parser-method .table-of-contents {
+  .devhub-wrap .table-of-contents {
+    float: none;
+    margin-left: 0;
     width: 100%;
-    margin-bottom: 10px;
-  }
-  .devhub-wrap .wp-parser-class section, .devhub-wrap .wp-parser-function section, .devhub-wrap .wp-parser-hook section, .devhub-wrap .wp-parser-method section {
+  }
+  .devhub-wrap section {
     overflow: inherit;
   }
-  .devhub-wrap .wp-parser-class hr, .devhub-wrap .wp-parser-function hr, .devhub-wrap .wp-parser-hook hr, .devhub-wrap .wp-parser-method hr {
+  .devhub-wrap hr {
     clear: both;
   }