From 29a21e8c94d80488967a11e3fbfd742a8ec044a6 Mon Sep 17 00:00:00 2001
From: Yo Yehudi <yochannah@gmail.com>
Date: Tue, 18 Jul 2017 15:24:35 +0100
Subject: [PATCH 1/7] add some extra tiny screen styling for the navbar, and
beautify
---
less/components/navbar.less | 45 ++++++++++++++++++++++++++++---------
less/variables.less | 1 +
2 files changed, 36 insertions(+), 10 deletions(-)
diff --git a/less/components/navbar.less b/less/components/navbar.less
index d10853ede..ce3671285 100644
--- 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,7 +92,8 @@
li a {
.transitions;
background: @body-background-color;
- text-align:left;
+ text-align: left;
+
.icon {
fill: rgba(0,0,0,0.2);
margin-right: @spacer;
@@ -92,12 +101,13 @@
&: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,15 @@
}
}
}
+@media (max-width:@even-tinier-screen) {
+ .navbar.navbar-default {
+ li {
+ font-family: "Roboto condensed","Helvetica Neue Condensed","PT Sans Narrow", "Open Sans Condensed", "Liberation Sans Narrow","Arial Narrow", "sans serif";
+ }
+
+ li a {
+ padding-left: 2px;
+ padding-right: 4px;
+ }
+ }
+}
diff --git a/less/variables.less b/less/variables.less
index 145c05042..9f73056a9 100644
--- 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;
From 51fb8b70f6062727b5a90445d853e53d852daa22 Mon Sep 17 00:00:00 2001
From: Yo Yehudi <yochannah@gmail.com>
Date: Tue, 18 Jul 2017 16:14:49 +0100
Subject: [PATCH 2/7] stop the logo being on its own bar
---
src/cljs/bluegenes/components/navbar/nav.cljs | 5 ++---
1 file changed, 2 insertions(+), 3 deletions(-)
diff --git a/src/cljs/bluegenes/components/navbar/nav.cljs b/src/cljs/bluegenes/components/navbar/nav.cljs
index fedb25487..220502d21 100644
--- a/src/cljs/bluegenes/components/navbar/nav.cljs
+++ b/src/cljs/bluegenes/components/navbar/nav.cljs
@@ -82,11 +82,10 @@
(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 {:class (if (panel-is :templates-panel) "active")} [:a {:on-click #(navigate! "/templates")} "Templates"]]
From 8c9ab47d3053875551dfdd229d28471c78f0280a Mon Sep 17 00:00:00 2001
From: Yo Yehudi <yochannah@gmail.com>
Date: Tue, 18 Jul 2017 17:02:21 +0100
Subject: [PATCH 3/7] svg icons only, help goes to footer on tiny screens
---
less/components/navbar.less | 3 ++-
less/site.less | 12 ++++++++++++
src/cljs/bluegenes/components/icons.cljs | 11 ++++++++++-
src/cljs/bluegenes/components/navbar/nav.cljs | 10 ++++++----
src/cljs/bluegenes/views.cljs | 3 ++-
5 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/less/components/navbar.less b/less/components/navbar.less
index ce3671285..07260831f 100644
--- a/less/components/navbar.less
+++ b/less/components/navbar.less
@@ -249,7 +249,8 @@
@media (max-width:@even-tinier-screen) {
.navbar.navbar-default {
li {
- font-family: "Roboto condensed","Helvetica Neue Condensed","PT Sans Narrow", "Open Sans Condensed", "Liberation Sans Narrow","Arial Narrow", "sans serif";
+ // 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 {
diff --git a/less/site.less b/less/site.less
index f1be311ad..7df5e154e 100644
--- a/less/site.less
+++ b/less/site.less
@@ -392,3 +392,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/src/cljs/bluegenes/components/icons.cljs b/src/cljs/bluegenes/components/icons.cljs
index 53afb5dfb..a088250a4 100644
--- 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
index 220502d21..a87708527 100644
--- 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)]))
@@ -86,8 +86,10 @@
[:li [:span.navbar-brand {:on-click #(navigate! "/")}
[active-mine-logo]
[:span.long-name (:name @current-mine)]]]
- [: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
@@ -101,7 +103,7 @@
[: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
index 524033da9..c49669034 100644
--- 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"]
+ [:li [:a {:on-click #(navigate! "/help")} [:i.fa.fa-question]]]]
[:div [:p "Funded by:"]
[:a {:href "http://www.wellcome.ac.uk/" :target "_blank"} "Wellcome Trust"]
[:a {:href "https://www.nih.gov/" :target "_blank"} "NIH"]
From 787b5b6c858f3bb2aa3d9518cdc860aab61a98fa Mon Sep 17 00:00:00 2001
From: Yo Yehudi <yochannah@gmail.com>
Date: Tue, 18 Jul 2017 17:04:10 +0100
Subject: [PATCH 4/7] same help icon in footer as header please
---
src/cljs/bluegenes/views.cljs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/cljs/bluegenes/views.cljs b/src/cljs/bluegenes/views.cljs
index c49669034..b86a6fc01 100644
--- a/src/cljs/bluegenes/views.cljs
+++ b/src/cljs/bluegenes/views.cljs
@@ -42,7 +42,7 @@
[: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"]
- [:li [:a {:on-click #(navigate! "/help")} [:i.fa.fa-question]]]]
+ [: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"]
From b59e21806714a768ed6d1975908c9cc526c667df Mon Sep 17 00:00:00 2001
From: Yo Yehudi <yochannah@gmail.com>
Date: Tue, 18 Jul 2017 17:08:03 +0100
Subject: [PATCH 5/7] add better padding for navbar-right
---
less/components/navbar.less | 1 +
1 file changed, 1 insertion(+)
diff --git a/less/components/navbar.less b/less/components/navbar.less
index 07260831f..56db503d9 100644
--- a/less/components/navbar.less
+++ b/less/components/navbar.less
@@ -258,4 +258,5 @@
padding-right: 4px;
}
}
+ .navbar-right {margin-left:0.3em}
}
From dcc301b6db9c6b2185187e4f2822dcd52376ec80 Mon Sep 17 00:00:00 2001
From: Yo Yehudi <yochannah@gmail.com>
Date: Wed, 19 Jul 2017 11:18:37 +0100
Subject: [PATCH 6/7] remove number of lists from navbar in tiny screens and
shrink font size slightly.
---
less/components/navbar.less | 5 +++--
src/cljs/bluegenes/components/navbar/nav.cljs | 2 +-
2 files changed, 4 insertions(+), 3 deletions(-)
diff --git a/less/components/navbar.less b/less/components/navbar.less
index 56db503d9..5461d01e8 100644
--- a/less/components/navbar.less
+++ b/less/components/navbar.less
@@ -254,8 +254,9 @@
}
li a {
- padding-left: 2px;
- padding-right: 4px;
+ padding-left: 6px;
+ padding-right: 6px;
+ font-size:1em;
}
}
.navbar-right {margin-left:0.3em}
diff --git a/src/cljs/bluegenes/components/navbar/nav.cljs b/src/cljs/bluegenes/components/navbar/nav.cljs
index a87708527..d0b621d98 100644
--- a/src/cljs/bluegenes/components/navbar/nav.cljs
+++ b/src/cljs/bluegenes/components/navbar/nav.cljs
@@ -97,7 +97,7 @@
[: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
From ce68050ebdad7cd0d48aa899292f0467380ff90a Mon Sep 17 00:00:00 2001
From: Yo Yehudi <yochannah@gmail.com>
Date: Wed, 19 Jul 2017 11:43:35 +0100
Subject: [PATCH 7/7] more navbar tweaking for small screens, and an html body
size fix for small screens.
---
less/components/navbar.less | 6 +++---
less/site.less | 4 ++++
2 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/less/components/navbar.less b/less/components/navbar.less
index 5461d01e8..58a71bcbb 100644
--- a/less/components/navbar.less
+++ b/less/components/navbar.less
@@ -254,9 +254,9 @@
}
li a {
- padding-left: 6px;
- padding-right: 6px;
- font-size:1em;
+ 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
index 7df5e154e..b1f93f2f9 100644
--- 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