From bc7e614a3ec6c470720f37c84c445e1fdb0babbd Mon Sep 17 00:00:00 2001
From: tmfrnz <timo@dumpark.com>
Date: Sat, 6 May 2017 15:06:18 +1200
Subject: [PATCH] support responsiveness >768px, add note #180, #166

---
 app/components/app/app.css                    | 88 +++----------------
 app/components/app/app.html                   | 15 ++--
 app/components/app/filters/filterButtons.html |  2 +-
 app/components/app/filters/filterMinMax.html  |  4 +-
 .../app/filters/filterMinMaxAddon.html        |  4 +-
 app/components/app/filters/filters.css        | 36 ++++++--
 app/components/app/filters/filters.html       | 54 +++++-------
 app/components/app/nav/nav.css                | 19 ++--
 app/components/app/nav/nav.html               | 15 +---
 app/components/app/out/map/map.css            | 24 +++--
 .../app/out/map/mapControl/mapControl.css     | 24 +++--
 .../app/out/map/mapControl/mapControl.html    |  6 +-
 .../app/out/map/mapPlot/mapPlot.css           | 36 +++++---
 .../map/mapPlot/mapPlotLat/mapPlotLat.html    |  4 +-
 app/components/app/out/out.css                | 55 ++++++++----
 app/components/app/out/out_data.html          |  4 +-
 app/components/app/page/page.css              |  2 +-
 app/components/app/page/pageContent.html      | 14 ++-
 18 files changed, 204 insertions(+), 202 deletions(-)

diff --git a/app/components/app/app.css b/app/components/app/app.css
index 94cd0ec..7c88fee 100644
--- 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;
 }
\ No newline at end of file
diff --git a/app/components/app/app.html b/app/components/app/app.html
index 9d24aa2..90fded5 100644
--- 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
index f46fa22..00779f9 100644
--- 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
index 78778d3..a1a522c 100644
--- 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
index d45fcec..5b143b4 100644
--- 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
index 1302297..53b78cc 100644
--- 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,11 +31,11 @@
 .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;
@@ -39,7 +43,11 @@
   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
index 4b44ce2..82c7c76 100644
--- 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>
\ No newline at end of file
diff --git a/app/components/app/nav/nav.css b/app/components/app/nav/nav.css
index 5610adc..176a8b1 100644
--- 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
index d914727..eb6c30b 100644
--- 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 %>" > 
diff --git a/app/components/app/out/map/map.css b/app/components/app/out/map/map.css
index e4f806e..bc249d6 100644
--- a/app/components/app/out/map/map.css
+++ b/app/components/app/out/map/map.css
@@ -15,9 +15,14 @@
   top: 0;
   bottom: 0;
   left: 0;
-  right: 200px;
+  right: 160px;
   background-color: #f7f7f7;
 }
+@media (min-width: 992px) {
+  #map-container {
+    right: 200px;    
+  }
+}
 
 #map.full-width #map-container {
   right:0
@@ -83,7 +88,7 @@ a.leaflet-control-zoom-in:hover,
 a.leaflet-control-zoom-in{
   border-bottom: none;
 }
-@media (max-width: 768px){
+@media (max-width: 767px){
   a.leaflet-control-zoom-in, a.leaflet-control-zoom-out {
       display: none;
   }
@@ -215,14 +220,19 @@ a.leaflet-control-zoom-in{
 
 
 #map-options {
-    position: absolute;
-    top: 0;
-    right: 200px;
-    z-index: 1001;
-      -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);
+  position: absolute;
+  top: 0;
+  right: 160px;
+  z-index: 1001;
+  -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);
   -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);
   box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);  
 }
+@media (min-width: 992px) {
+  #map-options {
+    right: 200px;
+  }
+}
 #map.full-width #map-options {
     position: absolute;
     top: 0;
diff --git a/app/components/app/out/map/mapControl/mapControl.css b/app/components/app/out/map/mapControl/mapControl.css
index 31bc857..e3995a6 100644
--- a/app/components/app/out/map/mapControl/mapControl.css
+++ b/app/components/app/out/map/mapControl/mapControl.css
@@ -3,7 +3,7 @@
   top: 0;
   bottom: 0;  
   right:0;
-  width: 200px;  
+  width: 160px;  
   background-color: #F5F6F6;
   z-index: 1002;
   display: none;
@@ -11,7 +11,11 @@
   -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);
   box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.2);  
 }
-
+@media (min-width: 992px) {
+  #map-control {
+    width: 200px;
+  }
+}
 #map-control-header h4 {
   line-height: 48px;
   margin: 0;
@@ -19,10 +23,11 @@
 }
 
 #map-control-header {
-    min-height: 48px;
-    border-bottom: 1px solid #EDEEEF;
-    display: block;
-    width: 100%;
+  min-height: 48px;
+  border-bottom: 1px solid #EDEEEF;
+  display: block;
+  width: 100%;
+  padding: 0 15px;
 }
 
 
@@ -30,13 +35,18 @@
       font-size: 16px;
 }
 
+#map-control-marker-control {
+  padding: 0 15px;
+}
+
+
 #color-attribute-key .attribute-title {
   font-family: 'Titillium Web', sans-serif;
   font-weight: bold;
 }
 
 #color-attribute-key {   
-  padding-top: 10px;  
+  padding: 10px 0 0 15px;  
 }
 
 #color-attribute-key ul {
diff --git a/app/components/app/out/map/mapControl/mapControl.html b/app/components/app/out/map/mapControl/mapControl.html
index ca4a0a6..5058726 100644
--- a/app/components/app/out/map/mapControl/mapControl.html
+++ b/app/components/app/out/map/mapControl/mapControl.html
@@ -1,9 +1,9 @@
-<div id="map-control-header" class="container-fluid">
+<div id="map-control-header">
   <h4><%= t.out.map.control.name %></h4>
 </div>
-<div id="map-control-marker-control" class="container-fluid">
+<div id="map-control-marker-control">
   <h3><%= t.out.map.control.marker_title %></h3>
   <p class="hint"><%= t.out.map.control.marker_hint %></p>
 </div>
 <div id="color-attribute-selector"></div>
-<div id="color-attribute-key" class="container-fluid"></div>
\ No newline at end of file
+<div id="color-attribute-key"></div>
\ No newline at end of file
diff --git a/app/components/app/out/map/mapPlot/mapPlot.css b/app/components/app/out/map/mapPlot/mapPlot.css
index e9aa795..2151c2d 100644
--- a/app/components/app/out/map/mapPlot/mapPlot.css
+++ b/app/components/app/out/map/mapPlot/mapPlot.css
@@ -3,14 +3,18 @@
   top: 0;
   bottom: 0;  
   right:0;
-  width: 200px;  
+  width: 160px;  
   overflow-y: auto;
   background-color:#F5F6F6;
   z-index: 1000;
   display: none;
   overflow-x: hidden;
 }
-
+@media (min-width: 992px) {
+  #map-plot-lat {  
+    width: 200px;
+  }
+}
 #map-plot-header h4 {
   line-height: 48px;
   margin: 0;
@@ -18,13 +22,12 @@
 }
 
 #map-plot-header {
-    min-height: 48px;
-    display: block;
-    width: 100%;
+  min-height: 48px;
+  display: block;
+  width: 100%;
+  padding: 0 15px;
 }
 
-
-
 #map-plot-lat h3 {
     font-size: 16px;
 }
@@ -39,8 +42,20 @@
   padding-bottom: 10px;
   border-bottom: 1px solid #EDEEEF;
   min-height: 48px;
+  padding: 0 0 0 5px;  
 }
 
+@media (min-width: 992px) {
+  #plot-control {
+    padding: 0 15px;
+  }
+}
+
+#plot-plot {
+    padding-right: 5px;
+}
+
+
 tr.select-column label,
 tr.select-record {
     cursor: pointer;
@@ -68,7 +83,7 @@ td.select-label {
 }
 .table-plot td.marker {
     text-align: center;
-    width: 30px;
+    width: 15px;
     padding-right: 0px;
     padding-left: 5px;
 }
@@ -80,7 +95,7 @@ td.select-label {
 }
 
 .table-plot.table-plot-lat td.bars {
-  width: 120px;
+  width: auto;
   padding: 3px 0;
   border-left: 1px solid #999;
   position: relative
@@ -111,9 +126,6 @@ td.select-label {
     padding: 3px 0px;
     width: 9px;
 }
-.table-plot.table-plot-lat td.bars-above {
-    width: auto;
-}
 .list-plot-bar {
     height: 12px;
     position: relative;
diff --git a/app/components/app/out/map/mapPlot/mapPlotLat/mapPlotLat.html b/app/components/app/out/map/mapPlot/mapPlotLat/mapPlotLat.html
index 3bdad78..717d5d0 100644
--- a/app/components/app/out/map/mapPlot/mapPlotLat/mapPlotLat.html
+++ b/app/components/app/out/map/mapPlot/mapPlotLat/mapPlotLat.html
@@ -1,7 +1,7 @@
-<div id="map-plot-header" class="container-fluid">  
+<div id="map-plot-header">  
   <h4><%= t.out.map.plot.name_lat %></h4>
 </div>
-<div id="plot-control" class="container-fluid"></div>    
+<div id="plot-control"></div>    
 <div id="plot-plot"></div>
 <div class="plot-bottom-buttons">      
   <div class="btn btn-info btn-round expand hidden-expanded" >
diff --git a/app/components/app/out/out.css b/app/components/app/out/out.css
index 140beda..866ed5a 100644
--- a/app/components/app/out/out.css
+++ b/app/components/app/out/out.css
@@ -7,18 +7,23 @@
   width: auto;  
   display:none;
 }
-@media (min-width: 769px) {
+/*@media (min-width: 768px) {*/
   #out {    
-    left: 50%;
+    left: 330px;
+  }
+/*}*/
+@media (min-width: 992px) {
+  #out {    
+    left: 400px;
   }
 }
-@media (min-width: 1068px) {
+
+@media (min-width: 1200px) {
   #out {    
     left: 500px;
   }
 }
 
-
 #out nav {
     height: 60px;
     background-color: #19313f;
@@ -29,31 +34,45 @@
       position: relative;
     z-index: 1010;
 }
-
 #out .out-nav-info {
   font-family: 'Titillium Web', sans-serif;
-      margin-left: 30px;
-    margin-right: 10px;
+  margin-left: 5px;
+  margin-right: 10px;
+}
+@media (min-width: 992px) {
+  #out .out-nav-info {
+    margin-left: 30px;
+  }
 }
 #out .record-no {
-    font-size: 24px;
+    font-size: 20px;
     line-height: 24px;
     vertical-align: middle;
     color:#fff;        
     position: relative;
     top: -2px;
-    margin-right: 5px;
+    margin-right: 2px;
     font-weight: 600;
 }
+@media (min-width: 992px) {
+  #out .record-no {
+    font-size: 24px;
+    margin-right: 5px;
+  }
+}
 
 .data-outer {
-    position: relative;
-    z-index: 9999;
-    padding: 30px 50px 60px;
-    border-top:1px solid #172630;
-    -webkit-box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2);
-    -moz-box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2);
-    box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2); 
+  position: absolute;
+  top: 60px;
+  left: 0;
+  right: 0;
+  overflow: auto;
+  bottom: 0;    z-index: 9999;
+  padding: 30px 50px 60px;
+  border-top:1px solid #172630;
+  -webkit-box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2);
+  -moz-box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2);
+  box-shadow: 0px 3px 8px -2px rgba(0,0,0,0.2); 
 }
 
 .btn-out-nav:active:focus,
@@ -157,4 +176,8 @@ a.download-data:hover, a.download-data:focus{
     -webkit-box-shadow: none;
     box-shadow: none;  
     border: 1px solid #0b1a23;
+}
+
+.data-option {
+  margin-bottom:50px;
 }
\ No newline at end of file
diff --git a/app/components/app/out/out_data.html b/app/components/app/out/out_data.html
index 91677cb..cd03ed4 100644
--- a/app/components/app/out/out_data.html
+++ b/app/components/app/out/out_data.html
@@ -9,7 +9,7 @@ <h3><%= t.out.data.title %></h3>
   </div>
   <div class="row">
     <% if (canDownload) { %>
-    <div class="col-sm-6">
+    <div class="data-option col-sm-12 col-md-6">
       <div class="text-center">
         <h5><%= t.out.data.download_title %></h5>
       </div>  
@@ -67,7 +67,7 @@ <h6><%= table.title %> (<%= format.title %>)</h6>
       </div>  
     </div>  
     <% } %>
-    <div class="col-sm-6">
+    <div class="data-option col-sm-12 col-md-6">
       <div class="text-center">      
         <h5><%= t.out.data.wfs_title %></h5>        
       </div>      
diff --git a/app/components/app/page/page.css b/app/components/app/page/page.css
index d2a99ef..1ef857b 100644
--- a/app/components/app/page/page.css
+++ b/app/components/app/page/page.css
@@ -26,7 +26,7 @@
 a.close-page {
     position: absolute;
     right: 30px;
-    top: 30px;
+    top: 150px;
     z-index: 1;
 }
 #page h1 {
diff --git a/app/components/app/page/pageContent.html b/app/components/app/page/pageContent.html
index 182ca33..0904d76 100644
--- a/app/components/app/page/pageContent.html
+++ b/app/components/app/page/pageContent.html
@@ -1,15 +1,11 @@
 <a href="#" title="<%= t.app.ui.close %>" class="close-page"> 
   <span class="icon-icon_close"></span>
 </a> 
-<div class="row">
-  <div class="col-sm-12">
-    <div class="page-inner">
-      <div class="container-fluid">
-        <div class="row">
-          <div class="col-sm-10 col-sm-offset-1">         
-            <div class="placeholder-content container-fluid"></div>
-          </div>
-        </div>
+<div class="page-inner">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-sm-10 col-sm-offset-1">         
+        <div class="placeholder-content container-fluid"></div>
       </div>
     </div>
   </div>