Home Page #2193

AtlasOfLivingAustralia · Apr 1, 2021 · 0eb0511 · 0eb0511
1 parent 74d19cd
commit 0eb0511
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 34 deletions.
diff --git a/grails-app/assets/stylesheets/responsive.css b/grails-app/assets/stylesheets/responsive.css
@@ -17,6 +17,10 @@
         padding-left: 5px;
         padding-right: 5px;
     }
+    #stats-holder .statistics .row .col-sm-4 {
+        width: 31.623931623931625%;
+        *width: 31.570740134569924%;
+    }
 
 }
 
@@ -55,3 +59,31 @@
     }
 
 }
+
+@media only screen and (min-width: 576px) {
+
+    #stats-holder .statistics .row .col-sm-4 {
+        width: 31.623931623931625%;
+        *width: 31.570740134569924%;
+
+    }
+
+}
+
+@media only screen and (min-width: 1200px) {
+    .statistics .row .col-sm-4 {
+        width: 31.623931623931625%;
+        *width: 31.570740134569924%;
+    }
+
+    .statistics .row [class*="col-sm-4"] {
+        display: block;
+        width: 100%;
+        min-height: 30px;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        float: left;
+    }
+
+}
diff --git a/grails-app/views/home/_helpLinks.gsp b/grails-app/views/home/_helpLinks.gsp
@@ -1,26 +1,26 @@
 <g:if test="${helpLinks && helpLinks.size() >= 6}">
 <div id="help-links">
-    <div class="row-fluid">
-        <span class="span4">
+    <div class="row-fluid row">
+        <span class="span4 col-sm-4">
             <g:render template="helpLink" model="${helpLinks[0]+[category:1]}"/>
         </span>
-        <span class="span4">
+        <span class="span4 col-sm-4">
             <g:render template="helpLink" model="${helpLinks[1]+[category:2]}"/>
         </span>
-        <span class="span4">
+        <span class="span4 col-sm-4">
             <g:render template="helpLink" model="${helpLinks[2]+[category:3]}"/>
         </span>
     </div>
-    <div class="row-fluid">
-        <span class="span4">
+    <div class="row-fluid row">
+        <span class="span4 col-sm-4">
             <g:render template="helpLink" model="${helpLinks[3]+[category:4]}"/>
         </span>
-        <span class="span4">
+        <span class="span4 col-sm-4">
             <g:render template="helpLink" model="${helpLinks[4]+[category:5]}"/>
         </span>
-        <span class="span4">
+        <span class="span4 col-sm-4">
             <g:render template="helpLink" model="${helpLinks[5]+[category:6]}"/>
         </span>
     </div>
 </div>
-</g:if>
+</g:if>
diff --git a/grails-app/views/home/public.gsp b/grails-app/views/home/public.gsp
@@ -3,7 +3,7 @@
 <head>
     <g:set var="containerType" scope="request" value="container"/>
     <script type="text/javascript" src="${grailsApplication.config.google.maps.url}&libraries=visualization"></script>
-    <meta name="layout" content="${hubConfig.skin}"/>
+    <meta name="layout" content="nrm_bs4"/>
     <title>Home | MERIT</title>
     <script>
         var fcConfig = {
@@ -20,8 +20,8 @@
         };
     </script>
     <script type="text/javascript" src="//www.google.com/jsapi"></script>
-    <asset:stylesheet src="common.css"/>
     <asset:stylesheet src="homepage.css"/>
+    <asset:stylesheet src="common-bs4.css"/>
 </head>
 
 <body>
@@ -30,12 +30,12 @@
     <div id="stats-holder">
         <g:render template="/report/statistics"/>
     </div>
-    <div class="row-fluid">
-        <div id="latest-news" class="span6">
+    <div class="row-fluid row">
+        <div id="latest-news" class="span6 col-sm-6">
             <h4>Latest news</h4>
             <g:render template="/shared/blog" />
         </div>
-        <div id="poi" class="span6">
+        <div id="poi" class="span6 col-sm-6">
             <g:render template="/shared/poi"/>
         </div>
     </div>
@@ -71,15 +71,6 @@
                 if ($('#latest-news').height() > 400) {
                     $('#latest-news').height(400).css('overflow-y', 'scroll');
                 }
-                //var $news = $('#latest-news');
-                //var approxExtras = $news.find('h4').height() + ($news.outerHeight()-$news.height())/2;
-                //$($news).on('scroll', function(e) {
-                //    var scrollPos = $news.scrollTop();
-                //    var blogHeight = $('#blog-').height();
-                //    if (scrollPos+400 >= blogHeight+approxExtras-10) {
-                //        // we would load more blog entries at this point.
-                //    }
-                //});
             });
 
 </script>

diff --git a/grails-app/views/report/_statistics.gsp b/grails-app/views/report/_statistics.gsp
@@ -1,28 +1,28 @@
-<div class="row-fluid statistics">
+<div class="statistics">
     %{--This section expects exactly 6 statistics to display--}%
-    <div class="row-fluid">
-        <div class="span4 box1">
+    <div class="row-fluid row">
+        <div class="col-sm-4 span4 box1">
             <g:render template="/report/statistic" model="${statistics[0]}"/>
         </div>
-        <div class="span4 box2">
+        <div class="col-sm-4 span4 box2">
             <g:render template="/report/statistic" model="${statistics[1]}"/>
         </div>
-        <div class="span4 box3">
+        <div class="col-sm-4 span4 box3">
             <g:render template="/report/statistic" model="${statistics[2]}"/>
         </div>
     </div>
-    <div class="row-fluid">
-        <div class="span4 box4">
+    <div class="row">
+        <div class="col-sm-4 span4 box4">
             <g:render template="/report/statistic" model="${statistics[3]}"/>
         </div>
-        <div class="span4 box5">
+        <div class="col-sm-4 span4 box5">
             <g:render template="/report/statistic" model="${statistics[4]}"/>
         </div>
-        <div class="span4 box6">
+        <div class="col-sm-4 span4 box6">
             <g:render template="/report/statistic" model="${statistics[5]}"/>
         </div>
     </div>
-    <div class="row-fluid">
-        <div class="span12 text-center"><a href="#" class="show-more-stats">Show more stats <i class="fa fa-refresh"></i></a></div>
+    <div class="row">
+        <div class="col-sm-12 span12 align-content-center text-center"><a href="#" class="show-more-stats">Show more stats <i class="fa fa-refresh"></i></a></div>
     </div>
 </div>