Making WordPress.org


Ignore:
Timestamp:
04/20/2017 04:12:08 PM (8 years ago)
Author:
Otto42
Message:

Plugin Directory: The return of tabs.

Change single-plugin view to have tabbed design. Eliminates read-more on all sections except developers and changelog, adds tabs back to interface using CSS to switch between them. Tabs control both main display as well as widgets.

Known issues: Changelog read-more not working (js issue), developers section is currently split using CSS, future change will split this section into two separate sections.

File:
1 edited

Legend:

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

    r4224 r5399  
    88    .plugin-header {
    99        @extend .clear;
    10         border-bottom: 2px solid $color__border;
     10        border-bottom: 0;
    1111        padding: ms( 1 ) ms( 4 );
    1212
     
    4040        padding-top: 0;
    4141    }
    42 
    43     .entry-content,
    44     .entry-meta {
     42   
     43    .tabs {
     44        list-style: none;
     45        margin:0;
     46        border-bottom: 2px solid #eee;
     47       
     48        li {
     49            display: inline-block;
     50            margin-bottom: -2px;
     51            border: 2px solid transparent;
     52            font-size: 0.8rem;
     53            color: #0073aa;
     54            transition: background .2s ease;
     55           
     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                }
     66            }
     67           
     68            &.active, &:hover {
     69                padding-bottom: 0 !important;
     70                border: 2px solid #eee;
     71            }
     72        }
     73       
     74        @media screen and (max-width:34em) {
     75            border-top: 2px solid #eee;
     76
     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        }
     89    }
     90
     91    .entry-content {
    4592        padding: 0 ms( 4 );
    46     }
    47 
    48     .entry-content {
    4993        max-width: 48rem;
    5094
     
    5498            width: 65%;
    5599        }
     100       
     101        > div {
     102            display:none;
     103            border: 0;
     104           
     105            ~ button {
     106                display:none;
     107                border: 0;
     108            }
     109        }
     110       
     111        tr {
     112            border-bottom: 1px solid #eee;
     113           
     114            &:first-child {
     115                border-top: 1px solid #eee;
     116            }
     117           
     118            td {
     119                padding: 0.2rem 0;
     120            }
     121        }
     122       
     123        #admin {
     124            display:block !important;
     125        }
     126    }
     127   
     128    .entry-meta {
     129        padding: 0 ms( 4 );
     130    }
     131   
     132    span#description,
     133    span#reviews,
     134    span#developers,
     135    span#installation {
     136        position:fixed;
     137    }
     138   
     139    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .tabs li#tablink-description ,
     140    span#reviews:target ~ .tabs li#tablink-reviews,
     141    span#installation:target ~ .tabs li#tablink-installation,
     142    span#developers:target ~ .tabs li#tablink-developers  {
     143        border-top: 2px solid #eee;
     144        border-left: 2px solid #eee;
     145        border-right: 2px solid #eee;
     146        border-bottom: 0;
     147        padding-bottom: 2px;
     148        background: #fff;
     149    }
     150   
     151    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-description,
     152    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #screenshots,
     153    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #faq,
     154    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers,
     155    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers ~ button,
     156    span#reviews:target ~ .entry-content #tab-reviews,
     157    span#installation:target ~ .entry-content #tab-installation,
     158    span#developers:target ~ .entry-content #tab-changelog,
     159    span#developers:target ~ .entry-content #tab-developers,
     160    span#developers:target ~ .entry-content #tab-developers ~ button,
     161    span#developers:target ~ .entry-content #tab-developers .plugin-development {
     162        display:block;
     163    }
     164   
     165    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers .plugin-development,
     166    span#developers:target ~ .entry-content #tab-developers .plugin-contributors {
     167        display:none;
     168    }
     169   
     170    span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-meta .plugin-contributors,
     171    span#reviews:target ~ .entry-meta .plugin-meta,
     172    span#reviews:target ~ .entry-meta .plugin-support,
     173    span#reviews:target ~ .entry-meta .plugin-donate,
     174    span#reviews:target ~ .entry-meta .plugin-contributors,
     175    span#installation:target ~ .entry-meta .plugin-contributors {
     176        display:none;
     177    }
     178   
     179    .plugin-reviews .plugin-review + .plugin-review {
     180        margin: 32px 0 16px;
     181        margin: 2rem 0 1rem;
     182        padding-bottom: 1rem;
     183    }
     184   
     185    article.plugin-review {
     186        border-bottom: 2px solid #eee;
    56187    }
    57188
Note: See TracChangeset for help on using the changeset viewer.