From c0dee705176a4012136f857b2488e74fa3498b01 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 15 Apr 2025 13:23:45 +0000 Subject: [PATCH] Bug 38792: Rename "My virtual card" to "Library card" and move tab This patch makes a number of changes to the "My virtual card" page and associated menu item: 1. Rename it to "Library card." This fits better with the naming of other user pages. This change includes updates to the page title, breadcrumb menu, and page heading. 2. Move the menu item up to appear right after the "Summary" link. 3. Make some style changes to the display of the card, giving the card more comfortable padding and adding some responsive behavior to the card width. To test, apply the patch and rebuild the OPAC CSS. - If necessary, go to Administration -> System preferences and enable the OPACVirtualCard preference. - Log in to the OPAC. - You should see a "Library card" menu item in the left-hand sidebar menu, right below the "Summary" item. - On the "Library card" page, the page title, breadcrumb item, and page heading should read "Your library card." - The "card" should look good, and should adjust well at various browser widths. - Above 769px wide, the card should not expand wider than 500px. - Below 769px wide, the card should have a width of 100% and should adjust as the viewport is narrowed. Sponsored-by: Athens County Public Libraries Signed-off-by: Roman Dolny Signed-off-by: Paul Derscheid --- .../bootstrap/css/src/_responsive.scss | 5 ++ .../opac-tmpl/bootstrap/css/src/opac.scss | 51 ++++++++++--------- .../bootstrap/en/includes/usermenu.inc | 9 ++-- .../bootstrap/en/modules/opac-virtual-card.tt | 32 ++++++------ 4 files changed, 55 insertions(+), 42 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss index c0eb207a7cb..405bda267b7 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_responsive.scss @@ -542,4 +542,9 @@ .koha_url_text { display: inline; } + + #patron-virtual-card { + max-width: 500px; + min-width: 300px; + } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index 5f182f644ab..21071965df6 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2935,38 +2935,43 @@ $star-selected: #EDB867; } #patron-virtual-card { + border: 1px solid #BBB; + border-radius: 15px; + box-shadow: 5px 5px 6px rgba( 4, 0, 0, .2 ); + margin: 1rem 0; + padding: 1rem; width: 100%; - min-width: 300px; - max-width: 500px; +} + +#image-container { + padding: 0 .5rem; +} + +#patron-image { border-radius: 15px; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; - align-items: flex-start; + flex-shrink: 1; + width: auto; +} - #image-container { - width: 100%; - #patron-image { - height: 75%; - width: auto; - border-radius: 15px; - padding: 0.5rem; - } - } +#card-details { + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 0 .5rem; +} - #barcode-container { +#barcode-container { + margin-bottom: 1rem; + + svg { + display: block; width: 100%; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; - &.qrcode { - width: 50%; // Set a smaller width for QR codes - } } - #lib-container { - width: 100%; - #patron-lib { - padding-left: 0.5rem; - } + &.qrcode { + width: 50%; // Set a smaller width for QR codes } } diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/usermenu.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/usermenu.inc index cf37dcc1586..894b317dcc3 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/usermenu.inc +++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/usermenu.inc @@ -4,6 +4,11 @@ [% END %] diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt index 9526bd950a7..b0a9980c3ba 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt +++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-virtual-card.tt @@ -7,7 +7,7 @@ [% SET OpacNav = AdditionalContents.get( location => "OpacNav", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %] [% SET OpacNavBottom = AdditionalContents.get( location => "OpacNavBottom", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %] [% INCLUDE 'doc-head-open.inc' %] -My virtual card › [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog +Your library card › [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog [% INCLUDE 'doc-head-close.inc' %] [% BLOCK cssinclude %] [% END %] @@ -21,7 +21,7 @@ [% INCLUDE 'patron-title.inc' patron = logged_in_user %] [% END %] [% WRAPPER breadcrumb_item bc_active= 1 %] - My virtual card + Your library card [% END %] [% END #/ WRAPPER breadcrumbs %] @@ -30,25 +30,27 @@
-
-

My virtual card

+
+

Your library card

[% IF ( display_patron_image ) %]
[% END %] -
- -
-
-

Library: [% Branches.GetName( patron.branchcode ) | html %]

-
-
-

Card number: [% patron.cardnumber | html %]

-
-
-

Expiration date: [% patron.dateexpiry | $KohaDates %]

+
+
+ +
+
+

Library: [% Branches.GetName( patron.branchcode ) | html %]

+
+
+

Card number: [% patron.cardnumber | html %]

+
+
+

Expiration date: [% patron.dateexpiry | $KohaDates %]

+
-- 2.39.5