Changeset 4437

Timestamp:

11/28/2016 03:20:59 AM (8 years ago)

Author:

mapk

Message:

Plugin Directory Theme: Updating plugin card styles & adding a feedback survey link.

See #2183, #2267

Location:

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

Files:

• client/components/plugin-card/style.scss (modified) (4 diffs)
• client/styles/typography/_copy.scss (modified) (1 diff)
• css/style.css (modified) (17 diffs)

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

@@ -2 +2 @@
     background-color: #f9f9f9;
     margin-bottom: 4%;
-    padding: 8px 8px 0 8px;
+    padding: 15px 15px 8px;
     vertical-align: top;
 
@@ -39 +39 @@
 
         p {
-            margin: 0 0 8px;
+            margin: 0;
         }
     }
@@ -45 +45 @@
     hr {
         background-color: #fff;
-        margin: auto;
+        margin: 15px -15px 8px;
     }
 
@@ -60 +60 @@
                 font-size: 1rem;
                 margin-right: 0.4rem;
+            }
+
+            &.last-updated {
+                display: none;
+            }
+            &.plugin-author {
+                width: 100%;
             }
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/styles/typography/_copy.scss

@@ -68 +68 @@
     font-size: 125%;
 }
+
+
+// Feedback survey link for acquiring participant's feedback.
+
+.feedback-survey {
+    background: #fff;
+    border-radius: 3px 0 0 3px;
+    box-shadow: 0 0 8px rgba(0,0,0,.2);
+    display: block; 
+    font-size: 0.8rem;
+    padding: 5px 10px;
+    position: fixed;
+    right: 0;
+    top: 200px;
+    width: 40px;
+    z-index: 100;
+
+    .survey-msg {
+        display: none;
+    }
+
+    &:hover {
+        width: auto;
+
+        .survey-msg {
+            display: inline-block;
+        }
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+
+    .dashicons-megaphone {
+        margin: 2px 10px 0 0;
+    }
+}

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

@@ -378 +378 @@
 big {
   font-size: 125%;
+}
+
+.feedback-survey {
+  background: #fff;
+  -webkit-border-radius: 3px 0 0 3px;
+  border-radius: 3px 0 0 3px;
+  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+  display: block;
+  font-size: 12.8px;
+  font-size: 0.8rem;
+  padding: 5px 10px;
+  position: fixed;
+  right: 0;
+  top: 200px;
+  width: 40px;
+  z-index: 100;
+}
+
+.feedback-survey .survey-msg {
+  display: none;
+}
+
+.feedback-survey:hover {
+  width: auto;
+}
+
+.feedback-survey:hover .survey-msg {
+  display: inline-block;
+}
+
+.feedback-survey a:hover {
+  text-decoration: none;
+}
+
+.feedback-survey .dashicons-megaphone {
+  margin: 2px 10px 0 0;
 }
 
@@ -1852 +1889 @@
   background-color: #f9f9f9;
   margin-bottom: 4%;
-  padding: 8px 8px 0 8px;
+  padding: 15px 15px 8px;
   vertical-align: top;
 }
@@ -1897 +1934 @@
 
 .plugin-card .entry-excerpt p {
-  margin: 0 0 8px;
+  margin: 0;
 }
 
 .plugin-card hr {
   background-color: #fff;
-  margin: auto;
+  margin: 15px -15px 8px;
 }
 
@@ -1922 +1959 @@
 }
 
+.plugin-card footer span.last-updated {
+  display: none;
+}
+
+.plugin-card footer span.plugin-author {
+  width: 100%;
+}
+
 .plugin-card footer .dashicons {
   margin: 0 2px -16px;
@@ -2003 +2048 @@
 .site-main.single .plugin-rating .rating-count {
   display: none;
-}
-
-.plugin-rating .rating-count a {
-  color: inherit;
-  cursor: hand;
-  text-decoration: none;
 }
 
@@ -2209 +2248 @@
 }
 
-#faq h2:first-of-type {
+.plugin-faqs h2:first-of-type {
   font-size: 20px;
   font-size: 1.25rem;
@@ -2222 +2261 @@
 }
 
-#faq dl {
+.plugin-faqs dl {
   border-bottom: 1px solid #eee;
 }
 
-#faq dt {
+.plugin-faqs dt {
   border-top: 1px solid #eee;
   cursor: pointer;
@@ -2236 +2275 @@
 }
 
-#faq dt:before {
+.plugin-faqs dt:before {
   content: "\f347";
   float: right;
@@ -2244 +2283 @@
 }
 
-#faq dt.open:before {
+.plugin-faqs dt.open:before {
   content: "\f343";
 }
 
-#faq dd {
+.plugin-faqs dd {
   display: none;
   margin: 0 0 16px;
@@ -2254 +2293 @@
 }
 
-#faq dd p {
+.plugin-faqs dd p {
   margin: 0;
 }
 
-#faq dd p + p {
+.plugin-faqs dd p + p {
   margin-top: 16px;
   margin-top: 1rem;
 }
 
-.no-js #faq dd {
+.no-js .plugin-faqs dd {
   display: block;
 }
@@ -2562 +2601 @@
 }
 
-.section.read-more {
+.read-more {
   border-bottom: 2px solid #eee;
   max-height: 200px;
@@ -2569 +2608 @@
 }
 
-.section.read-more#description {
+.read-more#reviews {
+  max-height: none;
+  overflow: auto;
+}
+
+.read-more:nth-of-type(1) {
   max-height: 400px;
 }
 
-.section.read-more#description.toggled {
-  max-height: none;
-}
-
-.section.read-more.toggled {
-  max-height: none;
-}
-
-.section h1, .section h2, .section h3 {
+.read-more h1, .read-more h2, .read-more h3 {
   font-size: 16px;
   font-size: 1rem;
@@ -2590 +2626 @@
 }
 
-.section h1:nth-child(2), .section h2:nth-child(2), .section h3:nth-child(2) {
+.read-more h1:nth-child(2), .read-more h2:nth-child(2), .read-more h3:nth-child(2) {
   margin-top: 0;
 }
 
-.section h4, .section h5, .section h6 {
+.read-more h4, .read-more h5, .read-more h6 {
   font-size: 12.8px;
   font-size: 0.8rem;
@@ -2603 +2639 @@
 }
 
-.section h4:nth-child(2), .section h5:nth-child(2), .section h6:nth-child(2) {
+.read-more h4:nth-child(2), .read-more h5:nth-child(2), .read-more h6:nth-child(2) {
   margin-top: 0;
 }
 
-.section h2:first-of-type {
+.read-more h2:first-of-type {
   font-size: 20px;
   font-size: 1.25rem;
@@ -2617 +2653 @@
 }
 
-.section p:first-child {
+.read-more p:first-child {
   margin-top: 0;
+}
+
+.read-more.toggled {
+  max-height: none;
+}
+
+#screenshots.read-more {
+  border-bottom: none;
 }
 
@@ -2871 +2915 @@
 }
 
-nav .nav-links {
-  text-align: center;
-}
-
-nav .nav-links .page-numbers {
-  background-color: #f9f9f9;
-  min-width: 2em;
-  padding: 8px;
-  display: inline-block;
-  cursor: hand;
-}
-
-nav .nav-links .page-numbers.next, nav .nav-links .page-numbers.prev, nav .nav-links .page-numbers.dots {
-  width: auto;
-  font-size: 0.9em;
-  background: none;
-}
-
-nav .nav-links .page-numbers.dots {
-  cursor: inherit;
-}
-
-nav .nav-links span.page-numbers {
-  font-weight: bold;
-  background-color: #f7f7f7;
-}
-
 .main-navigation {
   background: #0073aa;
@@ -3341 +3358 @@
   }
 }
+/*# sourceMappingURL=style.css.map */