Bugzilla – Attachment 165263 Details for
Bug 34792
CookieConsentBar content feels mis-aligned
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 34792: Improve flexibility of CookieConsentBar layout
Bug-34792-Improve-flexibility-of-CookieConsentBar-.patch (text/plain), 9.49 KB, created by
Owen Leonard
on 2024-04-22 11:10:03 UTC
(
hide
)
Description:
Bug 34792: Improve flexibility of CookieConsentBar layout
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2024-04-22 11:10:03 UTC
Size:
9.49 KB
patch
obsolete
>From 1039b8d6fcd15741e51e5314fb8bff99f1923377 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. >--- > .../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 28beabafc7..c2b99b18af 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >@@ -4619,10 +4619,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; >@@ -4634,16 +4636,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 { >@@ -4699,6 +4708,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 0ddfa53c96..24572c2a3a 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 @@ > <button type="button" class="btn btn-primary consentAcceptAll">Accept all cookies</button> > [% END %] > <button type="button" class="btn btn-primary consentAcceptEssential">Accept essential cookies</button> >- <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 5685a88fc0..e24fb0773c 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 79130984f0..4260aa74db 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -2890,10 +2890,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; >@@ -2905,16 +2907,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 { >@@ -2922,7 +2931,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 19545e277b..682a0656a8 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc >@@ -464,7 +464,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"> > [% IF ( JSConsents.all('opacConsent').size ) %] >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.39.2
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 34792
:
159158
|
159159
|
159174
|
159175
|
159185
|
159186
|
165263
|
165336
|
165337