Making WordPress.org


Ignore:
Timestamp:
05/27/2019 04:46:54 AM (5 years ago)
Author:
tellyworth
Message:

Plugin directory theme: Improve responsive design of tabs.

This replaces the pure CSS tabs with a JS implementation that makes changes more manageable, and deals with some accessibility and responsiveness issues.

Props ck3lee
See #2776

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss

    r8547 r8880  
    4141    }
    4242
    43     .tabs {
    44         list-style: none;
    45         margin:0;
     43    .tab {
     44
     45        display: flex;
     46        flex-wrap: wrap;
     47        margin: 0;
    4648        border-bottom: 2px solid #eee;
    4749
    48         li {
    49             display: inline-block;
    50             margin-bottom: -2px;
    51             border: 2px solid transparent;
     50        button, a {
     51            cursor: pointer;
     52            padding: 8px 22px;
    5253            font-size: 0.8rem;
     54            border: 0;
     55            margin: 4px;
     56            background: #fff;
     57        }
     58
     59        button {
    5360            color: #0073aa;
    54             transition: background .2s ease;
    5561
    56             a {
    57                 border: 0;
    58                 display: block;
    59                 padding: 0.64rem 1.25rem;
    60                 background: white;
    61                 text-decoration: none;
    62 
    63                 &.active, &:hover {
    64                     background: #eee;
    65                 }
     62            &:hover {
     63                background-color: #ddd;
    6664            }
    6765
    6866            &.active, &:hover {
    69                 padding-bottom: 0 !important;
    70                 border: 2px solid #eee;
     67                border-top: 2px solid #eee;
     68                border-left: 2px solid #eee;
     69                border-right: 2px solid #eee;
     70                background: #fff;
     71                margin: -2px 2px;
     72                padding-bottom: 10px;
    7173            }
    7274        }
     75    }
    7376
    74         @media screen and (max-width:34em) {
    75             border-top: 2px solid #eee;
    7677
    77             li {
    78                 display: block;
    79                 border: none;
    80                 border-bottom: 1px solid #eee;
    81                 margin-bottom: 1px;
    82 
    83                 &.active, &:hover {
    84                     border: none;
    85                     border-bottom: 1px solid #eee;
    86                 }
    87             }
    88         }
     78    .tabcontent {
     79        display: none;
     80        padding: 6px 12px;
     81        border: 1px solid #ccc;
     82        border-top: none;
    8983    }
    9084
     
    10094
    10195        > div {
    102             display:none;
    10396            border: 0;
    10497
     
    126119    }
    127120
    128     span#description,
    129     span#reviews,
    130     span#developers,
    131     span#installation {
    132         position:fixed;
    133     }
    134 
    135     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .tabs li#tablink-description ,
    136     span#reviews:target ~ .tabs li#tablink-reviews,
    137     span#installation:target ~ .tabs li#tablink-installation,
    138     span#developers:target ~ .tabs li#tablink-developers  {
    139         border-top: 2px solid #eee;
    140         border-left: 2px solid #eee;
    141         border-right: 2px solid #eee;
    142         border-bottom: 0;
    143         padding-bottom: 2px;
    144         background: #fff;
    145     }
    146 
    147     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-description,
    148     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #screenshots,
    149     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #faq,
    150     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #blocks,
    151     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers,
    152     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers ~ button,
    153     span#reviews:target ~ .entry-content #tab-reviews,
    154     span#installation:target ~ .entry-content #tab-installation,
    155     span#developers:target ~ .entry-content #tab-changelog,
    156     span#developers:target ~ .entry-content #tab-developers,
    157     span#developers:target ~ .entry-content #tab-developers ~ button,
    158     span#developers:target ~ .entry-content #tab-developers .plugin-development {
    159         display:block;
    160     }
    161 
    162     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers .plugin-development,
    163     span#developers:target ~ .entry-content #tab-developers .plugin-contributors {
    164         display:none;
    165     }
    166 
    167     span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-meta .plugin-contributors,
    168     span#reviews:target ~ .entry-meta .plugin-meta,
    169     span#reviews:target ~ .entry-meta .plugin-support,
    170     span#reviews:target ~ .entry-meta .plugin-donate,
    171     span#reviews:target ~ .entry-meta .plugin-contributors,
    172     span#installation:target ~ .entry-meta .plugin-contributors {
    173         display:none;
    174     }
    175121
    176122    @media screen and ( min-width: $ms-breakpoint ) {
Note: See TracChangeset for help on using the changeset viewer.