From 889f64f78e81b72df8e900990418dfd5d8824e99 Mon Sep 17 00:00:00 2001 From: "stephen@cubedesigners.com" Date: Wed, 20 Oct 2021 19:08:05 +0000 Subject: [PATCH] Home page responsive improvements for wider viewport ratios. WIP #4443 @5 --- js/101-header.js | 6 +++++- js/210-home.js | 42 +++++++++++++++++++++++++++------------- less/210-home.less | 38 +++++++++++++++++++++--------------- less/211-home-intro.less | 18 +++++++++++++++++ 4 files changed, 74 insertions(+), 30 deletions(-) diff --git a/js/101-header.js b/js/101-header.js index b2299ec..a0c8f67 100644 --- a/js/101-header.js +++ b/js/101-header.js @@ -102,8 +102,12 @@ function headerScroll(force) { } var adminHeight = 0; if ($("#adminBar:visible").length > 0) { - adminHeight = $("#adminBar").outerHeight() + adminHeight = $("#adminBar").outerHeight(); + $('body').addClass('admin-bar'); // CSS hook to allow adjustments when fixed admin bar is present + } else { + $('body').removeClass('admin-bar'); } + var headerHeight = $(h).outerHeight() * zoom; if (scrollUp != goingUp) { lastDirChange = s; diff --git a/js/210-home.js b/js/210-home.js index f5c77ad..4949d4a 100644 --- 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 sections.each(function () { + if ($(this).data('section-name') === 'intro') { + $(this).css('height', 'auto'); + return true; + } + var bgHolder = $(this).find('[data-bg-ratio]'), bgHeight = 0, contentHeight = $(this).find('.content-inner').outerHeight() + 100; // + extra padding height for content - if (bgHolder.length > 0) { - bgHeight = Math.round(bgHolder.outerWidth() * bgHolder.data('bg-ratio')) + 50; // + extra space for background - } + // if (bgHolder.length > 0) { + // bgHeight = Math.round(bgHolder.outerWidth() * bgHolder.data('bg-ratio')) + 50; // + extra space for background + // } $(this).css('height', Math.max(bgHeight, contentHeight)); }); @@ -95,30 +100,41 @@ function resizeHome() { function isTallEnough() { // Get available height for contents - var wh = $(window).height() - $('#h').outerHeight(); + var wh = $(window).height() - Math.round(zoom * $('#h').outerHeight()); // Subtract scaled header menu height var ok = true; var bgHeight = 0; var contentHeight; var sectionHeight; - $('section .content-wrapper').each(function () { + $('.home .section:not(.contactFooter)').each(function () { // First, check if the section has a background image that forces a minimum ratio for the size - if ($(this).data('bg-ratio')) { - bgHeight = $(this).data('bg-ratio') * $(this).outerWidth(); - } + // if ($(this).find('.content-wrapper').data('bg-ratio')) { + // bgHeight = $(this).find('.content-wrapper').data('bg-ratio') * $(this).outerWidth(); + // } + + //console.log(`wh: ${wh} | bgHeight: ${bgHeight}`); // Get height of actual content contentHeight = $(this).find('.content-inner').outerHeight(); // Largest dimension of the two wins - // sectionHeight = Math.max(bgHeight, contentHeight); - sectionHeight = contentHeight; // Not taking into account the bg height for now. + //sectionHeight = Math.max(bgHeight, contentHeight); + sectionHeight = contentHeight; // No longer taking into account the bg height because it's contained via object-fit + + // Special case: if there's a logo bar present, we need to add that to the height + var logos = $(this).find('.logos-wrapper'); + var logosHeight = logos.length ? logos.outerHeight() : 0; + //console.log('logosHeight', logosHeight); + sectionHeight = sectionHeight + logosHeight; + // console.log('Section height', sectionHeight); + sectionHeight = Math.round(sectionHeight * zoom); + // console.log('Section height SCALED', sectionHeight); - //console.info(sectionHeight + ' > ' + wh + '? ' + $(this).parent().data('section-name')); + //console.info(sectionHeight + ' > ' + wh + '? ' + logosHeight + ' [' + (wh - sectionHeight) + ']' + $(this).data('section-name')); if (sectionHeight > wh) { - //console.warn($(this).parent().data('section-name') + ' section is too tall...'); + //console.warn($(this).data('section-name') + ' section is too tall... ' + sectionHeight + ' vs ' + wh); ok = false; return false; } @@ -229,4 +245,4 @@ function resizeHomeContact(ww, wh) { $(".contactFooter .content-wrapper").css({paddingTop: '5%'}); } -} \ No newline at end of file +} diff --git a/less/210-home.less b/less/210-home.less index 85c7928..0d1a6fa 100644 --- a/less/210-home.less +++ b/less/210-home.less @@ -1,24 +1,34 @@ @import "000-imports"; .home { - .content-wrapper.fullheight { - position: relative; - background-position: bottom right; - - @media @m900 { - background-size: 180%; - } + .content-wrapper { + &.fullheight { + position: relative; + background-position: bottom right; - &[data-has-mobile="1"] .content-inner { @media @m900 { - padding-bottom: 55%; + background-size: 180%; + } + + &[data-has-mobile="1"] .content-inner { + @media @m900 { + padding-bottom: 55%; + } } } - } + + // Make picture element behave like a background image so it doesn't overlap + // the header area (image itself should have necessary whitespace included) + .picture picture img { + height: 100%; // Needed along with width:100% so that object-fit works + object-fit: contain; + object-position: bottom right; + } +} .content-inner { position: absolute; - padding: 0 5%; + padding: 3% 5%; top: 50%; left: 0; width: 100%; @@ -30,11 +40,7 @@ padding-top: 5%; padding-bottom: 80%; text-align: center; - - } - - } .btn { @@ -133,4 +139,4 @@ span { display: none; } -} \ No newline at end of file +} diff --git a/less/211-home-intro.less b/less/211-home-intro.less index 39c6277..b1bb345 100644 --- 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 { -- 2.39.5