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

Timestamp:

01/27/2015 12:39:51 AM (10 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: Add 'Used By' and 'Uses' sections to parsed content permalink pages.

Basically the UI surfacing of the P2P relationships.

Fixes #323.
Props atimmer.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss (modified) (5 diffs)

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

@@ -466 +466 @@
      * section styles
      */
+
+    section {
+        overflow: auto;
+    }
 
     .home-landing .section {
@@ -923 +927 @@
     .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
         border-bottom: 1px solid #dfdfdf;
+
         h1 {
             margin: 24px 0;
@@ -1013 +1018 @@
     }
 
+    /* = Usage
+    ----------------------------------------------- */
+    .usage {
+        article {
+            float: left;
+            width: 50%;
+        }
+
+        .used-by {
+            padding-right: 30px;
+        }
+
+        .uses {
+            padding-left: 30px;
+        }
+
+        ul {
+            line-height: 1.7; /* Slightly increase the line height for more readability */
+            list-style-type: none;
+            margin: 0;
+        }
+
+        .show-more, .hide-more {
+            display: none;
+        }
+    }
+
+
     .source-content {
         overflow: auto;
@@ -1303 +1336 @@
             padding-left: 0;
         }
+
+        &.archive, &.search {
+            .meta {
+                font-size: 100%;
+                margin-bottom: 1.5em;
+
+                a {
+                    color: #21759b;
+                }
+            }
+        }
+    }
+
+}
+
+@media ( min-width: 43em ) {
+    .devhub-wrap {
+        &.archive, &.search {
+            .meta {
+                float: right;
+            }
+
+            .sourcefile {
+                float: left;
+            }
+        }
     }
 }
@@ -1390 +1449 @@
             width: 99%;
         }
+
+        .usage {
+            article {
+                width: 100%;
+            }
+        }
     }
 }