From ac0a389921d37b81a84cc738dd21f10e4d9e7991 Mon Sep 17 00:00:00 2001 From: Terran McCanna Date: Thu, 12 Nov 2020 14:46:30 -0500 Subject: [PATCH] PINES Carousel Customizations for 3.10 OPAC: PINES Carousel Implementation Adds carousel display with custom carousel picker to home page. Signed-off-by: Terran McCanna OPAC: Carousel - Animate Enable ability for carousel to automatically advance every 2 seconds. Signed-off-by: Terran McCanna OPAC: restore books image for carousels Signed-off-by: Chris Sharp LP1929872 Open Carousel as a Result List This adds a new link in the carousel block that will open the contents of that carousel in a result list format so that a patron can see everything at once. Signed-off-by: Terran McCanna Carousel - moving logic to open carousel as a list into new API Signed-off-by: Terran McCanna LP1929872 Make carousel title into link (instead of having a new link under the title) Signed-off-by: Terran McCanna LP1929872 Fixing link PINES OPAC Carousel CSS Adds additional CSS for iframe usage that overrides the basic OPAC usage CSS. Signed-off-by: Terran McCanna PINES - Add list icon next to carousel title Signed-off-by: Terran McCanna --- .../lib/OpenILS/Application/Actor/Carousel.pm | 3 +- Open-ILS/src/templates-bootstrap/opac/carousel.tt2 | 51 ++++++++ .../src/templates-bootstrap/opac/css/style.css.tt2 | 80 +++++++++++-- .../templates-bootstrap/opac/parts/homesearch.tt2 | 19 ++- .../templates-bootstrap/opac/parts/misc_util.tt2 | 12 +- .../opac/parts/org_selector.tt2 | 133 +++++++++++++++++++++ Open-ILS/web/images/books.jpg | Bin 0 -> 33945 bytes 7 files changed, 282 insertions(+), 16 deletions(-) create mode 100644 Open-ILS/web/images/books.jpg diff --git a/Open-ILS/src/perlmods/lib/OpenILS/Application/Actor/Carousel.pm b/Open-ILS/src/perlmods/lib/OpenILS/Application/Actor/Carousel.pm index cc5d0ec13b..ce4137f409 100644 --- a/Open-ILS/src/perlmods/lib/OpenILS/Application/Actor/Carousel.pm +++ b/Open-ILS/src/perlmods/lib/OpenILS/Application/Actor/Carousel.pm @@ -34,7 +34,8 @@ sub get_carousel_contents { my $carousel = $e->retrieve_container_carousel($id); my $ret = { id => $id, - name => $carousel->name + name => $carousel->name, + bucketid => $carousel->bucket }; my $q = { select => { bre => ['id'], mfde => [{ column => 'value', alias => 'title' }] }, diff --git a/Open-ILS/src/templates-bootstrap/opac/carousel.tt2 b/Open-ILS/src/templates-bootstrap/opac/carousel.tt2 index bf54466b32..a2ca14412c 100644 --- a/Open-ILS/src/templates-bootstrap/opac/carousel.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/carousel.tt2 @@ -6,3 +6,54 @@ PROCESS carousels; END -%] + + \ No newline at end of file diff --git a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 index 50cdd289ab..3911e5bab1 100755 --- a/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/css/style.css.tt2 @@ -3863,8 +3863,8 @@ label[for*=expert_] */ .carousel { - width: 80%; - margin: 0 auto; + width: 50%; + margin-left: 450px; } .carousel-title { font-size: 150%; @@ -3876,7 +3876,7 @@ label[for*=expert_] margin: 0px 3px; } .carousel-entry { - max-width: 150px; + max-width: 130px; } /* Truncate titles within carousel to 4 lines */ @@ -3888,8 +3888,9 @@ label[for*=expert_] } .carousel-entry-image { - width: 100%; - height: auto; + width: auto; + height: 160px; + border: 1px solid #999; } .carousel .glide__arrow { color: [% css_colors.button_text %]; @@ -3904,10 +3905,75 @@ label[for*=expert_] display: inline-block; } .carousel .glide__arrow--right { - right: -6em; + right: -5em; } .carousel .glide__arrow--left { - left: -6em; + left: -7em; +} + +/* PINES Carousel customizations */ +#carousel_selector { + width: 300px; +} + +.pines_carousel_selector { + float: left; + text-align: center; + height: 250px; + width: 350px; + margin-left: 0px; + margin-right: 40px; +} + +.pines_carousel_selector_image { + height: 150px; +} + +.pines_carousel_selector_text { + font-size: 125%; + font-weight: bold; + color: #006838; +} + +@media only screen and (max-width: 1200px) { + .carousel { + margin-left: 430px; + width: 40%; + } + .carousel-entry-image { + width: auto; + height: 90px; + border: 1px solid #999; + } +} + +@media only screen and (max-width: 1000px) { + .carousel { + margin: auto; + width: 80%; + } + .carousel-entry-image { + width: auto; + height: 100px; + border: 1px solid #999; + } + .pines_carousel_selector { + float: none; + text-align: center; + height: 80px; + width: 100%; + margin: auto; + margin-top: -50px; + margin-bottom: 40px; + } + .pines_carousel_selector_image { + display: none; + } + .pines_carousel_selector_text { + font-size: 125%; + font-weight: bold; + color: #006838; + } } .search-filter{ diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/homesearch.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/homesearch.tt2 index 229d4429d6..cde1bcc6a2 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/homesearch.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/homesearch.tt2 @@ -1,5 +1,16 @@ - + + + + + + + [% PROCESS carousels %] + -[% PROCESS carousels %] diff --git a/Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 b/Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 index 7e976fd347..71a1fcb272 100755 --- a/Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 +++ b/Open-ILS/src/templates-bootstrap/opac/parts/misc_util.tt2 @@ -805,9 +805,9 @@ [%- BLOCK carousels; config = { - animated => 0, - animation_interval => 5, - width => 5, + animated => 1, + animation_interval => 2, + width => 4, sm_width => 3, xs_width => 2, }; @@ -834,7 +834,11 @@ IF carousel.bibs.size > 0; %]