Merge pull request #142 from yochannah/mobile-fixes-for-navbar

Mobile fixes for navbar
intermine · Jul 19, 2017 · 9ec2c0b · 9ec2c0b
2 parents e7b0384 + ce68050
commit 9ec2c0b
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 20 deletions.
diff --git a/less/components/navbar.less b/less/components/navbar.less
@@ -2,16 +2,24 @@
 
 .navbar,
 .navbar.navbar-default {
-  li{flex-grow:1;justify-content:center; text-align:center;}
+    li {
+        flex-grow: 1;
+        justify-content: center;
+        text-align: center;
+    }
     background-color: @navbar-color;
     margin-bottom: 0;
     border-width: 0;
     border-radius: 0;
 
-    .container-fluid, .navbar-header {
+    .container-fluid,
+    .navbar-header {
         margin-left: 0;
-      }
-      .navbar-header {margin-right:0}
+    }
+
+    .navbar-header {
+        margin-right: 0;
+    }
 
     .logo.icon {
         vertical-align: middle;
@@ -68,7 +76,7 @@
         &.mine-settings {
             .dropdown-menu {
                 padding: 0;
-                  text-align:left;
+                text-align: left;
             }
 
             li a {
@@ -84,20 +92,22 @@
             li a {
                 .transitions;
                 background: @body-background-color;
-                text-align:left;
+                text-align: left;
+
                 .icon {
                     fill: rgba(0,0,0,0.2);
                     margin-right: @spacer;
                 }
 
                 &:hover {
                     background: darken(@body-background-color, 3%);
-                    color:@highlight-color;
+                    color: @highlight-color;
                     .transitions;
                 }
 
-                &.active, &.active > a {
-                  background-color:@highlight-color;
+                &.active,
+                &.active > a {
+                    background-color: @highlight-color;
 
                     .icon {
                         fill: @body-background-color;
@@ -142,7 +152,10 @@
     .navbar-header {
         align-self: flex-start;
     }
-    .navbar-brand {margin-left:0}
+
+    .navbar-brand {
+        margin-left: 0;
+    }
 
     .navbar {
         .long-name {
@@ -233,3 +246,18 @@
         }
     }
 }
+@media (max-width:@even-tinier-screen) {
+    .navbar.navbar-default {
+        li {
+          // a desperate attempt to make the search bar a bit narrower
+            font-family: "Roboto condensed","Helvetica Neue Condensed","PT Sans Narrow", "Open Sans Condensed", "Liberation Sans Narrow","Arial Narrow", "sans serif", sans-serif;
+        }
+
+        li a {
+            padding-left: 4px;
+            padding-right: 4px;
+            font-size:0.9em;
+        }
+    }
+    .navbar-right {margin-left:0.3em}
+}
diff --git a/less/site.less b/less/site.less
@@ -63,6 +63,10 @@ html {
 
 html {
     margin-top: -@annoyingscrollbars;
+    @media (max-width:@even-tinier-screen) {
+      //fix for the html body randomly not choosing to fill the screen on small phone browsers.
+      position:absolute;
+    }
 }
 //this margin directly offsets the annoying scrollbars
 
@@ -392,3 +396,15 @@ label {
     padding: 10px;
     ul { display:inline}
 }
+
+.extra-tiny-screen {
+  display:none;
+  @media (max-width:@even-tinier-screen) {
+    display:inline-block;
+  }
+}
+.larger-screen-only, .navbar.navbar-default li.larger-screen-only {
+  @media (max-width:@even-tinier-screen) {
+   display: none;
+ }
+}
diff --git a/less/variables.less b/less/variables.less
@@ -14,6 +14,7 @@
 @spacer: 1em;
 //useful breakpoint:
 @tiny-screen: 767px;
+@even-tinier-screen:480px;
 
 @navbar-color: #505050;
 

diff --git a/src/cljs/bluegenes/components/icons.cljs b/src/cljs/bluegenes/components/icons.cljs
@@ -75,7 +75,7 @@
       "M9 11.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z"}]]
    [:symbol#icon-cog
     {:viewBox "0 0 16 16"}
-    [:title "cog"]
+    [:title "Settings"]
     [:path.path1
      {:d
       "M14.59 9.535c-0.839-1.454-0.335-3.317 1.127-4.164l-1.572-2.723c-0.449 0.263-0.972 0.414-1.529 0.414-1.68 0-3.042-1.371-3.042-3.062h-3.145c0.004 0.522-0.126 1.051-0.406 1.535-0.839 1.454-2.706 1.948-4.17 1.106l-1.572 2.723c0.453 0.257 0.845 0.634 1.123 1.117 0.838 1.452 0.336 3.311-1.12 4.16l1.572 2.723c0.448-0.261 0.967-0.41 1.522-0.41 1.675 0 3.033 1.362 3.042 3.046h3.145c-0.001-0.517 0.129-1.040 0.406-1.519 0.838-1.452 2.7-1.947 4.163-1.11l1.572-2.723c-0.45-0.257-0.839-0.633-1.116-1.113zM8 11.24c-1.789 0-3.24-1.45-3.24-3.24s1.45-3.24 3.24-3.24c1.789 0 3.24 1.45 3.24 3.24s-1.45 3.24-3.24 3.24z"}]]
@@ -91,6 +91,15 @@
     [:path.path1
      {:d
       "M11.5 7l-4 4-4-4h2.5v-6h3v6zM7.5 11h-7.5v4h15v-4h-7.5zM14 13h-2v-1h2v1z"}]]
+
+  [:symbol#icon-upload
+   {:viewBox "0 0 16 16"}
+   [:title "upload"]
+   [:path
+    {:d
+     "M7.5 11h-7.5v4h15v-4h-7.5zM14 13h-2v-1h2v1zM3.5 5l4-4 4 4h-2.5v5h-3v-5z"}]]
+
+
    [:symbol#icon-star-empty
     {:viewBox "0 0 16 16"}
     [:title "star-empty"]

diff --git a/src/cljs/bluegenes/components/navbar/nav.cljs b/src/cljs/bluegenes/components/navbar/nav.cljs
@@ -18,7 +18,7 @@
   (let [current-mine (subscribe [:current-mine])]
   (fn []
     [:li.dropdown.mine-settings
-     [:a.dropdown-toggle {:data-toggle "dropdown" :role "button"} [:i.fa.fa-cog]]
+     [:a.dropdown-toggle {:data-toggle "dropdown" :role "button"} [:svg.icon.icon-cog [:use {:xlinkHref "#icon-cog"}]]]
       (conj (into [:ul.dropdown-menu]
         (map (fn [[id details]]
           [:li {:on-click (fn [e] (dispatch [:set-active-mine (keyword id)]))
@@ -82,27 +82,28 @@
     (fn []
       [:nav.navbar.navbar-default.navbar-fixed-top
        [:div.container-fluid
-       [:div.navbar-header
-         [:span.navbar-brand {:on-click #(navigate! "/")}
+        [:ul.nav.navbar-nav.navbar-collapse.navigation
+         [:li [:span.navbar-brand {:on-click #(navigate! "/")}
            [active-mine-logo]
            [:span.long-name (:name @current-mine)]]]
-        [:ul.nav.navbar-nav.navbar-collapse.navigation
-         [:li.homelink {:class (if (panel-is :home-panel) "active")} [:a {:on-click #(navigate! "/")} "Home"]]
-         [:li {:class (if (panel-is :upload-panel) "active")} [:a {:on-click #(navigate! "/upload")} "Upload"]]
+         [:li.homelink.larger-screen-only {:class (if (panel-is :home-panel) "active")} [:a {:on-click #(navigate! "/")} "Home"]]
+         [:li {:class (if (panel-is :upload-panel) "active")} [:a {:on-click #(navigate! "/upload")}
+          [:svg.icon.icon-upload.extra-tiny-screen [:use {:xlinkHref "#icon-upload"}]]
+          [:span.larger-screen-only "Upload"]]]
          [:li {:class (if (panel-is :templates-panel) "active")} [:a {:on-click #(navigate! "/templates")} "Templates"]]
 
          ;;don't show region search for mines that have no example configured
          (cond (:regionsearch-example @current-mine)
            [:li {:class (if (panel-is :regions-panel) "active")} [:a {:on-click #(navigate! "/regions")} "Regions"]]
          )
          [:li {:class (if (panel-is :querybuilder-panel) "active")} [:a {:on-click #(navigate! "/querybuilder")} "Query\u00A0Builder"]]
-         [:li {:class (if (panel-is :saved-data-panel) "active")} [:a {:on-click #(navigate! "/saved-data")} (str "Lists\u00A0(" (apply + (map count (vals @lists))) ")")]
+         [:li {:class (if (panel-is :saved-data-panel) "active")} [:a {:on-click #(navigate! "/saved-data")} "Lists"[:span.larger-screen-only "\u00A0(" (apply + (map count (vals @lists))) ")"]]
           ;;example tooltip. Include as last child, probably with some conditional to display and an event handler for saving the name
           (if @ttip [save-data-tooltip @ttip])]]
         [:ul.nav.navbar-nav.navbar-right.buttons
          [:li.search [search/main]]
          (cond (not (panel-is :search-panel)) [:li.search-mini [:a {:on-click #(navigate! "/search")} [:svg.icon.icon-search [:use {:xlinkHref "#icon-search"}]]]])
-         [:li [:a {:on-click #(navigate! "/help")} [:i.fa.fa-question]]]
+         [:li.larger-screen-only [:a {:on-click #(navigate! "/help")} [:svg.icon.icon-question [:use {:xlinkHref "#icon-question"}]]]]
          ;;This may have worked at some point in the past. We need to res it.
         ; [user]
          [settings]]]

diff --git a/src/cljs/bluegenes/views.cljs b/src/cljs/bluegenes/views.cljs
@@ -41,7 +41,8 @@
         [:img {:width "120px" :src "https://cdn.rawgit.com/intermine/design-materials/master/logos/intermine/intermine.png"}]]]
       [:a {:href "https://intermineorg.wordpress.com/cite/"} "Cite"]
       [:a {:href "http://intermine.readthedocs.io/en/latest/about/contact-us/"} "Contact"]
-      [:a {:href "https://intermineorg.wordpress.com/"} "Blog"]]
+      [:a {:href "https://intermineorg.wordpress.com/"} "Blog"]
+       [:a {:on-click #(navigate! "/help")} [:svg.icon.icon-question [:use {:xlinkHref "#icon-question"}]] " Help"]]
      [:div [:p "Funded by:"]
       [:a {:href "http://www.wellcome.ac.uk/" :target "_blank"} "Wellcome Trust"]
       [:a {:href "https://www.nih.gov/" :target "_blank"} "NIH"]