WordPress.org
Get WordPress

Making WordPress.org

Changeset 3205


Ignore:
Timestamp:
05/20/2016 10:13:57 PM (9 years ago)
Author:
obenland
Message:

Plugin Directory: Let the plugin rating break down shine.

Adds syles to show the breakdown of ratings by star level.

See #1719.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

    r3200 r3205  
    11071107}
    11081108
     1109.plugin-ratings {
     1110  font-size: 12.8px;
     1111  font-size: 0.8rem;
     1112}
     1113
     1114.plugin-ratings [class*='dashicons-star-'] {
     1115  color: #FFB900;
     1116  display: inline-block;
     1117  font-size: 25px;
     1118  font-size: 1.5625rem;
     1119  height: auto;
     1120  margin: 0;
     1121  width: auto;
     1122}
     1123
     1124.plugin-ratings .ratings-list {
     1125  list-style-type: none;
     1126  margin: 1rem 0;
     1127  padding: 0;
     1128}
     1129
     1130.plugin-ratings .ratings-list .counter-container,
     1131.plugin-ratings .ratings-list .counter-container a,
     1132.plugin-ratings .ratings-list .counter-container .single .type-plugin .entry-content .section-toggle, .single .type-plugin .entry-content
     1133.plugin-ratings .ratings-list .counter-container .section-toggle {
     1134  width: 100%;
     1135}
     1136
     1137.plugin-ratings .ratings-list .counter-label {
     1138  display: inline-block;
     1139  min-width: 58px;
     1140}
     1141
     1142.plugin-ratings .ratings-list .counter-back,
     1143.plugin-ratings .ratings-list .counter-bar {
     1144  display: inline-block;
     1145  height: 1rem;
     1146  vertical-align: middle;
     1147}
     1148
     1149.plugin-ratings .ratings-list .counter-back {
     1150  background-color: #ececec;
     1151  width: 58%;
     1152  width: calc(100% - 130px);
     1153}
     1154
     1155.plugin-ratings .ratings-list .counter-bar {
     1156  background-color: #ffc733;
     1157  display: block;
     1158}
     1159
     1160.plugin-ratings .ratings-list .counter-count {
     1161  margin-left: 3px;
     1162}
     1163
     1164.plugin-support {
     1165  font-size: 12.8px;
     1166  font-size: 0.8rem;
     1167}
     1168
     1169.plugin-meta ul {
     1170  font-size: 12.8px;
     1171  font-size: 0.8rem;
     1172  list-style-type: none;
     1173  margin: 0;
     1174  padding: 0;
     1175}
     1176
     1177.plugin-meta ul li {
     1178  padding: 0.5rem 0;
     1179  border-top: 1px solid #eee;
     1180}
     1181
    11091182/*--------------------------------------------------------------
    11101183# Content
    … …  
    14561529}
    14571530
    1458 .single .type-plugin .entry-meta .plugin-ratings .description, .single .type-plugin .entry-meta .stars__small .description {
    1459   font-size: 12.8px;
    1460   font-size: 0.8rem;
    1461 }
    1462 
    1463 .single .type-plugin .entry-meta .plugin-ratings [class*='dashicons-star-'], .single .type-plugin .entry-meta .stars__small [class*='dashicons-star-'] {
    1464   color: #FFB900;
    1465   display: inline-block;
    1466   font-size: 25px;
    1467   font-size: 1.5625rem;
    1468   height: auto;
    1469   margin: 0;
    1470   width: auto;
    1471 }
    1472 
    1473 .single .type-plugin .entry-meta .stars__small {
    1474   display: inline-block;
    1475   line-height: 1;
    1476   margin: 0 10px 0 0;
    1477 }
    1478 
    1479 .single .type-plugin .entry-meta .stars__small [class*='dashicons-star-'] {
    1480   font-size: 16px;
    1481   font-size: 1rem;
    1482 }
    1483 
    1484 .single .type-plugin .entry-meta .plugin-support {
    1485   font-size: 12.8px;
    1486   font-size: 0.8rem;
    1487 }
    1488 
    1489 .single .type-plugin .entry-meta .plugin-meta ul {
    1490   font-size: 12.8px;
    1491   font-size: 0.8rem;
    1492   list-style-type: none;
    1493   margin: 0;
    1494   padding: 0;
    1495 }
    1496 
    1497 .single .type-plugin .entry-meta .plugin-meta ul li {
    1498   padding: 0.5rem 0;
    1499   border-top: 1px solid #eee;
    1500 }
    1501 
    15021531/*--------------------------------------------------------------
    15031532## Asides
    … …  
    15781607
    15791608/*--------------------------------------------------------------
    1580 ## Widgets
    1581 --------------------------------------------------------------*/
    1582 .widget {
    1583   margin: 0 0 1.5em;
    1584 }
    1585 
    1586 .home .widget-area {
    1587   margin: 0 auto;
    1588   max-width: 960px;
    1589   padding: 0 1.5625rem 3.0517578125rem 1.5625rem;
    1590 }
    1591 
    1592 @media (min-width: 67rem) {
    1593   .home .widget-area {
    1594     padding: 0 0 3.0517578125rem 0;
    1595   }
    1596 }
    1597 
    1598 .home .widget-area .widget {
    1599   display: inline-block;
    1600   font-size: 12.8px;
    1601   font-size: 0.8rem;
    1602   margin-right: 5%;
    1603   vertical-align: top;
    1604   width: 30%;
    1605   /* Make sure select elements fit in widgets. */
    1606 }
    1607 
    1608 .home .widget-area .widget:last-child {
    1609   margin-right: 0;
    1610 }
    1611 
    1612 .home .widget-area .widget select {
    1613   max-width: 100%;
    1614 }
    1615 
    1616 /*--------------------------------------------------------------
    16171609# Infinite scroll
    16181610--------------------------------------------------------------*/

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_site.scss

    r3200 r3205  
    3030--------------------------------------------------------------*/
    3131@import "primary/pagination";
    32 
    33 /*--------------------------------------------------------------
    34 ## Widgets
    35 --------------------------------------------------------------*/
    36 @import "secondary/widgets";

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss

    r3200 r3205  
    8282        float: right;
    8383        width: 30%;
    84 
    85         .plugin-ratings {
    86             .description {
    87                 @include font-size( ms-unitless( ms(-2) ) );
    88             }
    89 
    90             [class*='dashicons-star-'] {
    91                 color: #FFB900;
    92                 display: inline-block;
    93                 @include font-size( ms-unitless( ms(4) ) );
    94                 height: auto;
    95                 margin: 0;
    96                 width: auto;
    97             }
    98         }
    99 
    100         .stars__small {
    101             @extend .plugin-ratings;
    102             display: inline-block;
    103             line-height: 1;
    104             margin: 0 10px 0 0;
    105 
    106             [class*='dashicons-star-'] {
    107                 @include font-size( ms-unitless( ms(0) ) );
    108             }
    109         }
    110 
    111         .plugin-support {
    112             @include font-size( ms-unitless( ms(-2) ) );
    113         }
    114 
    115         .plugin-meta ul {
    116             @include font-size( ms-unitless( ms(-2) ) );
    117             list-style-type: none;
    118             margin: 0;
    119             padding: 0;
    120 
    121             li {
    122                 padding: 0.5rem 0;
    123                 border-top: 1px solid #eee;
    124             }
    125         }
    12684    }
    12785}

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/secondary/_widgets.scss

    r3200 r3205  
    3232    }
    3333}
     34
     35.plugin-ratings {
     36    @include font-size( ms-unitless( ms(-2) ) );
     37
     38    [class*='dashicons-star-'] {
     39        color: #FFB900;
     40        display: inline-block;
     41        @include font-size( ms-unitless( ms(4) ) );
     42        height: auto;
     43        margin: 0;
     44        width: auto;
     45    }
     46
     47    .ratings-list {
     48        list-style-type: none;
     49        margin: 1rem 0;
     50        padding: 0;
     51
     52        .counter-container,
     53        .counter-container a {
     54            width: 100%;
     55        }
     56
     57        .counter-label {
     58            display: inline-block;
     59            min-width: 58px;
     60        }
     61
     62        .counter-back,
     63        .counter-bar {
     64            display: inline-block;
     65            height: 1rem;
     66            vertical-align: middle;
     67        }
     68
     69        .counter-back {
     70            background-color: #ececec;
     71            width: 58%;
     72            width: calc(100% - 130px);
     73        }
     74
     75        .counter-bar {
     76            background-color: #ffc733;
     77            display: block;
     78        }
     79
     80        .counter-count {
     81            margin-left: 3px;
     82        }
     83    }
     84}
     85
     86.plugin-support {
     87    @include font-size( ms-unitless( ms(-2) ) );
     88}
     89
     90.plugin-meta ul {
     91    @include font-size( ms-unitless( ms(-2) ) );
     92    list-style-type: none;
     93    margin: 0;
     94    padding: 0;
     95
     96    li {
     97        padding: 0.5rem 0;
     98        border-top: 1px solid #eee;
     99    }
     100}
Note: See TracChangeset for help on using the changeset viewer.