Changeset 4393

Timestamp:

11/21/2016 07:54:32 AM (8 years ago)

Author:

dd32

Message:

Plugin Directory: Add extra information to the plugin cards.

See #2183

Location:

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

Files:

• client/components/plugin-card/style.scss (modified) (2 diffs)
• client/styles/_components.scss (modified) (1 diff)
• css/style-rtl.css (modified) (3 diffs)
• css/style.css (modified) (3 diffs)
• template-parts/plugin.php (modified) (2 diffs)

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

@@ -1 +1 @@
 .plugin-card {
+    background-color: #f9f9f9;
     margin-bottom: 4%;
+    padding: 8px 8px 0 8px;
+    vertical-align: top;
 
     @media screen and ( min-width: $ms-breakpoint ) {
@@ -39 +42 @@
         }
     }
+
+    hr {
+        background-color: #fff;
+        margin: auto;
+    }
+
+    footer {
+        span {
+            font-size: ms(-3);
+            width: 48%;
+            display: inline-block;
+            overflow: hidden;
+            white-space: nowrap;
+
+            i {
+                display: inline-block;
+                font-size: 1rem;
+                margin-right: 0.4rem;
+            }
+
+        }
+            
+        .dashicons {
+            margin: 0 2px -1rem;
+            color: #bbb;
+            width: auto;
+            height: auto;
+            display: none;
+
+            @media (min-width:414px) {
+                display: inline-block;
+            }
+        }
+    }
 }

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

@@ -19 +19 @@
 @import "../components/search-form/style";
 @import "../components/search/style";
+@import "../components/site-footer/style";
 @import "../components/site-header/main-navigation/style";
 @import "../components/site-header/site-description/style";

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

@@ -1850 +1850 @@
 
 .plugin-card {
+  background-color: #f9f9f9;
   margin-bottom: 4%;
+  padding: 8px 8px 0 8px;
+  vertical-align: top;
 }
 
@@ -1895 +1898 @@
 .plugin-card .entry-excerpt p {
   margin: 0 0 8px;
+}
+
+.plugin-card hr {
+  background-color: #fff;
+  margin: auto;
+}
+
+.plugin-card footer span {
+  font-size: 11.704px;
+  font-size: 0.73152rem;
+  width: 48%;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.plugin-card footer span i {
+  display: inline-block;
+  font-size: 16px;
+  font-size: 1rem;
+  margin-left: 6.4px;
+  margin-left: 0.4rem;
+}
+
+.plugin-card footer .dashicons {
+  margin: 0 2px -16px;
+  margin: 0 2px -1rem;
+  color: #bbb;
+  width: auto;
+  height: auto;
+  display: none;
+}
+
+@media (min-width: 414px) {
+  .plugin-card footer .dashicons {
+    display: inline-block;
+  }
 }
 
@@ -2824 +2864 @@
 }
 
+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;

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

@@ -1850 +1850 @@
 
 .plugin-card {
+  background-color: #f9f9f9;
   margin-bottom: 4%;
+  padding: 8px 8px 0 8px;
+  vertical-align: top;
 }
 
@@ -1895 +1898 @@
 .plugin-card .entry-excerpt p {
   margin: 0 0 8px;
+}
+
+.plugin-card hr {
+  background-color: #fff;
+  margin: auto;
+}
+
+.plugin-card footer span {
+  font-size: 11.704px;
+  font-size: 0.73152rem;
+  width: 48%;
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.plugin-card footer span i {
+  display: inline-block;
+  font-size: 16px;
+  font-size: 1rem;
+  margin-right: 6.4px;
+  margin-right: 0.4rem;
+}
+
+.plugin-card footer .dashicons {
+  margin: 0 2px -16px;
+  margin: 0 2px -1rem;
+  color: #bbb;
+  width: auto;
+  height: auto;
+  display: none;
+}
+
+@media (min-width: 414px) {
+  .plugin-card footer .dashicons {
+    display: inline-block;
+  }
 }
 
@@ -2824 +2864 @@
 }
 
+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;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin.php

@@ -1 +1 @@
 <?php
 /**
- * Template part for displaying posts.
+ * Template part for displaying plugins.
  *
  * @link https://codex.wordpress.org/Template_Hierarchy
@@ -28 +28 @@
         </div><!-- .entry-excerpt -->
     </div>
+    <hr>
+    <footer>
+        <span class="plugin-author">
+            <i class="dashicons dashicons-admin-users"></i> <?php echo esc_html( get_post_meta( get_the_ID(), 'header_author', true ) ); ?>
+        </span>
+        <span class="active-installs">
+            <i class="dashicons dashicons-chart-area"></i> <?php printf( __( '%s Active Installs', 'wporg-plugins' ), Template::active_installs(false) ); ?>
+        </span>
+        <span class="tested-with">
+            <?php if ( $tested_up_to = (string) get_post_meta( $post->ID, 'tested', true ) ) { ?>
+                <i class="dashicons dashicons-wordpress-alt"></i> <?php printf( __( 'Tested with %s', 'wporg-plugins' ), $tested_up_to ); ?></span>
+            <?php } ?>
+        </span>
+        <span class="last-updated">
+            <i class="dashicons dashicons-calendar"></i> <?php
+                /* Translators: Plugin modified time. */
+                printf( __( 'Updated %s ago', 'wporg-plugins' ), human_time_diff( get_post_modified_time() ) ); ?>
+        </span>
+        </span>
+    </footer>
 </article><!-- #post-## -->