discovery page updates

Merge the author, website, name and description fields to display more description info. Also sorting on description was weird. Sorting by author wasn't super helpful either. People can search if they want a specific author. Added download counts to display. Needs the generator list to be updated to provide the data though. Fixes #98
yeoman · Aug 4, 2015 · d2bf360 · d2bf360
1 parent bafd182
commit d2bf360
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 47 deletions.
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
@@ -683,6 +683,9 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { }
   text-align: center;
 }
 
+
+/* Discovery Page */
+
 #plugins-all > table {
   width: 100%;
 }
@@ -691,26 +694,41 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { }
   cursor: pointer;
 }
 
-.discovery-page td {
-  padding: 10px 5px;
-  border-top: 1px solid #ddd;
-  position: relative;
+.discovery-page th.sort {
+  text-align: left;
+}
+
+.discovery-page th.sort:before {
+  content: '\21C5';
+  display: inline-block;
+  opacity: .4;
+  font-size: 0.8em;
+  margin-right: 3px;
 }
 
-.discovery-page .name {
-  min-width: 200px;
+.discovery-page th.sort.asc:before,
+.discovery-page th.sort.desc:before {
+  opacity: 1;
+  margin-right: 7px;
 }
 
-.discovery-page .desc {
-  word-break: break-all;
-  hyphens: auto;
+.discovery-page th.sort.asc:before {
+  content: '\2193';
+  text-align: left;
 }
 
-.discovery-page .author {
-  min-width: 150px;
+.discovery-page th.sort.desc:before {
+  content: '\2191';
+  text-align: right;
 }
 
-.discovery-page .official .name::before {
+.discovery-page td {
+  padding: 10px 5px;
+  border-top: 1px solid #ddd;
+  position: relative;
+}
+
+.discovery-page tr.official td.name::before {
   content: '';
   position: absolute;
   top: 50%;
@@ -722,31 +740,28 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { }
   opacity: 0.5;
 }
 
-.sort {
-  text-align: left;
-  min-width: 80px;
+.discovery-page td.name a {
+  text-decoration: none;
 }
-
-th.sort:before {
-  content: '\21C5';
-  display: inline-block;
-  opacity: .4;
-  font-size: 0.8em;
+.discovery-page td.name a:hover {
+  text-decoration: underline;
+}
+.discovery-page .name-author a {
+  font-size: small;
+  margin-left: 20px;
 }
 
-th.sort.asc:before{
-  content: '\2193';
-  opacity: 1;
-  text-align: left;
+.discovery-page td.stars,
+.discovery-page td.downloads {
+  width: 70px;
+  text-align: center;
 }
 
-th.sort.desc:before{
-  content: '\2191';
-  opacity: 1;
-  text-align: right;
+.discovery-page td.downloads {
+  width: 120px;
 }
 
-input.search {
+.discovery-page input.search {
   width: 100%;
   line-height: 1.5em;
   margin: 20px 0;

diff --git a/app/assets/js/generator.js b/app/assets/js/generator.js
@@ -1,8 +1,6 @@
 /*global jQuery, _, List, GETSTATICURL */
 (function (win, $) {
   'use strict';
-  var $win = $(window);
-  var $doc = $(document);
 
   function cleanupDescription(str) {
     str = str.trim()
@@ -37,7 +35,7 @@
           el.description = cleanupDescription(el.description);
           el.stars = el.stars || el.watchers || 0;
           el.website = el.website || el.html_url;
-          el.created = el.created || el.created_at;
+          el.downloads = typeof el.downloads === 'undefined' ? '?' : el.downloads;
           return el;
         }).sort(function (a, b) {
           return a.stars === b.stars ? 0 : a.stars < b.stars ? 1 : -1;
@@ -52,9 +50,8 @@
         var list = new List('plugins-all', {
           valueNames: [
             'name',
-            'desc',
-            'author',
-            'stars'
+            'stars',
+            'downloads'
           ]
         });
 

diff --git a/app/generators/index.html b/app/generators/index.html
@@ -19,25 +19,32 @@
       </caption>
       <thead>
         <tr>
-          <th class="sort" data-sort="name">Name</th>
-          <th class="sort" data-sort="desc">Description</th>
-          <th class="sort" data-sort="author">Author</th>
+          <th class="sort" data-sort="name">Generator</th>
           <th class="sort" data-sort="stars">Stars</th>
+          <th class="sort" data-sort="downloads">Downloads</th>
         </tr>
       </thead>
       <tbody class="list">
         <% _.each(modules, function (el) { %>
           <tr class="<%= el.official %>">
-            <td class="name"><a href="<%- el.website %>"><%- el.name %></a></td>
-            <td class="desc"><%- el.description %></td>
-            <td class="author">
-              <% if (el.ownerWebsite) { %>
-                <a href="<%- el.ownerWebsite %>"><%- el.owner %></a>
-              <% } else { %>
-                <%- el.owner %>
-              <% } %>
+            <td class="name">
+              <span class="name-info">
+                <span class="name-website">
+                  <a href="<%- el.website %>"><%- el.name %></a>
+                </span>
+                <span class="name-author">
+                  <% if (el.ownerWebsite) { %>
+                    <a href="<%- el.ownerWebsite %>"><%- el.owner %></a>
+                  <% } else { %>
+                    <%- el.owner %>
+                  <% } %>
+                </span>
+              </span>
+              <br>
+              <span class="desc"><%- el.description %></span>
             </td>
             <td class="stars"><%- el.stars %></td>
+            <td class="downloads"><%- el.downloads %></td>
           </tr>
         <% }); %>
       </tbody>