support responsiveness >768px, add note #180, #166

niwa · May 6, 2017 · bc7e614 · bc7e614
1 parent f54cfae
commit bc7e614
Show file tree

Hide file tree

Showing 18 changed files with 204 additions and 202 deletions.
diff --git a/app/components/app/app.css b/app/components/app/app.css
@@ -101,81 +101,11 @@ a:hover {
   width: 100%;
   background-color: #F2F3F4;
 }
-.content-bottom,
-.content-full,
-.content-scroll{
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-}
-.content-scroll {
-  overflow-y: auto;
-  overflow-x: hidden;
-  /*z-index: 3500;*/
-}
-@media(max-width:768px){
-.content-scroll-xs{
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;  
-  overflow-y: auto;
-  overflow-x: hidden;
-  /*z-index: 3500;*/
-}
-}
-
-.content-container{
-  margin-right: auto;
-  margin-left: auto;
-  padding: 10px 20px;
-  clear: both;
-}
-
-.content-bottom {
-  top:auto
-}
-
-@media(min-width: 769px) {
-
-  .content-bottom {
-    bottom:20px;
-    left:200px
-  }
-}
-
-
-
-@media(min-width: 769px) {
-
-
-  .content-full {
-    position: absolute;
-    top: 0;
-    right:0;
-    left: auto;
-  }
-  .content-full {
-    left:0;
-  }
-  .content-scroll {
-    /*z-index: 150;*/
-  }
-
-}
-
 
 .strong {
     font-weight: bold;
 }
 
-
-
 .component-left {
   position: absolute;
   top: 60px;
@@ -189,19 +119,24 @@ a:hover {
   box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);    
   z-index: 1020;
 }
-@media (min-width: 769px) {
+/*@media (min-width: 768px) {*/
   .component-left {    
-    width: 50%;
+    width: 330px;
     right:auto
   }
+/*}*/
+@media (min-width: 992px) {
+  .component-left {    
+    width: 400px;
+  }
 }
-@media (min-width: 1068px) {
+
+@media (min-width: 1200px) {
   .component-left {    
     width: 500px;
   }
 }
 
-
 .panel-dark {
     background-color: #19313f;
     color: #fff;    
@@ -437,4 +372,9 @@ hr {
     margin-bottom: 40px;
     border: 0;
     border-top: 1px solid #E5E7E9;
+}
+
+#xs-fallback {
+    position: absolute;
+    top: 60px;
 }
diff --git a/app/components/app/app.html b/app/components/app/app.html
@@ -1,6 +1,11 @@
 <div id="nav"></div>
-<div id="filters" class="component-left"></div>
-<div id="record" class="component-left"></div>
-<div id="out"></div>
-<div id="page"></div>
-<div id="share"></div>
+<div id="filters" class="component-left hidden-xs"></div>
+<div id="record" class="component-left hidden-xs"></div>
+<div id="out" class="hidden-xs"></div>
+<div id="page" class="hidden-xs"></div>
+<div id="share" class="hidden-xs"></div>
+<div id="xs-fallback" class="visible-xs container-fluid">
+  <h1>We are sorry!</h1>
+  <p>The New Zealand Palaeotsunami Database requires a minimum screen width of 768px.</p>
+  <p>If you're visiting this website from a mobile device please revisit again from a tablet, laptop or desktop computer.</p>
+</div>
diff --git a/app/components/app/filters/filterButtons.html b/app/components/app/filters/filterButtons.html
@@ -11,7 +11,7 @@
        style="width:<%= 100/options.length %>%">
       <div class="button-label"><%= option.label %></div>
       <% if (option.hint !== "") { %>
-      <div class="button-hint small"><%= option.hint %></div>
+      <div class="button-hint small hidden-xs hidden-sm"><%= option.hint %></div>
       <% } %>
     </a>
     <% }) %>  

diff --git a/app/components/app/filters/filterMinMax.html b/app/components/app/filters/filterMinMax.html
@@ -1,7 +1,7 @@
 <div class="column-filter-wrap filter-type-min-max">
   <%= label %>
   <div class="row column-filter-min-max">
-    <div class="col-sm-4">
+    <div class="col-sm-6 col-md-5 col-lg-4">
       <input type="text"
         class="form-control column-filter-text" 
         data-column="<%= column_min %>"      
@@ -10,7 +10,7 @@
         placeholder="<%= title_min %>" 
         value="<%= value_min %>">   
     </div>
-    <div class="col-sm-4">    
+    <div class="col-sm-6 col-md-5 col-lg-4">    
       <input type="text"
         class="form-control column-filter-text" 
         data-column="<%= column_max %>"    

diff --git a/app/components/app/filters/filterMinMaxAddon.html b/app/components/app/filters/filterMinMaxAddon.html
@@ -1,7 +1,7 @@
 <div class="column-filter-wrap filter-type-min-max-addon">
   <%= label %>
   <div class="row column-filter-min-max-addon">
-    <div class="col-sm-4">
+    <div class="col-sm-6 col-md-5 col-lg-44">
       <div class="input-group">
         <div class="input-group-addon"><%= addon_min %></div>    
         <input type="text"
@@ -18,7 +18,7 @@
         >   
       </div>
     </div>
-    <div class="col-sm-4">    
+    <div class="col-sm-6 col-md-5 col-lg-4">    
       <div class="input-group">
         <div class="input-group-addon"><%= addon_max %></div>    
         <input type="text"

diff --git a/app/components/app/filters/filters.css b/app/components/app/filters/filters.css
@@ -16,7 +16,11 @@
   background-color: #f5f6f6;
   height:125px;  
 }
-
+@media (min-width: 992px) {
+  .filter-top {
+    padding:10px 30px 20px;
+  }
+}
 .filter-top h1{
   margin-top: 2px;
 }
@@ -27,19 +31,23 @@
 .filter-top-buttons{
   position: absolute;
   right: 15px;
-  bottom: -32px;
+  bottom: -11px;
 }
 
 .filter-main {
-  padding-top:15px;
+  padding:15px 5px 0;
   position: absolute;
   top: 125px;
   bottom: 0;
   left: 0;
   right: 0;
   overflow: auto;  
 }
-
+@media (min-width: 992px) {
+  .filter-main {
+    padding:15px 15px 0;
+  }
+}
 .column-hint {
   margin-bottom: 10px;
   margin-top: -5px;
@@ -92,8 +100,15 @@
   margin-bottom:30px
 }
 .filter-button {
-  white-space: normal;
-  font-size: 13px;
+    white-space: normal;
+    font-size: 12px;
+    padding: 3px 5px;
+}
+@media (min-width: 992px) {
+  .filter-button {
+    font-size: 13px;
+    padding: 6px 12px;
+  }
 }
 .form-group.well {
   margin-bottom: 40px;
@@ -184,7 +199,14 @@ input[type="checkbox"] {
 }
 
 .noUi-pips {
-    color: #99a1a7;
+  color: #99a1a7;
+  font-size: 12px;
+}
+
+@media (min-width: 992px) {
+  .noUi-pips {    
+    font-size: 14px;
+  }
 }
 .noUi-marker-large {
     background: #b2b8bd;

diff --git a/app/components/app/filters/filters.html b/app/components/app/filters/filters.html
@@ -1,37 +1,25 @@
 <div class="filter-top">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-sm-12">      
-        <div class="filter-top-icon">
-          <span class="icon-icon_filter"></span>
-        </div>
-        <h4><%= t.filters.name%></h4>
-        <h1><%= t.filters.title %></h1>
-        <div class="pull-right filter-top-buttons">
-          <div class="btn btn-primary btn-round query-reset visible-filtered"></div>        
-          <div class="btn btn-info btn-round expand-all hidden-expanded">
-            <%= t.filters.all_filters %><span class="icon-icon_filter-open"></span>
-          </div>
-          <div class="btn btn-info btn-round expand-all visible-expanded ">
-            <%= t.filters.default_filters %><span class="icon-icon_filter-close"></span>
-          </div>
-        </div>
-      </div>         
-    </div>      
-  </div>      
+  <div class="filter-top-icon">
+    <span class="icon-icon_filter"></span>
+  </div>
+  <h4><%= t.filters.name%></h4>
+  <h1><%= t.filters.title %></h1>
+  <div class="pull-right filter-top-buttons">
+    <div class="btn btn-primary btn-round query-reset visible-filtered"></div>        
+    <div class="btn btn-info btn-round expand-all hidden-expanded">
+      <%= t.filters.all_filters %><span class="icon-icon_filter-open"></span>
+    </div>
+    <div class="btn btn-info btn-round expand-all visible-expanded ">
+      <%= t.filters.default_filters %><span class="icon-icon_filter-close"></span>
+    </div>
+  </div> 
 </div>      
 <div class="filter-main">
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-sm-12">
-        <form>      
-          <div class="form-search"></div>          
-          <div class="form-groups"></div>                
-          <button type="submit" class="sr-only btn btn-info btn-round btn-query-submit query-submit pull-right">
-            <%= t.filters.button_submit %>
-          </button>        
-        </form>  
-      </div>
-    </div>
-  </div>
+  <form>      
+    <div class="form-search"></div>          
+    <div class="form-groups"></div>                
+    <button type="submit" class="sr-only btn btn-info btn-round btn-query-submit query-submit pull-right">
+      <%= t.filters.button_submit %>
+    </button>        
+  </form>  
 </div>
diff --git a/app/components/app/nav/nav.css b/app/components/app/nav/nav.css
@@ -15,9 +15,7 @@
   box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);  
 }
 
-@media (min-width: 769px) {
-
-}
+
 
 /*typography, #nav links & buttons*/
 #nav a,
@@ -34,16 +32,25 @@
     position: static;
 }
 .navbar-fixed-top {
-    border-width: 0;
+  border-width: 0;
+}  
+.navbar-nav > li > a {
+  padding: 20px 15px;
 }
-@media (min-width: 769px) {
+@media (min-width: 992px) {
   .navbar-nav > li > a {
       padding: 20px 30px;
   }
 }
 .navbar-brand {
-  padding: 20px 30px;
+  padding: 20px 15px;
 }
+@media (min-width: 992px) {
+  .navbar-brand {
+    padding: 20px 30px;
+  }
+}
+
 .navbar-default .navbar-brand {
   color: #f2fafd;
 }

diff --git a/app/components/app/nav/nav.html b/app/components/app/nav/nav.html
@@ -1,20 +1,9 @@
 <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
-  <div class="navbar-header">
-    <button type="button" 
-            class="navbar-toggle collapsed" 
-            data-toggle="collapse" 
-            data-target="#navbar" 
-            aria-expanded="false" 
-            aria-controls="navbar">
-      <span class="sr-only">Toggle navigation</span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-    </button>
+  <div class="navbar-header">    
     <a class="navbar-brand home-link" href="#"><%= t.app.title %></a>
   </div>
   <div class="loading-animation"></div>
-  <div id="navbar" class="navbar-collapse collapse">          
+  <div id="navbar" class="hidden-xs">          
     <ul class="nav navbar-nav">
       <% _.each(navitems,function(item){ %>                  
       <li class="<%= item.class %>" >