Home page responsive improvements for wider viewport ratios. WIP #4443 @5

diff --git a/js/101-header.js b/js/101-header.js
index b2299ec6185bfe3fe989678c840db05dc5e99e5d..a0c8f67b3d4754480c2680061a9913aa4e79aed8 100644 (file)
--- a/js/101-header.js
+++ b/js/101-header.js
@@ -102,8 +102,12 @@ function headerScroll(force) {
     }\r
     var adminHeight = 0;\r
     if ($("#adminBar:visible").length > 0) {\r
-        adminHeight = $("#adminBar").outerHeight()\r
+        adminHeight = $("#adminBar").outerHeight();\r
+        $('body').addClass('admin-bar'); // CSS hook to allow adjustments when fixed admin bar is present\r
+    } else {\r
+        $('body').removeClass('admin-bar');\r
     }\r
+\r
     var headerHeight = $(h).outerHeight() * zoom;\r
     if (scrollUp != goingUp) {\r
         lastDirChange = s;\r

diff --git a/js/210-home.js b/js/210-home.js
index f5c77ad2cc9109258312057ec6c1f11e898fdf32..4949d4a90c2d54b4c68b0ec84c01b3a3a847509b 100644 (file)
--- a/js/210-home.js
+++ b/js/210-home.js
@@ -70,13 +70,18 @@ function resizeHome() {
         // Size each section according to its content and background image ratio\r
         sections.each(function () {\r
 \r
+            if ($(this).data('section-name') === 'intro') {\r
+                $(this).css('height', 'auto');\r
+                return true;\r
+            }\r
+\r
             var bgHolder = $(this).find('[data-bg-ratio]'),\r
                 bgHeight = 0,\r
                 contentHeight = $(this).find('.content-inner').outerHeight() + 100; // + extra padding height for content\r
 \r
-            if (bgHolder.length > 0) {\r
-                bgHeight = Math.round(bgHolder.outerWidth() * bgHolder.data('bg-ratio')) + 50; // + extra space for background\r
-            }\r
+            // if (bgHolder.length > 0) {\r
+            //     bgHeight = Math.round(bgHolder.outerWidth() * bgHolder.data('bg-ratio')) + 50; // + extra space for background\r
+            // }\r
 \r
             $(this).css('height', Math.max(bgHeight, contentHeight));\r
         });\r
@@ -95,30 +100,41 @@ function resizeHome() {
 function isTallEnough() {\r
 \r
     // Get available height for contents\r
-    var wh = $(window).height() - $('#h').outerHeight();\r
+    var wh = $(window).height() - Math.round(zoom * $('#h').outerHeight()); // Subtract scaled header menu height\r
     var ok = true;\r
     var bgHeight = 0;\r
     var contentHeight;\r
     var sectionHeight;\r
 \r
-    $('section .content-wrapper').each(function () {\r
+    $('.home .section:not(.contactFooter)').each(function () {\r
 \r
         // First, check if the section has a background image that forces a minimum ratio for the size\r
-        if ($(this).data('bg-ratio')) {\r
-            bgHeight = $(this).data('bg-ratio') * $(this).outerWidth();\r
-        }\r
+        // if ($(this).find('.content-wrapper').data('bg-ratio')) {\r
+        //     bgHeight = $(this).find('.content-wrapper').data('bg-ratio') * $(this).outerWidth();\r
+        // }\r
+\r
+        //console.log(`wh: ${wh} | bgHeight: ${bgHeight}`);\r
 \r
         // Get height of actual content\r
         contentHeight = $(this).find('.content-inner').outerHeight();\r
 \r
         // Largest dimension of the two wins\r
-        // sectionHeight = Math.max(bgHeight, contentHeight);\r
-        sectionHeight = contentHeight; // Not taking into account the bg height for now.\r
+        //sectionHeight = Math.max(bgHeight, contentHeight);\r
+        sectionHeight = contentHeight; // No longer taking into account the bg height because it's contained via object-fit\r
+\r
+        // Special case: if there's a logo bar present, we need to add that to the height\r
+        var logos = $(this).find('.logos-wrapper');\r
+        var logosHeight = logos.length ? logos.outerHeight() : 0;\r
 \r
+        //console.log('logosHeight', logosHeight);\r
+        sectionHeight = sectionHeight + logosHeight;\r
+        // console.log('Section height', sectionHeight);\r
+        sectionHeight = Math.round(sectionHeight * zoom);\r
+        // console.log('Section height SCALED', sectionHeight);\r
 \r
-        //console.info(sectionHeight + ' > ' + wh + '? ' + $(this).parent().data('section-name'));\r
+        //console.info(sectionHeight + ' > ' + wh + '? ' + logosHeight + ' [' + (wh - sectionHeight) + ']' + $(this).data('section-name'));\r
         if (sectionHeight > wh) {\r
-            //console.warn($(this).parent().data('section-name') + ' section is too tall...');\r
+            //console.warn($(this).data('section-name') + ' section is too tall... ' + sectionHeight + ' vs ' + wh);\r
             ok = false;\r
             return false;\r
         }\r
@@ -229,4 +245,4 @@ function resizeHomeContact(ww, wh) {
         $(".contactFooter .content-wrapper").css({paddingTop: '5%'});\r
     }\r
 \r
-}
\ No newline at end of file
+}\r

diff --git a/less/210-home.less b/less/210-home.less
index 85c7928a6a421a8686c6e366967f6741cb0267e1..0d1a6fa6d1f2bd94a7cf81ad1c56d047b34977f6 100644 (file)
--- a/less/210-home.less
+++ b/less/210-home.less
@@ -1,24 +1,34 @@
 @import "000-imports";\r
 \r
 .home {\r
-  .content-wrapper.fullheight {\r
-    position: relative;\r
-    background-position: bottom right;\r
-\r
-    @media @m900 {\r
-      background-size: 180%;\r
-    }\r
+  .content-wrapper {\r
+    &.fullheight {\r
+      position: relative;\r
+      background-position: bottom right;\r
 \r
-    &[data-has-mobile="1"] .content-inner {\r
       @media @m900 {\r
-        padding-bottom: 55%;\r
+        background-size: 180%;\r
+      }\r
+\r
+      &[data-has-mobile="1"] .content-inner {\r
+        @media @m900 {\r
+          padding-bottom: 55%;\r
+        }\r
       }\r
     }\r
-  }\r
+\r
+    // Make picture element behave like a background image so it doesn't overlap\r
+    // the header area (image itself should have necessary whitespace included)\r
+    .picture picture img {\r
+      height: 100%; // Needed along with width:100% so that object-fit works\r
+      object-fit: contain;\r
+      object-position: bottom right;\r
+    }\r
+}\r
 \r
   .content-inner {\r
     position: absolute;\r
-    padding: 0 5%;\r
+    padding: 3% 5%;\r
     top: 50%;\r
     left: 0;\r
     width: 100%;\r
@@ -30,11 +40,7 @@
       padding-top: 5%;\r
       padding-bottom: 80%;\r
       text-align: center;\r
-\r
-\r
     }\r
-\r
-\r
   }\r
 \r
   .btn {\r
@@ -133,4 +139,4 @@
   span {\r
     display: none;\r
   }\r
-}
\ No newline at end of file
+}\r

diff --git a/less/211-home-intro.less b/less/211-home-intro.less
index 39c6277c34eaee1ee201b3a7e34c90a96f778aed..b1bb345f26fdcbf1dfeefa364607a15d443e0659 100644 (file)
--- a/less/211-home-intro.less
+++ b/less/211-home-intro.less
@@ -4,9 +4,27 @@ section.intro {
   display: flex;
   flex-direction: column;
 
+  .content-inner {
+    position: relative;
+    transform: none;
+    top: unset;
+    left: unset;
+
+    @media @m900 {
+      padding-bottom: 70%;
+    }
+  }
+
   .content-wrapper {
     min-height: unset !important;
     flex: 1; // Take up all remaining height that logos don't use
+    display: flex; // Flex so we can centre text content in this area
+    align-items: center;
+    padding: 90px 0 0 0; // Reset the padding + reserve space at top for fixed header
+
+    .admin-bar & {
+      padding-top: 115px; // Admin bar takes an extra 25px vertical space
+    }
   }
 
   a.scroll-arrow {