From 5f609f2683615f6826a57472a87447fbf138e36b Mon Sep 17 00:00:00 2001
From: Victoria Wang <violasong@gmail.com>
Date: Fri, 13 Mar 2015 17:13:44 -0500
Subject: [PATCH] More fixes to browse page on mobile

---
 sass/_project-sass/_project-Main.scss | 11 +++++++++++
 views/browse.erb                      | 12 ++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index 15c185d4..9d012717 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -1785,4 +1785,15 @@ a.tag:hover {
   blockquote:before, blockquote:after {
     content: none;
   }
+}
+.hide-on-mobile {
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    display: none;
+  }
+}
+.show-on-mobile {
+  display: none;
+  @media (max-device-width:480px), screen and (max-width:800px) {
+    display: inline;
+  }
 }
\ No newline at end of file
diff --git a/views/browse.erb b/views/browse.erb
index 940afbab..564bb381 100644
--- a/views/browse.erb
+++ b/views/browse.erb
@@ -21,7 +21,7 @@
     <form id="search_criteria" action="/browse" method="GET">
       <div class="col col-50 filter">
         <fieldset class="grouping">
-          <label class="text-Label" for="sort_by">Sort By:</label>
+          <label class="text-Label" for="sort_by">Sort by:</label>
           <div class="select-Container">
             <select name="sort_by" id="sort_by" class="input-Select">
               <option value="last_updated" <%= params[:sort_by] == 'last_updated' ? 'selected' : '' %>>Last Updated</option>
@@ -43,7 +43,7 @@
       <div class="col col-50 filter">
         <form method="GET" action="browse">
         <fieldset class="grouping">
-        <label class="text-Label" for="tag">Search by tag:</label>
+        <label class="text-Label" for="tag"><span class="hide-on-mobile">Search by </span>Tag:</label>
         <input class="input-Area typeahead" id="tag" name="tag" type="text" placeholder="pokemon" value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto">
         <input style="vertical-align: -4px;margin-left: 4px;" type="submit" class="btn-Action" value="Search">
         </fieldset>
@@ -79,11 +79,15 @@
           </div>
           <div class="site-stats">
             <a href="/site/<%= site.username %>">
+              <span class="show-on-mobile">
+                <i class="fa fa-eye"></i>
+              </span>
               <% if params[:sort_by] == 'hits' %>
-                <%= site.hits.format_large_number %>&nbsp;hit<%= site.hits == 1 ? '' : 's' %>
+                <%= site.hits.format_large_number %><span class="hide-on-mobile">&nbsp;hit<%= site.hits == 1 ? '' : 's' %></span>
               <% else %>
-                <%= site.views.format_large_number %>&nbsp;view<%= site.views == 1 ? '' : 's' %>
+                <%= site.views.format_large_number %><span class="hide-on-mobile">&nbsp;view<%= site.views == 1 ? '' : 's' %></span>
               <% end %>
+
             </a>
           </div>
           <div class="site-tags">