WordPress.org
Get WordPress

Making WordPress.org

Ticket #711: meta-dashicons-responsive.diff

File meta-dashicons-responsive.diff, 5.4 KB (added by ryelle, 9 years ago)

  • js/page-dashicons.js

     
    4242                                html: htmltext,
    4343                                glyph: glyphtext
    4444                        }) );
    45 
    46                         $(window).scrollTop(0);
    4745                }
    4846        };
    4947
    … …  
    7472                        cssClass = jQuery( this ).attr( 'class' );
    7573
    7674                        dashicons.display( attr, cssClass );
     75                        $(window).scrollTop( $("#glyph").offset().top );
    7776
    7877                });
    7978

  • page-dashicons.php

     
    334334                        <div class="dashicons {{data.cssClass}}"></div>
    335335                        <div class="info">
    336336                                <span class="name">← {{data.cssClass}}</span>
    337                                 <span><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'>Copy CSS</a></span>
    338                                 <span><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )">Copy HTML</a></span>
    339                                 <span><a href="javascript:dashicons.copy( '{{data.glyph}}' )">Copy Glyph</a></span>
     337                                <span class="link"><a href='javascript:dashicons.copy( "content: \"\\{{data.attr}}\";", "css" )'>Copy CSS</a></span>
     338                                <span class="link"><a href="javascript:dashicons.copy( '{{data.html}}', 'html' )">Copy HTML</a></span>
     339                                <span class="link"><a href="javascript:dashicons.copy( '{{data.glyph}}' )">Copy Glyph</a></span>
    340340                        </div>
    341341                </script>
    342342

  • scss/page-dashicons.scss

     
    2121                left: 0;
    2222                bottom: $spacing * 2;
    2323                padding: 0 2.5em;
    24                 width: 30em;
     24                width: 50%;
    2525
    2626                #search {
    2727                        width: 100%;
    … …  
    4141                float:left;
    4242                margin-top: 0 !important;
    4343                padding: 1.5em $spacing;
    44                 width: 30em;
     44                width: 50%;
    4545        }
    4646
    4747        #glyph {
    4848                float:left;
    4949                padding: 1.5em $spacing;
    50                 width: 30em;
     50                width: 50%;
    5151
    5252                .dashicons {
    5353                        font-size: 240px;
    … …  
    5959                .info {
    6060                        float:right;
    6161                        margin-top: $spacing*2;
    62                         width: 10em;
     62                        width: 35%;
    6363                }
    6464
    6565                span {
    … …  
    138138        .code {
    139139                display: block;
    140140                font: 14px/1.5 monospace;
    141                 width: 600px;
     141                max-width: 600px;
    142142                white-space: pre;
    143143                border: 1px solid #ccc;
    144144                padding: 10px;
    … …  
    146146                min-height: 180px;
    147147        }
    148148
    149 }
    150  No newline at end of file
     149        @media ( max-width: 900px ) {
     150                .icon-filter {
     151                        position: relative;
     152                        left: auto;
     153                        bottom: auto;
     154                        padding-left: $spacing;
     155                        padding-right: $spacing;
     156                        padding-bottom: $spacing;
     157                        width: 100%;
     158                }
     159
     160                .entry-content {
     161                        float: none;
     162                        padding-bottom: 0;
     163                        width: 100%;
     164                }
     165
     166                #glyph {
     167                        float: none;
     168                        width: 100%;
     169                        text-align: center;
     170
     171                        .dashicons {
     172                                font-size: 240px;
     173                                width: 240px;
     174                                height: 240px;
     175                                overflow: visible;
     176                        }
     177
     178                        .info {
     179                                float: none;
     180                                margin-top: 0;
     181                                width: 100%;
     182                        }
     183
     184                        span.link {
     185                                display: inline-block;
     186                                margin-right: 10px;
     187                                margin-bottom: 10px;
     188                                margin-left: 10px;
     189
     190                                &:nth-of-type(2) {
     191                                        margin-left: 0;
     192                                }
     193                                &:last-of-type {
     194                                        margin-right: 0;
     195                                }
     196                        }
     197                }
     198        }
     199
     200        @media ( max-width: 400px ) {
     201                #glyph,
     202                .entry-content,
     203                .icon-filter {
     204                        padding-left: 0;
     205                        padding-right: 0;
     206                }
     207        }
     208
     209}
     210

  • stylesheets/page-dashicons.css

     
    1717  left: 0;
    1818  bottom: 50px;
    1919  padding: 0 2.5em;
    20   width: 30em;
     20  width: 50%;
    2121}
    2222.dashicons-page .icon-filter #search {
    2323  width: 100%;
    … …  
    3535  float: left;
    3636  margin-top: 0 !important;
    3737  padding: 1.5em 25px;
    38   width: 30em;
     38  width: 50%;
    3939}
    4040.dashicons-page #glyph {
    4141  float: left;
    4242  padding: 1.5em 25px;
    43   width: 30em;
     43  width: 50%;
    4444}
    4545.dashicons-page #glyph .dashicons {
    4646  font-size: 240px;
    … …  
    5151.dashicons-page #glyph .info {
    5252  float: right;
    5353  margin-top: 50px;
    54   width: 10em;
     54  width: 35%;
    5555}
    5656.dashicons-page #glyph span {
    5757  display: block;
    … …  
    114114.dashicons-page .code {
    115115  display: block;
    116116  font: 14px/1.5 monospace;
    117   width: 600px;
     117  max-width: 600px;
    118118  white-space: pre;
    119119  border: 1px solid #ccc;
    120120  padding: 10px;
    … …  
    121121  overflow: auto;
    122122  min-height: 180px;
    123123}
     124@media (max-width: 900px) {
     125  .dashicons-page .icon-filter {
     126    position: relative;
     127    left: auto;
     128    bottom: auto;
     129    padding-left: 25px;
     130    padding-right: 25px;
     131    padding-bottom: 25px;
     132    width: 100%;
     133  }
     134  .dashicons-page .entry-content {
     135    float: none;
     136    padding-bottom: 0;
     137    width: 100%;
     138  }
     139  .dashicons-page #glyph {
     140    float: none;
     141    width: 100%;
     142    text-align: center;
     143  }
     144  .dashicons-page #glyph .dashicons {
     145    font-size: 240px;
     146    width: 240px;
     147    height: 240px;
     148    overflow: visible;
     149  }
     150  .dashicons-page #glyph .info {
     151    float: none;
     152    margin-top: 0;
     153    width: 100%;
     154  }
     155  .dashicons-page #glyph span.link {
     156    display: inline-block;
     157    margin-right: 10px;
     158    margin-bottom: 10px;
     159    margin-left: 10px;
     160  }
     161  .dashicons-page #glyph span.link:nth-of-type(2) {
     162    margin-left: 0;
     163  }
     164  .dashicons-page #glyph span.link:last-of-type {
     165    margin-right: 0;
     166  }
     167}
     168@media (max-width: 400px) {
     169  .dashicons-page #glyph, .dashicons-page .entry-content, .dashicons-page .icon-filter {
     170    padding-left: 0;
     171    padding-right: 0;
     172  }
     173}