Changeset 4374

Timestamp:

11/18/2016 03:26:57 AM (8 years ago)

Author:

tellyworth

Message:

Plugin directory: limit the height of screenshot thumbnails in the React viewer.

See #2246

Location:

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

Files:

• client/components/plugin/sections/screenshots/style.scss (modified) (1 diff)
• client/styles/_components.scss (modified) (1 diff)
• css/style-rtl.css (modified) (21 diffs)
• css/style.css (modified) (2 diffs)

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

@@ -14 +14 @@
         text-transform: inherit;
     }
+
+    .image-gallery-thumbnails-container {
+        max-height: 100px;
+    }
+
+    .image-gallery-thumbnail {
+        vertical-align: top;
+    }
 }

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

@@ -9 +9 @@
 @import "../components/plugin/favorite-button/style";
 @import "../components/plugin/plugin-banner/style";
+@import "../components/plugin/sections/changelog/style";
 @import "../components/plugin/sections/developers/style";
 @import "../components/plugin/sections/faq/style";

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

@@ -2124 +2124 @@
 }
 
+#changelog {
+  font-size: 12.8px;
+  font-size: 0.8rem;
+}
+
+#changelog code {
+  font-size: 12.8px;
+  font-size: 0.8rem;
+}
+
+#changelog h4 {
+  margin-top: 0;
+}
+
 .plugin-developers {
   list-style-type: none;
@@ -2146 +2160 @@
   margin-left: 10px;
   vertical-align: middle;
+  float: right;
 }
 
@@ -2171 +2186 @@
   font-size: 1rem;
   font-weight: 600;
-  letter-spacing: 0.8px;
-  letter-spacing: 0.05rem;
   padding: 16px 0;
   padding: 1rem 0;
@@ -2277 +2290 @@
   margin-top: 8px;
   margin-top: 0.5rem;
+  text-decoration: none;
 }
 
@@ -2283 +2297 @@
   font-family: dashicons;
   vertical-align: text-top;
+  padding-right: 5px;
+  float: left;
+  position: relative;
+  top: 1px;
 }
 
@@ -2298 +2316 @@
 .image-gallery-content .image-gallery-left-nav,
 .image-gallery-content .image-gallery-right-nav {
-  color: #fff;
-  font-size: 61.035px;
-  font-size: 3.8146972656rem;
+  display: none;
+  font-size: 48.828px;
+  font-size: 3.0517578125rem;
   height: 100%;
   position: absolute;
-  text-shadow: 0 2px 2px #222;
   top: 0;
   z-index: 4;
+  border-color: #eee;
+  -webkit-transition: background 0.1s ease, border 0.1s ease;
+  transition: background 0.1s ease, border 0.1s ease;
 }
 
@@ -2318 +2338 @@
   .image-gallery-content .image-gallery-left-nav:hover,
   .image-gallery-content .image-gallery-right-nav:hover {
-    color: #fff;
+    background: #fff;
+    opacity: 0.8;
+    border: 1px solid #eee;
   }
 }
@@ -2324 +2346 @@
 .image-gallery-content .image-gallery-left-nav:before,
 .image-gallery-content .image-gallery-right-nav:before {
-  padding: 15px;
   position: relative;
-  top: -15px;
+  font-family: 'dashicons';
 }
 
@@ -2334 +2355 @@
 
 .image-gallery-content .image-gallery-left-nav:before {
-  content: '\027E8';
+  content: '\f341';
+}
+
+.image-gallery-content .image-gallery-left-nav:hover {
+  margin-right: -1px;
 }
 
@@ -2342 +2367 @@
 
 .image-gallery-content .image-gallery-right-nav:before {
-  content: '\027E9';
+  content: '\f345';
+}
+
+.image-gallery-content .image-gallery-right-nav:hover {
+  margin-left: -1px;
+}
+
+.image-gallery-content:hover .image-gallery-left-nav,
+.image-gallery-content:hover .image-gallery-right-nav {
+  display: block;
 }
 
@@ -2350 +2384 @@
   position: relative;
   white-space: nowrap;
+  border: 1px solid #eee;
 }
 
@@ -2377 +2412 @@
   padding: 10px 20px;
   white-space: normal;
+  font-size: 12.8px;
+  font-size: 0.8rem;
 }
 
@@ -2389 +2426 @@
   background: #fff;
   margin-top: 5px;
-  overflow: hidden;
 }
 
@@ -2401 +2437 @@
   display: table-cell;
   margin-left: 5px;
+  border: 1px solid #eee;
 }
 
@@ -2408 +2445 @@
 
 .image-gallery-thumbnail img {
-  border: 4px solid transparent;
   vertical-align: middle;
   width: 100px;
@@ -2415 +2451 @@
 @media (max-width: 768px) {
   .image-gallery-thumbnail img {
-    border: 3px solid transparent;
     width: 75px;
   }
 }
 
-.image-gallery-thumbnail.active img {
-  border: 4px solid #337ab7;
-}
-
-@media (max-width: 768px) {
-  .image-gallery-thumbnail.active img {
-    border: 3px solid #337ab7;
-  }
+.image-gallery-thumbnail:hover {
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
+}
+
+.image-gallery-thumbnail.active {
+  border: 1px solid #337ab7;
 }
 
@@ -2468 +2502 @@
 }
 
-.plugin-screenshots figcaption {
-  font-style: italic;
+.plugin-screenshots .image-gallery-thumbnails-container {
+  max-height: 100px;
+}
+
+.plugin-screenshots .image-gallery-thumbnail {
+  vertical-align: top;
 }
 
@@ -2482 +2520 @@
   max-height: none;
   overflow: auto;
+}
+
+.read-more:nth-of-type(1) {
+  max-height: 400px;
 }
 
@@ -2548 +2590 @@
   padding-right: 5px;
   vertical-align: text-top;
+  position: relative;
+  float: left;
+  top: 1px;
 }
 
 .toggled + .section-toggle:after {
   content: "\f343";
+}
+
+.section-toggle:hover {
+  text-decoration: underline;
 }
 
@@ -3077 +3126 @@
   position: absolute;
   left: 0;
-  top: 4.8px;
-  top: 0.3rem;
+  top: 0;
 }
 
@@ -3108 +3156 @@
 .plugin-ratings .ratings-list .counter-container a {
   width: 100%;
+}
+
+.plugin-ratings .ratings-list .counter-container:hover,
+.plugin-ratings .ratings-list .counter-container a:hover {
+  text-decoration: none;
 }
 

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

@@ -2502 +2502 @@
 }
 
+.plugin-screenshots .image-gallery-thumbnails-container {
+  max-height: 100px;
+}
+
+.plugin-screenshots .image-gallery-thumbnail {
+  vertical-align: top;
+}
+
 .read-more {
   border-bottom: 2px solid #eee;
@@ -3255 +3263 @@
   }
 }
-/*# sourceMappingURL=style.css.map */