@@ -, +, @@
- 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 @@