gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Owen Leonard 2023-11-21 11:46:17 +00:00 committed by Katrin Fischer
parent 959ccf3437
commit feeaa09e23
No known key found for this signature in database
GPG Key ID: 0EF6E2C03357A834
7 changed files with 64 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
View File

@ -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;

4
koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc
View File

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

2
koha-tmpl/intranet-tmpl/prog/js/cookieconsent.js
View File

@ -40,7 +40,7 @@
consentBar.css('bottom', height);
};
consentBar.attr('aria-hidden', 'false');
consentBar.show();
consentBar.css("display", "flex");
}
function hideConsentBar() {

6
koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss
View File

@ -276,6 +276,12 @@
margin: 5px 0;
}
}
}
#consentButtons {
text-align: right;
white-space: nowrap;
}
#views {

22
koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
View File

@ -2908,10 +2908,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;
@ -2923,16 +2925,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 {
@ -2940,7 +2949,6 @@ $star-selected: #EDB867;
}
.consentModalItem {
align-items: center;
border: 1px solid #CCC;
border-radius: 5px;
display: flex;

4
koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
View File

@ -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 ) %]

21
koha-tmpl/opac-tmpl/bootstrap/js/cookieconsent.js
View File

@ -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() {