Merge pull request #1467 from wchristian/top_menu_icons

add icons to the top menu to increase discoverability
metacpan · Mar 11, 2015 · d8f274b · d8f274b
2 parents a7fe9ab + 1efd7b0
commit d8f274b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/root/static/icons/metacpan-icon.png b/root/static/icons/metacpan-icon.png
diff --git a/root/static/less/nav.less b/root/static/less/nav.less
@@ -43,6 +43,7 @@
         > li > a {
             text-shadow: none;
             padding: 5px 10px 5px;
+            white-space: nowrap;
             &:hover {
                 border-top: 2px solid lighten(@linkColor, 20%);
                 position: relative;

diff --git a/root/wrapper.html b/root/wrapper.html
@@ -1,30 +1,36 @@
 <%- menu = [{
     title = "Home",
-    path = ["/", "/search"]
+    path = ["/", "/search"],
+    image = "/static/icons/metacpan-icon.png",
     },
     {
     title = "Recent",
-    path = ["/recent"]
+    path = ["/recent"],
+    icon = "history",
     },
     {
     title = "FAQ",
     path = ["/about/faq"],
     class = 'hidden-xs',
+    icon = "question",
     },
     {
     title = "Github Issues",
     path = ["https://github.com/CPAN-API/metacpan-web/issues"],
     class = 'hidden-xs',
+    icon = "github-alt",
     },
     {
     title = "News",
     path = ["/news"],
     class = 'hidden-xs',
+    icon = "rss",
     },
     {
     title = "Lab",
     path = ["/lab"],
     class = 'hidden-xs',
+    icon = "rocket",
     },
     ] %>
 <!DOCTYPE HTML>
@@ -99,7 +105,11 @@
                         <%- ELSE %>
                     <li class="<% item.class %>">
                         <%- END %>
-                        <a href="<% item.path.0 %>"><% item.title %></a>
+                        <a href="<% item.path.0 %>">
+                            <%- IF item.icon %><i class="fa fa-<% item.icon %>"></i><% END -%>
+                            <%- IF item.image %><img src="<% item.image %>" /><% END -%>
+                            <%- item.title -%>
+                        </a>
                     </li>
                     <%- END %>
                 </ul>