Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
bdf10794 by Jeff Balicki
Options

slider 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 06c376b5
Inline Side-by-side
Showing 19 changed files with 439 additions and 112 deletions
...@@ -36,28 +36,112 @@ $carousel_style = get_field('carousel_style'); ...@@ -36,28 +36,112 @@ $carousel_style = get_field('carousel_style');
36 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> "> 36 <div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
37 <?php switch($carousel_style){ 37 <?php switch($carousel_style){
38 38
39 case 'promo': ?> 39 case 'video': ?>
40 40
41 <?php if( have_rows('promo_items') ): ?> 41 <?php if( have_rows('promo_items') ): ?>
42 <div class=" carousel-items promo-carousel"> 42 <div class=" carousel-items promo-carousel">
43 <div class='swiper-wrapper'> 43 <div class='swiper-wrapper'>
44 <?php while( the_repeater_field('promo_items') ): ?> 44 <?php while( the_repeater_field('promo_items') ): ?>
45 <?php $page = get_sub_field('page'); ?> 45 <?php $index = get_row_index();
46 $modalId = 'modal-' .$index; ?>
46 <div class="swiper-slide"> 47 <div class="swiper-slide">
47 <div class="carousel-content"> 48 <div class="carousel-content">
49 <a href="javascript:void(0)" class="video_open" data-bs-toggle="modal" data-bs-target="#<?php echo $modalId; ?>" >
50 <div class="promo-image video" >
51 <?php $image = get_sub_field('place_holder');
52 if( !empty( $image ) ): ?>
53 <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" loading="eager" />
54 <?php endif; ?>
55 </div>
56 <div class="promo-text"><?php echo get_sub_field('title'); ?></div>
57 </a>
58 </div>
59 </div>
48 60
49 61
50 <div class="promo-image" > 62 <?php endwhile; ?>
51 <?php $image = get_the_post_thumbnail_url( $page->ID, 'medium' ); 63 </div>
52 $thumbnail_id = get_post_meta( $page->ID, '_thumbnail_id', true ); 64 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
53 $img_alt = get_post_meta ( $thumbnail_id, '_wp_attachment_image_alt', true ); 65 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
54 if(!$img_alt){ 66 </div>
55 $img_alt = get_the_title($thumbnail_id); 67 <?php if( have_rows('promo_items') ): ?>
56 } 68 <?php while( the_repeater_field('promo_items') ): ?>
57 ?> 69 <?php $index = get_row_index();
70 $modalId = 'modal-' .$index; ?>
71 <?php $iframe = get_sub_field('video');
72
73 // Use preg_match to find iframe src.
74 preg_match('/src="(.+?)"/', $iframe, $matches);
75 $src = $matches[1];
76
77
78
79 // Add extra parameters to src and replace HTML.
80 $params = array(
81 'controls' => 1,
82 'hd' => 1,
83 'autohide' => 1,
84 'enablejsapi' => 1,
85 'version' =>3,
86
87 );
88 $new_src = add_query_arg($params, $src);
89 $iframe = str_replace($src, $new_src, $iframe);
90 error_log($src);
91 error_log($iframe);
92 // Add extra attributes to iframe HTML.
93 $attributes = 'frameborder="0"';
94 $iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);
95 $iframe = str_replace('<iframe', '<iframe class="yt_player_iframe" ', $iframe);
96 error_log($iframe); ?>
97 <div class="modal" id="<?php echo $modalId; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
98 <div class="modal-dialog modal-dialog-centered modal-xl">
99 <div class="modal-content">
100 <div class="modal-header">
101 <h5 class="modal-title"></h5>
102 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
103 </div>
104 <div class="modal-body">
105 <?php echo $iframe; ?>
106 </div>
107 </div>
108 </div>
109 </div>
110 <script>
111 var myModalEl = document.getElementById('<?php echo $modalId ?>')
112 myModalEl.addEventListener('hidden.bs.modal', function (event) {
113 jQuery('.yt_player_iframe').each(function(){
114 this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
115 });
116 });
117 </script>
118 <?php endwhile; ?>
119 <?php endif; ?>
120 <?php else: ?>
121 <p>Please add some slides.</p>
122 <?php endif; ?>
123
124 <?php break;
125 case 'pdf': ?>
126
127 <?php if( have_rows('promo_items') ): ?>
128 <div class=" carousel-items promo-carousel pdf-carousel">
129 <div class='swiper-wrapper'>
130 <?php while( the_repeater_field('promo_items') ): ?>
131 <?php $page = get_sub_field('pdf'); ?>
132 <div class="swiper-slide">
133 <div class="carousel-content">
134 <a href="<?php echo $page ?>" class="pdf_open" >
135 <div class="promo-image pdf" >
136 <?php $image = get_sub_field('place_holder');
137 if( !empty( $image ) ): ?>
138 <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" loading="eager" />
139 <?php endif; ?>
58 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager"> 140 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager">
59 </div> 141 </div>
60 <div class="promo-text"><a class="understrap-read-more-link" href="<?php echo get_permalink($page->ID);?>"><?php echo get_the_title($page->ID); ?></a></div> 142 <div class="promo-text"><?php echo get_sub_field('title'); ?></div>
143 </a>
144
61 145
62 </div> 146 </div>
63 </div> 147 </div>
...@@ -66,6 +150,7 @@ $carousel_style = get_field('carousel_style'); ...@@ -66,6 +150,7 @@ $carousel_style = get_field('carousel_style');
66 <div class="swiper-button-prev" data-id="<?= $id ?>"></div> 150 <div class="swiper-button-prev" data-id="<?= $id ?>"></div>
67 <div class="swiper-button-next" data-id="<?= $id ?>"></div> 151 <div class="swiper-button-next" data-id="<?= $id ?>"></div>
68 </div> 152 </div>
153
69 <?php else: ?> 154 <?php else: ?>
70 <p>Please add some slides.</p> 155 <p>Please add some slides.</p>
71 <?php endif; ?> 156 <?php endif; ?>
......
...@@ -6061,8 +6061,8 @@ textarea.form-control-lg { ...@@ -6061,8 +6061,8 @@ textarea.form-control-lg {
6061 --bs-modal-padding: 1rem; 6061 --bs-modal-padding: 1rem;
6062 --bs-modal-margin: 0.5rem; 6062 --bs-modal-margin: 0.5rem;
6063 --bs-modal-color: ; 6063 --bs-modal-color: ;
6064 --bs-modal-bg: #fff; 6064 --bs-modal-bg: transparent;
6065 --bs-modal-border-color: var(--bs-border-color-translucent); 6065 --bs-modal-border-color: transparent;
6066 --bs-modal-border-width: 1px; 6066 --bs-modal-border-width: 1px;
6067 --bs-modal-border-radius: 0.5rem; 6067 --bs-modal-border-radius: 0.5rem;
6068 --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 6068 --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
...@@ -6070,12 +6070,12 @@ textarea.form-control-lg { ...@@ -6070,12 +6070,12 @@ textarea.form-control-lg {
6070 --bs-modal-header-padding-x: 1rem; 6070 --bs-modal-header-padding-x: 1rem;
6071 --bs-modal-header-padding-y: 1rem; 6071 --bs-modal-header-padding-y: 1rem;
6072 --bs-modal-header-padding: 1rem 1rem; 6072 --bs-modal-header-padding: 1rem 1rem;
6073 --bs-modal-header-border-color: var(--bs-border-color); 6073 --bs-modal-header-border-color: transparent;
6074 --bs-modal-header-border-width: 1px; 6074 --bs-modal-header-border-width: 1px;
6075 --bs-modal-title-line-height: 1.5; 6075 --bs-modal-title-line-height: 1.5;
6076 --bs-modal-footer-gap: 0.5rem; 6076 --bs-modal-footer-gap: 0.5rem;
6077 --bs-modal-footer-bg: ; 6077 --bs-modal-footer-bg: ;
6078 --bs-modal-footer-border-color: var(--bs-border-color); 6078 --bs-modal-footer-border-color: transparent;
6079 --bs-modal-footer-border-width: 1px; 6079 --bs-modal-footer-border-width: 1px;
6080 position: fixed; 6080 position: fixed;
6081 top: 0; 6081 top: 0;
...@@ -6880,9 +6880,9 @@ textarea.form-control-lg { ...@@ -6880,9 +6880,9 @@ textarea.form-control-lg {
6880 --bs-offcanvas-padding-x: 1rem; 6880 --bs-offcanvas-padding-x: 1rem;
6881 --bs-offcanvas-padding-y: 1rem; 6881 --bs-offcanvas-padding-y: 1rem;
6882 --bs-offcanvas-color: ; 6882 --bs-offcanvas-color: ;
6883 --bs-offcanvas-bg: #fff; 6883 --bs-offcanvas-bg: transparent;
6884 --bs-offcanvas-border-width: 1px; 6884 --bs-offcanvas-border-width: 1px;
6885 --bs-offcanvas-border-color: var(--bs-border-color-translucent); 6885 --bs-offcanvas-border-color: transparent;
6886 --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); 6886 --bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
6887 } 6887 }
6888 6888
...@@ -19890,6 +19890,8 @@ ul.sf_date_field .sf-datepicker { ...@@ -19890,6 +19890,8 @@ ul.sf_date_field .sf-datepicker {
19890 @media only screen and (max-width: 48.875rem) { 19890 @media only screen and (max-width: 48.875rem) {
19891 .header_text.mobile { 19891 .header_text.mobile {
19892 display: block; 19892 display: block;
19893 max-width: 85vw;
19894 overflow: hidden;
19893 } 19895 }
19894 } 19896 }
19895 19897
...@@ -20301,38 +20303,20 @@ ul.sf_date_field .sf-datepicker { ...@@ -20301,38 +20303,20 @@ ul.sf_date_field .sf-datepicker {
20301 line-height: 1.25rem; 20303 line-height: 1.25rem;
20302 } 20304 }
20303 20305
20304 .swiper-pagination-bullet {
20305 background: #fff !important;
20306 border: 0.125rem solid #2c2c2c !important;
20307 height: 0.625rem !important;
20308 width: 0.625rem !important;
20309 border-radius: 0% !important;
20310 background-color: #666666 !important;
20311 border: 0.0625rem solid #666666 !important;
20312 opacity: 0.25 !important;
20313 }
20314
20315 .swiper-pagination-bullet-active {
20316 opacity: 1 !important;
20317 }
20318
20319 .swiper-pagination {
20320 bottom: -2.5rem !important;
20321 }
20322
20323 .carousel:not(.is-admin) { 20306 .carousel:not(.is-admin) {
20324 background-color: transparent !important; 20307 background-color: transparent !important;
20325 left: -5%; 20308 left: -5%;
20326 width: 110%; 20309 width: 110%;
20327 margin-top: 24px; 20310 margin-top: 24px;
20311 margin-bottom: 24px;
20328 padding: 0rem 3.125rem; 20312 padding: 0rem 3.125rem;
20313 height: 280px;
20329 } 20314 }
20330 @media only screen and (max-width: 67.063rem) { 20315 @media only screen and (max-width: 67.063rem) {
20331 .carousel:not(.is-admin) { 20316 .carousel:not(.is-admin) {
20332 left: 0%; 20317 left: 0%;
20333 width: 100vw; 20318 width: 100vw;
20334 padding: 0rem 0rem; 20319 padding: 0rem 0rem;
20335 overflow: scroll;
20336 } 20320 }
20337 } 20321 }
20338 20322
...@@ -20360,18 +20344,27 @@ ul.sf_date_field .sf-datepicker { ...@@ -20360,18 +20344,27 @@ ul.sf_date_field .sf-datepicker {
20360 width: 340px; 20344 width: 340px;
20361 height: 186px; 20345 height: 186px;
20362 overflow: hidden; 20346 overflow: hidden;
20363 padding: 0px 4px; 20347 background-color: #F2F2F2;
20348 transition: all 0.5s ease-in-out;
20364 } 20349 }
20365 @media only screen and (max-width: 67.063rem) { 20350 @media only screen and (max-width: 67.063rem) {
20366 .promo-image { 20351 .promo-image {
20367 min-height: 186px !important; 20352 min-height: 186px !important;
20368 max-height: 186px !important; 20353 max-height: 186px !important;
20369 max-width: 340px; 20354 max-width: 80vw;
20370 min-width: 340px; 20355 min-width: 80vw;
20371 } 20356 }
20372 } 20357 }
20373 .promo-image img { 20358 .promo-image img {
20374 width: 100%; 20359 width: 100%;
20360 transition: all 0.5s ease-in-out;
20361 }
20362
20363 .promo-image.pdf {
20364 width: 270px;
20365 }
20366 .promo-image.pdf img {
20367 width: auto;
20375 } 20368 }
20376 20369
20377 .promo-carousel h2, .promo-carousel .h2 { 20370 .promo-carousel h2, .promo-carousel .h2 {
...@@ -20391,6 +20384,26 @@ ul.sf_date_field .sf-datepicker { ...@@ -20391,6 +20384,26 @@ ul.sf_date_field .sf-datepicker {
20391 font-size: 1rem; 20384 font-size: 1rem;
20392 line-height: 1.5rem; 20385 line-height: 1.5rem;
20393 text-align: left; 20386 text-align: left;
20387 color: #000;
20388 text-decoration: none;
20389 max-width: 320px;
20390 }
20391 .promo-carousel .pdf_open,
20392 .promo-carousel .video_open {
20393 text-decoration: none !important;
20394 font-weight: bold;
20395 }
20396 .promo-carousel .pdf_open:hover,
20397 .promo-carousel .video_open:hover {
20398 text-decoration: underline !important;
20399 }
20400 .promo-carousel .pdf_open:hover .promo-image,
20401 .promo-carousel .video_open:hover .promo-image {
20402 background-color: #c2c2c2;
20403 }
20404 .promo-carousel .pdf_open:hover .promo-image img,
20405 .promo-carousel .video_open:hover .promo-image img {
20406 filter: brightness(0.5);
20394 } 20407 }
20395 .promo-carousel .understrap-read-more-link { 20408 .promo-carousel .understrap-read-more-link {
20396 font-weight: bold; 20409 font-weight: bold;
...@@ -20401,6 +20414,25 @@ ul.sf_date_field .sf-datepicker { ...@@ -20401,6 +20414,25 @@ ul.sf_date_field .sf-datepicker {
20401 text-decoration: underline; 20414 text-decoration: underline;
20402 } 20415 }
20403 20416
20417 .swiper-pagination-bullet {
20418 background: #fff !important;
20419 border: 0.125rem solid #2c2c2c !important;
20420 height: 0.625rem !important;
20421 width: 0.625rem !important;
20422 border-radius: 0% !important;
20423 background-color: #666666 !important;
20424 border: 0.0625rem solid #666666 !important;
20425 opacity: 0.25 !important;
20426 }
20427
20428 .swiper-pagination-bullet-active {
20429 opacity: 1 !important;
20430 }
20431
20432 .swiper-pagination {
20433 bottom: -2.5rem !important;
20434 }
20435
20404 .swiper-button-next.swiper-button-disabled, 20436 .swiper-button-next.swiper-button-disabled,
20405 .swiper-button-prev.swiper-button-disabled { 20437 .swiper-button-prev.swiper-button-disabled {
20406 pointer-events: all !important; 20438 pointer-events: all !important;
...@@ -20492,6 +20524,18 @@ ul.sf_date_field .sf-datepicker { ...@@ -20492,6 +20524,18 @@ ul.sf_date_field .sf-datepicker {
20492 @media only screen and (max-width: 67.063rem) { 20524 @media only screen and (max-width: 67.063rem) {
20493 .swiper-slide { 20525 .swiper-slide {
20494 margin-right: 24px; 20526 margin-right: 24px;
20527 max-width: 80vw;
20528 min-width: 80vw;
20529 }
20530 }
20531
20532 .pdf-carousel .swiper-slide {
20533 width: 270px !important;
20534 }
20535 @media only screen and (max-width: 67.063rem) {
20536 .pdf-carousel .swiper-slide {
20537 width: auto !important;
20538 margin-right: 24px;
20495 } 20539 }
20496 } 20540 }
20497 20541
...@@ -20506,6 +20550,44 @@ ul.sf_date_field .sf-datepicker { ...@@ -20506,6 +20550,44 @@ ul.sf_date_field .sf-datepicker {
20506 } 20550 }
20507 } 20551 }
20508 20552
20553 .modal.show {
20554 background: rgba(0, 0, 0, 0.6);
20555 }
20556
20557 .modal-backdrop {
20558 display: none !important;
20559 }
20560
20561 .modal-header .btn-close {
20562 opacity: 1 !important;
20563 }
20564
20565 .modal-header .btn-close:hover {
20566 filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
20567 }
20568
20569 .modal-body iframe {
20570 width: 100%;
20571 height: 100%;
20572 min-height: 60vh;
20573 margin: auto;
20574 }
20575
20576 .promo-image.video {
20577 position: relative;
20578 }
20579
20580 .promo-image.video:after {
20581 content: "";
20582 position: absolute;
20583 width: 66px;
20584 height: 66px;
20585 left: 50%;
20586 top: 50%;
20587 transform: translate(-50%, -50%);
20588 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.928" height="65.928" viewBox="0 0 65.928 65.928"><defs><clipPath id="clip-path"><rect id="Rectangle_250" data-name="Rectangle 250" width="65.928" height="65.928" fill="%23fff"/></clipPath></defs><g id="Group_1994" data-name="Group 1994" opacity="0.6"><g id="Group_1914" data-name="Group 1914"><path id="Path_1401" data-name="Path 1401" d="M112.886,81.243,91.2,94.52V67.966Z" transform="translate(-66.167 -48.109)" fill="%23fff"/><g id="Group_1516" data-name="Group 1516"><g id="Group_1515" data-name="Group 1515" clip-path="url(%23clip-path)"><path id="Path_1402" data-name="Path 1402" d="M32.964,65.928A32.964,32.964,0,1,1,65.929,32.964,33,33,0,0,1,32.964,65.928m0-57.886A24.922,24.922,0,1,0,57.887,32.964,24.95,24.95,0,0,0,32.964,8.042" fill="%23fff"/></g></g></g></g></svg>');
20589 }
20590
20509 .pojo-a11y-grayscale { 20591 .pojo-a11y-grayscale {
20510 overflow-y: scroll !important; 20592 overflow-y: scroll !important;
20511 } 20593 }
...@@ -20525,6 +20607,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -20525,6 +20607,7 @@ ul.sf_date_field .sf-datepicker {
20525 #pojo-a11y-toolbar { 20607 #pojo-a11y-toolbar {
20526 position: relative; 20608 position: relative;
20527 top: 1.25rem; 20609 top: 1.25rem;
20610 z-index: 999 !important;
20528 } 20611 }
20529 @media screen and (max-width: 62.5rem) { 20612 @media screen and (max-width: 62.5rem) {
20530 #pojo-a11y-toolbar { 20613 #pojo-a11y-toolbar {
...@@ -20537,7 +20620,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -20537,7 +20620,7 @@ ul.sf_date_field .sf-datepicker {
20537 } 20620 }
20538 20621
20539 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle { 20622 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
20540 z-index: 9999 !important; 20623 z-index: 999 !important;
20541 } 20624 }
20542 20625
20543 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a { 20626 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
...@@ -21190,6 +21273,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -21190,6 +21273,7 @@ ul.sf_date_field .sf-datepicker {
21190 width: 100%; 21273 width: 100%;
21191 -o-object-fit: cover; 21274 -o-object-fit: cover;
21192 object-fit: cover; 21275 object-fit: cover;
21276 transition: all 0.5s ease-in-out;
21193 } 21277 }
21194 .news-and-stories-block ul .article-card.lg a { 21278 .news-and-stories-block ul .article-card.lg a {
21195 gap: 0; 21279 gap: 0;
...@@ -21219,11 +21303,15 @@ ul.sf_date_field .sf-datepicker { ...@@ -21219,11 +21303,15 @@ ul.sf_date_field .sf-datepicker {
21219 color: #699; 21303 color: #699;
21220 text-decoration: underline; 21304 text-decoration: underline;
21221 } 21305 }
21306 .news-and-stories-block ul .article-card:hover img {
21307 filter: brightness(0.5);
21308 }
21309
21222 .article-card { 21310 .article-card {
21223 max-width: 31rem; 21311 max-width: 31rem;
21224 min-width: 31rem; 21312 min-width: 31rem;
21225 min-height: 8.438rem; 21313 min-height: 8.438rem;
21226 margin-right: 24px; 21314 margin-right: 12px;
21227 } 21315 }
21228 .article-card a { 21316 .article-card a {
21229 color: white; 21317 color: white;
...@@ -21350,6 +21438,13 @@ ul.sf_date_field .sf-datepicker { ...@@ -21350,6 +21438,13 @@ ul.sf_date_field .sf-datepicker {
21350 color: #fff; 21438 color: #fff;
21351 font-weight: bold; 21439 font-weight: bold;
21352 } 21440 }
21441 @media only screen and (min-width: 67.063rem) {
21442 .load-more-link-out {
21443 margin: auto;
21444 display: block;
21445 width: 300px;
21446 }
21447 }
21353 21448
21354 .load-more-link-out:hover { 21449 .load-more-link-out:hover {
21355 background: #669999; 21450 background: #669999;
...@@ -21377,12 +21472,12 @@ ul.sf_date_field .sf-datepicker { ...@@ -21377,12 +21472,12 @@ ul.sf_date_field .sf-datepicker {
21377 } 21472 }
21378 .mobile-article-list ul { 21473 .mobile-article-list ul {
21379 flex-wrap: nowrap; 21474 flex-wrap: nowrap;
21380 width: 1800px; 21475 width: 1400px;
21381 } 21476 }
21382 .mobile-article-list .sm, 21477 .mobile-article-list .sm,
21383 .mobile-article-list .lg { 21478 .mobile-article-list .lg {
21384 max-width: 340px; 21479 max-width: 80vw;
21385 min-width: 340px; 21480 min-width: 80vw;
21386 } 21481 }
21387 .mobile-article-list .sm .image, 21482 .mobile-article-list .sm .image,
21388 .mobile-article-list .lg .image { 21483 .mobile-article-list .lg .image {
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -128,3 +128,17 @@ function megamenu_override_default_theme($value) { ...@@ -128,3 +128,17 @@ function megamenu_override_default_theme($value) {
128 // } ,10,3); 128 // } ,10,3);
129 129
130 130
131
132
133
134 function getName() {
135 $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
136 $randomString = '';
137 $n=10;
138 for ($i = 0; $i < $n; $i++) {
139 $index = rand(0, strlen($characters) - 1);
140 $randomString .= $characters[$index];
141 }
142
143 return $randomString;
144 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -26127,7 +26127,7 @@ ...@@ -26127,7 +26127,7 @@
26127 var thisSwiper = this; 26127 var thisSwiper = this;
26128 var swiper_params = { 26128 var swiper_params = {
26129 modules: [Navigation, Pagination, A11y, Keyboard], 26129 modules: [Navigation, Pagination, A11y, Keyboard],
26130 slidesOffsetAfter: 0, 26130 slidesOffsetAfter: 100,
26131 slidesOffsetBefore: 0, 26131 slidesOffsetBefore: 0,
26132 spaceBetween: 24, 26132 spaceBetween: 24,
26133 // centeredSlides: true, 26133 // centeredSlides: true,
...@@ -26187,7 +26187,7 @@ ...@@ -26187,7 +26187,7 @@
26187 if (size == 2) { 26187 if (size == 2) {
26188 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>"; 26188 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>";
26189 if (post_obj['img_src']) { 26189 if (post_obj['img_src']) {
26190 li += "<div class='image large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>"; 26190 li += "<div class='image large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>";
26191 } 26191 }
26192 if (post_obj['title'].length > 100) { 26192 if (post_obj['title'].length > 100) {
26193 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>"; 26193 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>";
...@@ -26201,7 +26201,7 @@ ...@@ -26201,7 +26201,7 @@
26201 } else { 26201 } else {
26202 li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>"; 26202 li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>";
26203 if (post_obj['img_src']) { 26203 if (post_obj['img_src']) {
26204 li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>"; 26204 li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>";
26205 } 26205 }
26206 if (post_obj['title'].length > 100) { 26206 if (post_obj['title'].length > 100) {
26207 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p>"; 26207 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p>";
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -25,7 +25,7 @@ jQuery(document).ready(function($) { ...@@ -25,7 +25,7 @@ jQuery(document).ready(function($) {
25 25
26 var swiper_params = { 26 var swiper_params = {
27 modules: [Navigation, Pagination, A11y, Keyboard], 27 modules: [Navigation, Pagination, A11y, Keyboard],
28 slidesOffsetAfter: 0, 28 slidesOffsetAfter: 100,
29 slidesOffsetBefore: 0, 29 slidesOffsetBefore: 0,
30 spaceBetween: 24, 30 spaceBetween: 24,
31 // centeredSlides: true, 31 // centeredSlides: true,
...@@ -89,4 +89,6 @@ jQuery(document).ready(function($) { ...@@ -89,4 +89,6 @@ jQuery(document).ready(function($) {
89 // }); 89 // });
90 90
91 91
92
93
92 }); 94 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) { ...@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) {
7 if(size == 2) { 7 if(size == 2) {
8 li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>"; 8 li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>";
9 if(post_obj['img_src']) { 9 if(post_obj['img_src']) {
10 li += "<div class='image large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>"; 10 li += "<div class='image large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div></div>";
11 } 11 }
12 if(post_obj['title'].length > 100) { 12 if(post_obj['title'].length > 100) {
13 li += "<div class='content reduce'><p>"+post_obj['title']+"</p><span class='anchor-dots'></span></div>"; 13 li += "<div class='content reduce'><p>"+post_obj['title']+"</p><span class='anchor-dots'></span></div>";
...@@ -21,7 +21,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) { ...@@ -21,7 +21,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) {
21 } else { 21 } else {
22 li += "<li class='article-card sm'><a href='"+post_obj['href']+"'>"; 22 li += "<li class='article-card sm'><a href='"+post_obj['href']+"'>";
23 if(post_obj['img_src']) { 23 if(post_obj['img_src']) {
24 li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>"; 24 li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div></div>";
25 } 25 }
26 if(post_obj['title'].length > 100) { 26 if(post_obj['title'].length > 100) {
27 li += "<div class='content reduce'><p>"+post_obj['title']+"</p>"; 27 li += "<div class='content reduce'><p>"+post_obj['title']+"</p>";
......
1 .swiper-pagination-bullet {
2 background: #fff !important;
3 border: 0.125rem solid #2c2c2c !important;
4 height: 0.625rem !important;
5 width: 0.625rem !important;
6 border-radius: 0% !important;
7 background-color: #666666 !important;
8 border: 0.0625rem solid #666666 !important;
9 opacity: 0.25 !important;
10 }
11 .swiper-pagination-bullet-active {
12 opacity: 1 !important;
13 }
14
15 .swiper-pagination{
16 bottom: -2.5rem !important;
17 }
18 // carousel css 1 // carousel css
19 .carousel:not(.is-admin) { 2 .carousel:not(.is-admin) {
20 background-color: transparent !important; 3 background-color: transparent !important;
21 left: -5%; 4 left: -5%;
22 width: 110%; 5 width: 110%;
23 margin-top:24px; 6 margin-top: 24px;
7 margin-bottom: 24px;
24 padding: 0rem 3.125rem; 8 padding: 0rem 3.125rem;
25 9 height: 280px;
26 @media only screen and (max-width:67.063rem) { 10 @media only screen and (max-width:67.063rem) {
27 left: 0%; 11 left: 0%;
28 width: 100vw; 12 width: 100vw;
29 padding: 0rem 0rem; 13 padding: 0rem 0rem;
30 overflow: scroll;
31 }
32
33 14
15 }
34 16
35 } 17 }
36 18
...@@ -44,65 +26,135 @@ ...@@ -44,65 +26,135 @@
44 //max-width: 75rem; 26 //max-width: 75rem;
45 margin: 0 auto; 27 margin: 0 auto;
46 overflow: hidden; 28 overflow: hidden;
29
47 @media only screen and (max-width:67.063rem) { 30 @media only screen and (max-width:67.063rem) {
48 overflow: scroll; 31 overflow: scroll;
49 } 32 }
50 33
51 } 34 }
52 .carousel-content{
53 //padding: 0rem 3.125rem;
54 height: 260px;
55 35
36 .carousel-content {
37 height: 260px;
56 } 38 }
57 .promo-image{ 39
40 .promo-image {
58 width: 340px; 41 width: 340px;
59 height: 186px; 42 height: 186px;
60 overflow: hidden; 43 overflow: hidden;
61 padding: 0px 4px; 44 background-color: #F2F2F2;
45 transition: all 0.5s ease-in-out;
62 46
63 @media only screen and (max-width:67.063rem) { 47 @media only screen and (max-width:67.063rem) {
64 min-height: 186px!important; 48 min-height: 186px !important;
65 max-height: 186px!important; 49 max-height: 186px !important;
66 max-width: 340px; 50 max-width: 80vw;
67 min-width: 340px; 51 min-width: 80vw;
68 52
69 } 53 }
70 54
71 img{ 55 img {
72 width: 100%; 56 width: 100%;
57 transition: all 0.5s ease-in-out;
73 } 58 }
74 } 59 }
75 .promo-carousel{ 60
76 h2{ 61 .promo-image.pdf {
62 width: 270px;
63
64 img {
65 width: auto;
66 }
67 }
68
69 .promo-carousel {
70 h2 {
77 font-size: 1.5rem; 71 font-size: 1.5rem;
78 line-height: 1.875rem; 72 line-height: 1.875rem;
79 text-align: left; 73 text-align: left;
80 } 74 }
81 p{ 75
76 p {
82 font-size: 1rem; 77 font-size: 1rem;
83 line-height: 1.5rem; 78 line-height: 1.5rem;
84 text-align: left; 79 text-align: left;
85 } 80 }
86 .promo-text{ 81
82 .promo-text {
87 margin-left: 0px; 83 margin-left: 0px;
88 margin-top: 24px; 84 margin-top: 24px;
89 text-align: left; 85 text-align: left;
90 font-size: 1rem; 86 font-size: 1rem;
91 line-height: 1.5rem; 87 line-height: 1.5rem;
92 text-align: left; 88 text-align: left;
89 color: #000;
90 text-decoration: none;
91 max-width: 320px;
93 92
94 } 93 }
95 .understrap-read-more-link{ 94
95 .pdf_open,
96 .video_open {
97 text-decoration: none !important;
98 font-weight: bold;
99 }
100
101 .pdf_open:hover,
102 .video_open:hover {
103 text-decoration: underline !important;
104
105 .promo-image {
106 background-color: #c2c2c2;
107
108 img {
109 filter: brightness(0.5);
110
111 }
112 }
113
114 }
115
116
117 .understrap-read-more-link {
96 font-weight: bold; 118 font-weight: bold;
97 text-transform: capitalize; 119 text-transform: capitalize;
98 text-decoration: none; 120 text-decoration: none;
99 121
100 } 122 }
101 .understrap-read-more-link:hover{ 123
102 text-decoration:underline; 124 .understrap-read-more-link:hover {
125 text-decoration: underline;
103 } 126 }
104 } 127 }
105 128
129 .pdf-carousel{
130 .carousel-content{
131 //width: 270px;
132 }
133 }
134
135 //swiper controls
136
137
138 .swiper-pagination-bullet {
139 background: #fff !important;
140 border: 0.125rem solid #2c2c2c !important;
141 height: 0.625rem !important;
142 width: 0.625rem !important;
143 border-radius: 0% !important;
144 background-color: #666666 !important;
145 border: 0.0625rem solid #666666 !important;
146 opacity: 0.25 !important;
147 }
148
149 .swiper-pagination-bullet-active {
150 opacity: 1 !important;
151 }
152
153 .swiper-pagination {
154 bottom: -2.5rem !important;
155 }
156
157
106 .swiper-button-next.swiper-button-disabled, 158 .swiper-button-next.swiper-button-disabled,
107 .swiper-button-prev.swiper-button-disabled { 159 .swiper-button-prev.swiper-button-disabled {
108 pointer-events: all !important; 160 pointer-events: all !important;
...@@ -113,21 +165,22 @@ height: 260px; ...@@ -113,21 +165,22 @@ height: 260px;
113 } 165 }
114 166
115 167
116 168 .swiper-button-prev {
117 .swiper-button-prev{
118 background-color: #EE0000; 169 background-color: #EE0000;
119 width:2.1875rem !important; 170 width: 2.1875rem !important;
120 height:2.1875rem !important; 171 height: 2.1875rem !important;
121 border: 0rem solid #EE0000; 172 border: 0rem solid #EE0000;
122 border-radius: 1.25rem; 173 border-radius: 1.25rem;
123 display: none; 174 display: none;
124 left: -15px !important; 175 left: -15px !important;
125 top:calc(50% - 1rem) !important; 176 top: calc(50% - 1rem) !important;
177
126 @media only screen and (max-width:67.063rem) { 178 @media only screen and (max-width:67.063rem) {
127 display: none !important; 179 display: none !important;
128 } 180 }
129 &:after{ 181
130 content:"" !important; 182 &:after {
183 content: "" !important;
131 width: 0.6875rem; 184 width: 0.6875rem;
132 height: 1.125rem; 185 height: 1.125rem;
133 background-repeat: no-repeat; 186 background-repeat: no-repeat;
...@@ -137,6 +190,7 @@ height: 260px; ...@@ -137,6 +190,7 @@ height: 260px;
137 position: absolute; 190 position: absolute;
138 top: 0.5rem; 191 top: 0.5rem;
139 left: 11px; 192 left: 11px;
193
140 @media only screen and (max-width:67.063rem) { 194 @media only screen and (max-width:67.063rem) {
141 display: none; 195 display: none;
142 } 196 }
...@@ -144,22 +198,24 @@ height: 260px; ...@@ -144,22 +198,24 @@ height: 260px;
144 198
145 } 199 }
146 200
147 .swiper-button-next{ 201 .swiper-button-next {
148 background-color: #EE0000; 202 background-color: #EE0000;
149 203
150 right: 0rem !important; 204 right: 0rem !important;
151 top:calc(50% - 1rem) !important; 205 top: calc(50% - 1rem) !important;
152 206
153 width:2.1875rem !important; 207 width: 2.1875rem !important;
154 height:2.1875rem !important; 208 height: 2.1875rem !important;
155 border: 0rem solid #EE0000; 209 border: 0rem solid #EE0000;
156 border-radius: 1.25rem; 210 border-radius: 1.25rem;
157 display: none; 211 display: none;
212
158 @media only screen and (max-width:67.063rem) { 213 @media only screen and (max-width:67.063rem) {
159 display: none !important; 214 display: none !important;
160 } 215 }
161 &:after{ 216
162 content:"" !important; 217 &:after {
218 content: "" !important;
163 width: 0.6875rem; 219 width: 0.6875rem;
164 height: 1.125rem; 220 height: 1.125rem;
165 background-repeat: no-repeat; 221 background-repeat: no-repeat;
...@@ -170,6 +226,7 @@ height: 260px; ...@@ -170,6 +226,7 @@ height: 260px;
170 position: absolute; 226 position: absolute;
171 top: 0.5rem; 227 top: 0.5rem;
172 left: 0.8125rem; 228 left: 0.8125rem;
229
173 @media only screen and (max-width:67.063rem) { 230 @media only screen and (max-width:67.063rem) {
174 display: none; 231 display: none;
175 } 232 }
...@@ -178,24 +235,39 @@ height: 260px; ...@@ -178,24 +235,39 @@ height: 260px;
178 } 235 }
179 236
180 .swiper-button-next:hover, 237 .swiper-button-next:hover,
181 .swiper-button-prev:hover{ 238 .swiper-button-prev:hover {
182 background-color: #669999; 239 background-color: #669999;
183 } 240 }
184 241
185 242
186 .swiper-slide{ 243 .swiper-slide {
187 width: auto !important; 244 width: auto !important;
188 flex-shrink: 0; 245 flex-shrink: 0;
189 display: block; 246 display: block;
190 height: 100%; 247 height: 100%;
191 max-height: 100%; 248 max-height: 100%;
249
192 @media only screen and (max-width:67.063rem) { 250 @media only screen and (max-width:67.063rem) {
193 margin-right: 24px; 251 margin-right: 24px;
252 max-width: 80vw;
253 min-width: 80vw;
194 } 254 }
195 255
196 } 256 }
257 .pdf-carousel{
258 .swiper-slide {
259 width: 270px !important;
260 @media only screen and (max-width:67.063rem) {
261 width: auto !important;
262 margin-right: 24px;
263 }
264 }
265 }
266 .swiper-slide:last-of-type {
267 //padding-right: 50px !important;
268 }
197 269
198 .swiper-wrapper{ 270 .swiper-wrapper {
199 max-height: 100%; 271 max-height: 100%;
200 height: 100%; 272 height: 100%;
201 display: flex; 273 display: flex;
...@@ -204,4 +276,48 @@ height: 260px; ...@@ -204,4 +276,48 @@ height: 260px;
204 width: auto; 276 width: auto;
205 } 277 }
206 278
279 }
280
281
282 //video modal
283
284
285 .modal.show {
286 background: rgba(0, 0, 0, 0.6);
287 }
288
289 .modal-backdrop {
290 display: none !important;
291 }
292
293 .modal-header .btn-close {
294 opacity: 1 !important;
295 }
296
297 .modal-header .btn-close:hover {
298 filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
299 }
300
301 .modal-body {
302 iframe {
303 width: 100%;
304 height: 100%;
305 min-height: 60vh;
306 margin: auto;
207 } 307 }
308 }
309
310 .promo-image.video {
311 position: relative;
312 }
313
314 .promo-image.video:after {
315 content: "";
316 position: absolute;
317 width: 66px;
318 height: 66px;
319 left: 50%;
320 top: 50%;
321 transform: translate(-50%, -50%);
322 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.928" height="65.928" viewBox="0 0 65.928 65.928"><defs><clipPath id="clip-path"><rect id="Rectangle_250" data-name="Rectangle 250" width="65.928" height="65.928" fill="%23fff"/></clipPath></defs><g id="Group_1994" data-name="Group 1994" opacity="0.6"><g id="Group_1914" data-name="Group 1914"><path id="Path_1401" data-name="Path 1401" d="M112.886,81.243,91.2,94.52V67.966Z" transform="translate(-66.167 -48.109)" fill="%23fff"/><g id="Group_1516" data-name="Group 1516"><g id="Group_1515" data-name="Group 1515" clip-path="url(%23clip-path)"><path id="Path_1402" data-name="Path 1402" d="M32.964,65.928A32.964,32.964,0,1,1,65.929,32.964,33,33,0,0,1,32.964,65.928m0-57.886A24.922,24.922,0,1,0,57.887,32.964,24.95,24.95,0,0,0,32.964,8.042" fill="%23fff"/></g></g></g></g></svg>');
323 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -7,6 +7,12 @@ $purple: #5533ff; // Thats a sample how you could change a BootStrap variable. ...@@ -7,6 +7,12 @@ $purple: #5533ff; // Thats a sample how you could change a BootStrap variable.
7 $primary: #000; // Once we've changed the value, we'll also make it the primary brand color. 7 $primary: #000; // Once we've changed the value, we'll also make it the primary brand color.
8 8
9 9
10 $modal-header-border-color: transparent;
11 $modal-footer-border-color: transparent;
12 $modal-content-bg: transparent;
13 $modal-content-border-color: transparent;
14
15
10 @font-face { 16 @font-face {
11 font-family: "PT Sans",sans-serif; font-weight:bold; 17 font-family: "PT Sans",sans-serif; font-weight:bold;
12 src: local("/../fonts/PTSans-Bold.ttf"); 18 src: local("/../fonts/PTSans-Bold.ttf");
......
...@@ -476,5 +476,7 @@ h1{ ...@@ -476,5 +476,7 @@ h1{
476 } 476 }
477 @media only screen and (max-width: 48.875rem) { 477 @media only screen and (max-width: 48.875rem) {
478 display: block; 478 display: block;
479 max-width: 85vw;
480 overflow: hidden;
479 } 481 }
480 } 482 }
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 #pojo-a11y-toolbar{ 22 #pojo-a11y-toolbar{
23 position: relative; 23 position: relative;
24 top: 1.25rem; 24 top: 1.25rem;
25 25 z-index: 999 !important;
26 @media screen and (max-width: 62.5rem){ 26 @media screen and (max-width: 62.5rem){
27 top: 0rem; 27 top: 0rem;
28 } 28 }
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 right: 0rem !important; 32 right: 0rem !important;
33 } 33 }
34 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{ 34 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{
35 z-index: 9999 !important; 35 z-index: 999 !important;
36 36
37 } 37 }
38 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{ 38 #pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{
......
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
69 height: 100%; 69 height: 100%;
70 width: 100%; 70 width: 100%;
71 object-fit: cover; 71 object-fit: cover;
72 transition: all 0.5s ease-in-out;
72 } 73 }
73 a { 74 a {
74 gap:0; 75 gap:0;
...@@ -105,6 +106,7 @@ ...@@ -105,6 +106,7 @@
105 text-decoration: underline; 106 text-decoration: underline;
106 } 107 }
107 img { 108 img {
109 filter: brightness(0.5);
108 // transform: scale(1.05); 110 // transform: scale(1.05);
109 //opacity: 0.8; 111 //opacity: 0.8;
110 } 112 }
...@@ -119,7 +121,7 @@ ...@@ -119,7 +121,7 @@
119 max-width: 31rem; 121 max-width: 31rem;
120 min-width: 31rem; 122 min-width: 31rem;
121 min-height: 8.438rem; 123 min-height: 8.438rem;
122 margin-right: 24px; 124 margin-right: 12px;
123 a { 125 a {
124 color:white; 126 color:white;
125 gap: 1.625rem; 127 gap: 1.625rem;
...@@ -254,6 +256,11 @@ ...@@ -254,6 +256,11 @@
254 font-size: 14px; 256 font-size: 14px;
255 color: #fff; 257 color: #fff;
256 font-weight: bold; 258 font-weight: bold;
259 @media only screen and (min-width: 67.063rem) {
260 margin: auto;
261 display: block;
262 width: 300px;
263 }
257 } 264 }
258 .load-more-link-out:hover{ 265 .load-more-link-out:hover{
259 background: #669999; 266 background: #669999;
...@@ -283,12 +290,12 @@ ...@@ -283,12 +290,12 @@
283 width: 100vw; 290 width: 100vw;
284 ul{ 291 ul{
285 flex-wrap: nowrap; 292 flex-wrap: nowrap;
286 width: 1800px; 293 width: 1400px;
287 } 294 }
288 .sm, 295 .sm,
289 .lg{ 296 .lg{
290 max-width: 340px ; 297 max-width: 80vw;
291 min-width: 340px ; 298 min-width: 80vw;
292 .image{ 299 .image{
293 position: relative; 300 position: relative;
294 min-height: 186px; 301 min-height: 186px;
......