From 01dcc88969713452277d3933466cdef4a294aa19 Mon Sep 17 00:00:00 2001 From: Owen Leonard <oleonard@myacpl.org> Date: Tue, 21 Nov 2023 11:46:17 +0000 Subject: [PATCH] Bug 34792: Improve flexibility of CookieConsentBar layout This patch makes CSS and markup changes to the CookieConsentBar, in both the OPAC and staff interface, so that the layout of custom text and buttons works better with varying text content and varying browser widths. The patch also adds some JavaScript to the OPAC so that the cookie consent bar interacts better with the language selection footer. When the language selection footer is visible, the cookie consent bar should "stick" to the bottom of the viewport except when the page is scrolled all the way down. When the page is scrolled all the way to the bottom the cookie consent bar should move to the top of the language selection footer. To test, apply the patch and rebuild the OPAC and staff interface CSS. - Go to Administration -> System preferences and enable the CookieConsent preference if necessary. - Follow the link in the preference description to HTML customizations. - Create an HTML customization in the CookieConsentBar display location. Add a paragraph of text. - Go to the OPAC. If you don't see the cookie consent bar at the bottom of the screen you may need to clear your browser cookies and local storage. - Confirm that the text flows well in relation to the buttons: With a lot of text, the text expands to fill the width of the cookie consent bar and the buttons are below. With a small amount of text, the text and buttons should be side by side. - Test that this layout adapts well to various browser widths. - Perform the same tests in the staff interface. Signed-off-by: David Nind <david@davidnind.com> --- .../prog/css/src/staff-global.scss | 28 +++++++++++++++---- .../prog/en/includes/intranet-bottom.inc | 4 +-- .../intranet-tmpl/prog/js/cookieconsent.js | 2 +- .../bootstrap/css/src/_responsive.scss | 6 ++++ .../opac-tmpl/bootstrap/css/src/opac.scss | 22 ++++++++++----- .../bootstrap/en/includes/masthead.inc | 4 ++- .../opac-tmpl/bootstrap/js/cookieconsent.js | 21 ++++++++++---- 7 files changed, 64 insertions(+), 23 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 99b2ad0d89..a2f32b0292 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -4524,10 +4524,12 @@ div .suggestion_note { /* Cookie consent bar */ #cookieConsentBar { + align-items: center; background: rgba( 0, 0, 0, .7 ); bottom: 0; color: rgba( 255, 255, 255, .9 ); display: none; + flex-wrap: wrap; left: 0; padding: 20px; position: fixed; @@ -4539,16 +4541,23 @@ div .suggestion_note { color: #D7EBFF; } - #consentButtons { - margin-top: 10px; - text-align: right; - } + button { + margin-bottom: .5rem; + margin-top: .5rem; - button:not( :last-child ) { - margin-right: 10px; + &:not( :last-child ) { + margin-right: 10px; + } } } +#consentButtons { + flex-grow: 1; + margin-top: 10px; + text-align: left; + white-space: normal; +} + /* Cookie consent modal */ #cookieConsentModal { .modal-dialog { @@ -4584,6 +4593,13 @@ div .suggestion_note { @import "toolbar"; @import "forms"; +@media only screen and ( min-width: 608px ) { + #consentButtons { + text-align: right; + white-space: nowrap; + } +} + @media ( max-width: 767px ) { .header-menu-link { display: inline-block; diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc index 47a0cdc77b..6dbd6544d2 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc @@ -86,7 +86,7 @@ <!-- Cookie consent bar --> <div id="cookieConsentBar" aria-hidden="true"> [% IF ( CookieConsentBar && CookieConsentBar.content && CookieConsentBar.content.count >0 ) %] - <div id="cookieConsentBarText"> + <div id="cookieConsentBar_content"> [%- FOREACH item IN CookieConsentBar.content -%] [%- item.content | $raw -%] [%- END -%] @@ -97,7 +97,7 @@ [% IF ( JSConsents.all('staffConsent').size ) %] <button type="button" class="btn btn-primary consentAcceptEssential">Accept only essential cookies</button> [% END %] - <button type="button" class="btn btn-info" id="consentMoreInfo">More information</button> + <button type="button" class="btn btn-default" id="consentMoreInfo">More information</button> </div> </div> <!-- /#cookieConsentBar --> <!-- Cookie consent modal --> diff --git a/koha-tmpl/intranet-tmpl/prog/js/cookieconsent.js b/koha-tmpl/intranet-tmpl/prog/js/cookieconsent.js index 1b6ca51530..40ae180983 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/cookieconsent.js +++ b/koha-tmpl/intranet-tmpl/prog/js/cookieconsent.js @@ -40,7 +40,7 @@ consentBar.css('bottom', height); }; consentBar.attr('aria-hidden', 'false'); - consentBar.show(); + consentBar.css("display", "flex"); } function hideConsentBar() { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index 9085c7ddb5..89a30c1675 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -276,6 +276,12 @@ margin: 5px 0; } } + + } + + #consentButtons { + text-align: right; + white-space: nowrap; } #views { diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 16e4b281f7..375ef494c7 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2887,10 +2887,12 @@ $star-selected: #EDB867; /* Cookie consent bar */ #cookieConsentBar { + align-items: center; background: rgba( 0, 0, 0, .7 ); bottom: 0; color: rgba( 255, 255, 255, .9 ); display: none; + flex-wrap: wrap; left: 0; padding: 20px; position: fixed; @@ -2902,16 +2904,23 @@ $star-selected: #EDB867; color: #C5ECFF; } - #consentButtons { - margin-top: 10px; - text-align: right; - } + button { + margin-bottom: .5rem; + margin-top: .5rem; - button:not( :last-child ) { - margin-right: 10px; + &:not( :last-child ) { + margin-right: 10px; + } } } +#consentButtons { + flex-grow: 1; + margin-top: 10px; + text-align: left; + white-space: normal; +} + /* Cookie consent modal */ #cookieConsentModal { .modal-dialog { @@ -2919,7 +2928,6 @@ $star-selected: #EDB867; } .consentModalItem { - align-items: center; border: 1px solid #CCC; border-radius: 5px; display: flex; diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc index 91258f364b..d6912a0958 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc @@ -458,7 +458,9 @@ <!-- Cookie consent bar --> <div id="cookieConsentBar" aria-hidden="true"> [% IF ( CookieConsentBar ) %] - [% PROCESS koha_news_block news => CookieConsentBar %] + <div id="cookieConsentBar_content"> + [% PROCESS koha_news_block news => CookieConsentBar %] + </div> [% END %] <div id="consentButtons"> <button type="button" class="btn btn-primary consentAcceptAll">Accept all cookies</button> diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js b/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js index 088d3ba2aa..2bf7b07c2e 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js @@ -27,6 +27,20 @@ initialiseSelected(); }); + $(window).on("scroll", function() { + const consentBar = $("#cookieConsentBar"); + const langmenu = $("#changelanguage"); + const wrapper = $("#wrapper"); + if( langmenu ) { + const height = langmenu.height(); + if( $(window).scrollTop() >= wrapper.offset().top + wrapper.outerHeight() - window.innerHeight ) { + consentBar.css("bottom", height); + } else { + consentBar.css("bottom", 0); + } + }; + }); + // Initialise existing consent based on local storage function getExistingConsent() { existingConsent = localStorage.getItem('cookieConsent') ? @@ -36,13 +50,8 @@ function showConsentBar() { const consentBar = $('#cookieConsentBar'); - const langmenu = $('#changelanguage'); - if(langmenu) { - const height = langmenu.height(); - consentBar.css('bottom', height); - }; consentBar.attr('aria-hidden', 'false'); - consentBar.show(); + consentBar.css("display", "flex"); } function hideConsentBar() { -- 2.30.2