Changeset 969

Timestamp:

11/10/2014 11:10:21 PM (10 years ago)

Author:

coffee2code

Message:

developer.wordpress.org: Add responsive styles for Dashicons resource page

fixes #711.
props ryelle.

Location:

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

Files:

• js/page-dashicons.js (modified) (2 diffs)
• page-dashicons.php (modified) (1 diff)
• scss/page-dashicons.scss (modified) (6 diffs)
• stylesheets/page-dashicons.css (modified) (5 diffs)

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

@@ -43 +43 @@
                 glyph: glyphtext
             }) );
-
-            $(window).scrollTop(0);
         }
     };
@@ -75 +73 @@
 
             dashicons.display( attr, cssClass );
+            $(window).scrollTop( $("#glyph").offset().top );
 
         });

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

@@ -335 +335 @@
             <div class="info">
                 <span class="name">← {{data.cssClass}}</span>
-                <span><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'>Copy CSS</a></span>
-                <span><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )">Copy HTML</a></span>
-                <span><a href="javascript:dashicons.copy( '{{data.glyph}}' )">Copy Glyph</a></span>
+                <span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'>Copy CSS</a></span>
+                <span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )">Copy HTML</a></span>
+                <span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )">Copy Glyph</a></span>
             </div>
         </script>

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

@@ -22 +22 @@
         bottom: $spacing * 2;
         padding: 0 2.5em;
-        width: 30em;
+        width: 50%;
 
         #search {
@@ -42 +42 @@
         margin-top: 0 !important;
         padding: 1.5em $spacing;
-        width: 30em;
+        width: 50%;
     }
 
@@ -48 +48 @@
         float:left;
         padding: 1.5em $spacing;
-        width: 30em;
+        width: 50%;
 
         .dashicons {
@@ -60 +60 @@
             float:right;
             margin-top: $spacing*2;
-            width: 10em;
+            width: 35%;
         }
 
@@ -139 +139 @@
         display: block;
         font: 14px/1.5 monospace;
-        width: 600px;
+        max-width: 600px;
         white-space: pre;
         border: 1px solid #ccc;
@@ -147 +147 @@
     }
 
+    @media ( max-width: 900px ) {
+        .icon-filter {
+            position: relative;
+            left: auto;
+            bottom: auto;
+            padding-left: $spacing;
+            padding-right: $spacing;
+            padding-bottom: $spacing;
+            width: 100%;
+        }
+
+        .entry-content {
+            float: none;
+            padding-bottom: 0;
+            width: 100%;
+        }
+
+        #glyph {
+            float: none;
+            width: 100%;
+            text-align: center;
+
+            .dashicons {
+                font-size: 240px;
+                width: 240px;
+                height: 240px;
+                overflow: visible;
+            }
+
+            .info {
+                float: none;
+                margin-top: 0;
+                width: 100%;
+            }
+
+            span.link {
+                display: inline-block;
+                margin-right: 10px;
+                margin-bottom: 10px;
+                margin-left: 10px;
+
+                &:nth-of-type(2) {
+                    margin-left: 0;
+                }
+                &:last-of-type {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    @media ( max-width: 400px ) {
+        #glyph,
+        .entry-content,
+        .icon-filter {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
 }

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

@@ -18 +18 @@
   bottom: 50px;
   padding: 0 2.5em;
-  width: 30em;
+  width: 50%;
 }
 .dashicons-page .icon-filter #search {
@@ -36 +36 @@
   margin-top: 0 !important;
   padding: 1.5em 25px;
-  width: 30em;
+  width: 50%;
 }
 .dashicons-page #glyph {
   float: left;
   padding: 1.5em 25px;
-  width: 30em;
+  width: 50%;
 }
 .dashicons-page #glyph .dashicons {
@@ -52 +52 @@
   float: right;
   margin-top: 50px;
-  width: 10em;
+  width: 35%;
 }
 .dashicons-page #glyph span {
@@ -115 +115 @@
   display: block;
   font: 14px/1.5 monospace;
-  width: 600px;
+  max-width: 600px;
   white-space: pre;
   border: 1px solid #ccc;
@@ -122 +122 @@
   min-height: 180px;
 }
+@media (max-width: 900px) {
+  .dashicons-page .icon-filter {
+    position: relative;
+    left: auto;
+    bottom: auto;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-bottom: 25px;
+    width: 100%;
+  }
+  .dashicons-page .entry-content {
+    float: none;
+    padding-bottom: 0;
+    width: 100%;
+  }
+  .dashicons-page #glyph {
+    float: none;
+    width: 100%;
+    text-align: center;
+  }
+  .dashicons-page #glyph .dashicons {
+    font-size: 240px;
+    width: 240px;
+    height: 240px;
+    overflow: visible;
+  }
+  .dashicons-page #glyph .info {
+    float: none;
+    margin-top: 0;
+    width: 100%;
+  }
+  .dashicons-page #glyph span.link {
+    display: inline-block;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    margin-left: 10px;
+  }
+  .dashicons-page #glyph span.link:nth-of-type(2) {
+    margin-left: 0;
+  }
+  .dashicons-page #glyph span.link:last-of-type {
+    margin-right: 0;
+  }
+}
+@media (max-width: 400px) {
+  .dashicons-page #glyph, .dashicons-page .entry-content, .dashicons-page .icon-filter {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}