Bug 34792 - CookieConsentBar content feels mis-aligned
Summary: CookieConsentBar content feels mis-aligned
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor (vote)
Assignee: Owen Leonard
QA Contact: Lucas Gass
URL:
Keywords:
Depends on: 35347
Blocks:
  Show dependency treegraph
 
Reported: 2023-09-14 14:48 UTC by Martin Renvoize
Modified: 2024-05-21 15:30 UTC (History)
2 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
24.05.00


Attachments
Bug 34792: (Preparation) Run stylelint fixes on cookie consent CSS (2.29 KB, patch)
2023-11-21 13:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34792: Improve flexibility of CookieConsentBar layout (9.57 KB, patch)
2023-11-21 13:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34792: (Preparation) Run stylelint fixes on cookie consent CSS (2.29 KB, patch)
2023-11-21 17:55 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34792: Improve flexibility of CookieConsentBar layout (9.49 KB, patch)
2023-11-21 17:55 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34792: (Preparation) Run stylelint fixes on cookie consent CSS (2.34 KB, patch)
2023-11-21 23:31 UTC, David Nind
Details | Diff | Splinter Review
Bug 34792: Improve flexibility of CookieConsentBar layout (9.54 KB, patch)
2023-11-21 23:31 UTC, David Nind
Details | Diff | Splinter Review
Bug 34792: Improve flexibility of CookieConsentBar layout (9.49 KB, patch)
2024-04-22 11:10 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 34792: (Preparation) Run stylelint fixes on cookie consent CSS (2.39 KB, patch)
2024-04-22 17:22 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 34792: Improve flexibility of CookieConsentBar layout (9.54 KB, patch)
2024-04-22 17:22 UTC, Lucas Gass
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize 2023-09-14 14:48:20 UTC
When one adds content to the cookie consent bar using the 'CookieConsentBar' html customization, the vertical alignment of that content sits above the buttons. To me, it feels like it should sit to the left of the buttons and if it's a long content the buttons should align to sit bottom right but inline with the bottom of the content.
Comment 1 Owen Leonard 2023-11-20 17:20:21 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2023-11-21 00:03:32 UTC
(In reply to Owen Leonard from comment #1)
> I understand what you mean, but

Hahaha I didn't realize I submitted that unformed thought! I'm almost done with a patch that I think satisfies the requirements.
Comment 3 Owen Leonard 2023-11-21 13:08:03 UTC Comment hidden (obsolete)
Comment 4 Owen Leonard 2023-11-21 13:08:05 UTC Comment hidden (obsolete)
Comment 5 Owen Leonard 2023-11-21 17:55:54 UTC
Created attachment 159174 [details] [review]
Bug 34792: (Preparation) Run stylelint fixes on cookie consent CSS

This patch applies automated stylelint fixes to the OPAC CSS which was
added when the Cookie Consent feature was added. No other CSS has been
changed.
Comment 6 Owen Leonard 2023-11-21 17:55:56 UTC
Created attachment 159175 [details] [review]
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.
Comment 7 David Nind 2023-11-21 23:31:29 UTC
Created attachment 159185 [details] [review]
Bug 34792: (Preparation) Run stylelint fixes on cookie consent CSS

This patch applies automated stylelint fixes to the OPAC CSS which was
added when the Cookie Consent feature was added. No other CSS has been
changed.

Signed-off-by: David Nind <david@davidnind.com>
Comment 8 David Nind 2023-11-21 23:31:31 UTC
Created attachment 159186 [details] [review]
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>
Comment 9 Kyle M Hall 2024-03-15 12:10:44 UTC
I cannot for the life of me get this to work. I greatly suspect I have no idea what I'm going when it comes to updating the css from the scss. I've tried all the css related scripts in package.json and the commands on the wiki. Owen, can you ELI5 in the test plan?
Comment 10 Owen Leonard 2024-03-22 12:40:31 UTC
running `yarn build` should do all the updates you need.
Comment 11 Owen Leonard 2024-04-22 11:10:03 UTC
Created attachment 165263 [details] [review]
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.
Comment 12 Lucas Gass 2024-04-22 17:22:15 UTC
Created attachment 165336 [details] [review]
Bug 34792: (Preparation) Run stylelint fixes on cookie consent CSS

This patch applies automated stylelint fixes to the OPAC CSS which was
added when the Cookie Consent feature was added. No other CSS has been
changed.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 13 Lucas Gass 2024-04-22 17:22:17 UTC
Created attachment 165337 [details] [review]
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>
Comment 14 Katrin Fischer 2024-04-29 07:38:08 UTC
Pushed for 24.05!

Well done everyone, thank you!