From cb6fabbb12d5c476d2468db5b52ae8fb619fa9bd 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 --- .../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 c0eb207a7c..405bda267b 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 5f182f644a..21071965df 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 cf37dcc158..894b317dcc 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 ddd0b72b0a..36c4747a8a 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