@@ -, +, @@ - 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(-) --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ a/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; --- a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc +++ a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc @@ -86,7 +86,7 @@