Attachment 161176 Details for Bug 25267 – Bug 25267: (follow-up) Prevent OPAC sidebar overlap

[patch] Bug 25267: (follow-up) Prevent OPAC sidebar overlap

Bug-25267-follow-up-Prevent-OPAC-sidebar-overlap.patch (text/plain), 1.72 KB, created by Andreas Roussos on 2024-01-19 08:41:30 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Andreas Roussos

Created: 2024-01-19 08:41:30 UTC

Size: 1.72 KB

patch

obsolete

>From 1af62b52724075953146b1e7980c956e4843181e Mon Sep 17 00:00:00 2001
>From: Andreas Roussos <a.roussos@dataly.gr>
>Date: Fri, 19 Jan 2024 08:39:30 +0000
>Subject: [PATCH] Bug 25267: (follow-up) Prevent OPAC sidebar overlap
>
>At viewports between approx. 1040 and 1120 pixels wide,
>the rightmost item in the shelf browser is shown outside
>of the Holdings frame and its cover image and title
>hyperlinks are inoperable.
>
>This patch fixes that by preventing the OPAC sidebar
>CSS Flex item (.col-lg-3 class) from extending itself
>vertically all the way to the bottom of the parent
>.row class container, thus overlapping the protruding
>shelf browser Flex item (.col-lg-9 class) due to the
>stacking order.
>
>Test plan:
>
>Apply the patch, rebuild the OPAC CSS and check whether
>the cover image and title hyperlinks for the rightmost
>(7th) shelf browser item work at various browser widths.
>
>Thanks-to: https://stackoverflow.com/a/40156422
>---
> koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 12 ++++++++++++
> 1 file changed, 12 insertions(+)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>index a728f306a1..d7c81f0b64 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>@@ -2352,6 +2352,18 @@ nav {
>     }
> }
> 
>+/*
>+ * The following prevents the OPAC sidebar from overlapping the
>+ * rightmost shelf browser item if the web browser has a narrow
>+ * viewport width.
>+ *
>+ * This fix is based on the following Stack Overflow answer:
>+ * https://stackoverflow.com/a/40156422
>+ */
>+#opac-detail > #wrapper > .main > .container-fluid > .row > .col-lg-3 {
>+    align-self: flex-start;
>+}
>+
> #holds {
>     margin: 0 auto;
>     max-width: 800px;
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 25267: 113901 | 114242 | 135632 | 135634 | 143876 | 143877 | 143927 | 159334 | 159368 | 159369 | 159370 | 160937 | 160938 | 160939 | 161169 | 161170 | 161171 | 161174 | 161175 | 161176 | 161233 | 161234