Changeset 5399 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss

Timestamp:

04/20/2017 04:12:08 PM (9 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:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/components/plugin/style.scss (modified) (3 diffs)

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

@@ -8 +8 @@
         .plugin-header {
                 @extend .clear;
-                border-bottom: 2px solid $color__border;
+                border-bottom: 0;
                 padding: ms( 1 ) ms( 4 );
 
@@ -40 +40 @@
                 padding-top: 0;
         }
-
-        .entry-content,
-        .entry-meta {
+        
+        .tabs { 
+                list-style: none; 
+                margin:0; 
+                border-bottom: 2px solid #eee;
+                
+                li { 
+                        display: inline-block; 
+                        margin-bottom: -2px; 
+                        border: 2px solid transparent; 
+                        font-size: 0.8rem; 
+                        color: #0073aa; 
+                        transition: background .2s ease;
+                        
+                        a { 
+                                border: 0;
+                                display: block; 
+                                padding: 0.64rem 1.25rem; 
+                                background: white; 
+                                text-decoration: none;
+                                
+                                &.active, &:hover { 
+                                        background: #eee; 
+                                }
+                        }
+                        
+                        &.active, &:hover {
+                                padding-bottom: 0 !important;
+                                border: 2px solid #eee;
+                        }
+                }
+                
+                @media screen and (max-width:34em) {
+                        border-top: 2px solid #eee;
+
+                        li {
+                                display: block;
+                                border: none;
+                                border-bottom: 1px solid #eee;
+                                margin-bottom: 1px;
+
+                                &.active, &:hover {
+                                        border: none;
+                                        border-bottom: 1px solid #eee;
+                                }
+                        }
+                }
+        }
+
+        .entry-content {
                 padding: 0 ms( 4 );
-        }
-
-        .entry-content {
                 max-width: 48rem;
 
@@ -54 +98 @@
                         width: 65%;
                 }
+                
+                > div { 
+                        display:none;
+                        border: 0;
+                        
+                        ~ button { 
+                                display:none;
+                                border: 0;
+                        }
+                }
+                
+                tr { 
+                        border-bottom: 1px solid #eee; 
+                        
+                        &:first-child { 
+                                border-top: 1px solid #eee; 
+                        }
+                        
+                        td { 
+                                padding: 0.2rem 0; 
+                        }
+                }
+                
+                #admin {
+                        display:block !important;
+                }
+        }
+        
+        .entry-meta {
+                padding: 0 ms( 4 );
+        }
+        
+        span#description, 
+        span#reviews, 
+        span#developers, 
+        span#installation {
+                position:fixed;
+        }
+        
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .tabs li#tablink-description ,
+        span#reviews:target ~ .tabs li#tablink-reviews,
+        span#installation:target ~ .tabs li#tablink-installation,
+        span#developers:target ~ .tabs li#tablink-developers  {
+                border-top: 2px solid #eee;
+                border-left: 2px solid #eee;
+                border-right: 2px solid #eee;
+                border-bottom: 0;
+                padding-bottom: 2px;
+                background: #fff;
+        }
+        
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-description,
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #screenshots,
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #faq,
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers,
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers ~ button,
+        span#reviews:target ~ .entry-content #tab-reviews,
+        span#installation:target ~ .entry-content #tab-installation,
+        span#developers:target ~ .entry-content #tab-changelog, 
+        span#developers:target ~ .entry-content #tab-developers,
+        span#developers:target ~ .entry-content #tab-developers ~ button,
+        span#developers:target ~ .entry-content #tab-developers .plugin-development {
+                display:block;
+        }
+        
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-content #tab-developers .plugin-development,
+        span#developers:target ~ .entry-content #tab-developers .plugin-contributors {
+                display:none;
+        }
+        
+        span#reviews:not(:target) ~ span#installation:not(:target) ~ span#developers:not(:target) ~ .entry-meta .plugin-contributors,
+        span#reviews:target ~ .entry-meta .plugin-meta,
+        span#reviews:target ~ .entry-meta .plugin-support,
+        span#reviews:target ~ .entry-meta .plugin-donate,
+        span#reviews:target ~ .entry-meta .plugin-contributors,
+        span#installation:target ~ .entry-meta .plugin-contributors {
+                display:none;
+        }
+        
+        .plugin-reviews .plugin-review + .plugin-review {
+                margin: 32px 0 16px;
+                margin: 2rem 0 1rem;
+                padding-bottom: 1rem;
+        }
+        
+        article.plugin-review {
+                border-bottom: 2px solid #eee;
         }