WordPress.org
Get WordPress

Making WordPress.org


Ignore:
Timestamp:
08/26/2016 07:58:01 PM (8 years ago)
Author:
obenland
Message:

Plugin Directory: React components for single plugin view.

Adds a React version of the single plugin page. Still needs more work around
certain plugin sections, like showing different links based on whether a user
is logged in or not.
Moves over the last component-based sass files into the component structure.

See #1719.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/widget-area/style.scss

    r3847 r3862  
    1 .widget {
    2     margin: 0 0 1.5em;
    3 }
    4 
    5 .home .widget-area {
     1.widget-area {
    62    margin: 0 auto;
    73    max-width: $size__site-main;
    … …  
    117        padding: 0 10px ms(10);
    128    }
    13 
    14     .widget {
    15         display: inline-block;
    16         font-size: ms( -2 );
    17         margin: 0;
    18         vertical-align: top;
    19 
    20         @media screen and ( min-width: $ms-breakpoint ) {
    21             margin-right: 5%;
    22             width: 30%;
    23 
    24             &:last-child {
    25                 margin-right: 0;
    26             }
    27         }
    28 
    29         /* Make sure select elements fit in widgets. */
    30         select {
    31             max-width: 100%;
    32         }
    33     }
    349}
    35 
    36 .plugin-ratings {
    37     font-size: ms( -2 );
    38     position: relative;
    39 
    40     .reviews-link {
    41         position: absolute;
    42         right: 0;
    43         top: 0.3rem;
    44 
    45         &:after {
    46             content: "\f345";
    47             font-family: dashicons;
    48             padding-left: 5px;
    49             vertical-align: top;
    50         }
    51     }
    52 
    53     [class*='dashicons-star-'] {
    54         color: #FFB900;
    55         display: inline-block;
    56         font-size: ms( 4 );
    57         height: auto;
    58         margin: 0;
    59         width: auto;
    60     }
    61 
    62     .ratings-list {
    63         list-style-type: none;
    64         margin: 1rem 0;
    65         padding: 0;
    66 
    67         .counter-container,
    68         .counter-container a {
    69             width: 100%;
    70         }
    71 
    72         .counter-label {
    73             display: inline-block;
    74             min-width: 58px;
    75         }
    76 
    77         .counter-back,
    78         .counter-bar {
    79             display: inline-block;
    80             height: 1rem;
    81             vertical-align: middle;
    82         }
    83 
    84         .counter-back {
    85             background-color: #ececec;
    86             width: 58%;
    87             width: calc(100% - 130px);
    88         }
    89 
    90         .counter-bar {
    91             background-color: #ffc733;
    92             display: block;
    93         }
    94 
    95         .counter-count {
    96             margin-left: 3px;
    97         }
    98     }
    99 }
    100 
    101 .plugin-support {
    102     font-size: ms( -2 );
    103 
    104     .counter-container {
    105         margin-bottom: 1rem;
    106         position: relative;
    107     }
    108 
    109     .counter-back,
    110     .counter-bar {
    111         display: inline-block;
    112         height: 30px;
    113         vertical-align: middle;
    114     }
    115 
    116     .counter-back {
    117         background-color: #ececec;
    118         width: 100%;
    119     }
    120 
    121     .counter-bar {
    122         background-color: #c7e8ca;
    123         display: block;
    124     }
    125 
    126     .counter-count {
    127         font-size: ms( -4 );
    128         left: 8px;
    129         position: absolute;
    130         top: 8px;
    131         width: 100%;
    132         width: calc(100% - 8px);
    133 
    134         @media screen and ( min-width: $ms-breakpoint ) {
    135             top: 5px;
    136         }
    137     }
    138 }
    139 
    140 .plugin-meta {
    141     @extend .clear;
    142     margin-top: 2rem;
    143 
    144     ul {
    145         font-size: ms( -2 );
    146         list-style-type: none;
    147         margin: 0;
    148         padding: 0;
    149     }
    150 
    151     li {
    152         border-top: 1px solid $color__border;
    153         padding: 0.5rem 0;
    154 
    155         strong {
    156             float: right;
    157         }
    158     }
    159 
    160     .tags {
    161         float: right;
    162         text-align: right;
    163         width: 60%;
    164     }
    165 
    166     [rel="tag"] {
    167         background: $color__background-pre;
    168         border-radius: 2px;
    169         color: #000;
    170         display: inline-block;
    171         font-size: ms( -4 );
    172         margin: 2px;
    173         padding: 3px 6px;
    174         position: relative;
    175         white-space: nowrap;
    176         width: auto;
    177 
    178         &:hover {
    179             background: #f3f3f3;
    180         }
    181         &:active {
    182             background: #dfdfdf;
    183         }
    184     }
    185 }
Note: See TracChangeset for help on using the changeset viewer.