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
Expand all
Inline Side-by-side
Showing 19 changed files with 272 additions and 61 deletions
......@@ -36,28 +36,112 @@ $carousel_style = get_field('carousel_style');
<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> ">
<?php switch($carousel_style){
case 'promo': ?>
case 'video': ?>
<?php if( have_rows('promo_items') ): ?>
<div class=" carousel-items promo-carousel">
<div class='swiper-wrapper'>
<?php while( the_repeater_field('promo_items') ): ?>
<?php $page = get_sub_field('page'); ?>
<?php $index = get_row_index();
$modalId = 'modal-' .$index; ?>
<div class="swiper-slide">
<div class="carousel-content">
<a href="javascript:void(0)" class="video_open" data-bs-toggle="modal" data-bs-target="#<?php echo $modalId; ?>" >
<div class="promo-image video" >
<?php $image = get_sub_field('place_holder');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" loading="eager" />
<?php endif; ?>
</div>
<div class="promo-text"><?php echo get_sub_field('title'); ?></div>
</a>
</div>
</div>
<?php endwhile; ?>
</div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
</div>
<?php if( have_rows('promo_items') ): ?>
<?php while( the_repeater_field('promo_items') ): ?>
<?php $index = get_row_index();
$modalId = 'modal-' .$index; ?>
<?php $iframe = get_sub_field('video');
// Use preg_match to find iframe src.
preg_match('/src="(.+?)"/', $iframe, $matches);
$src = $matches[1];
// Add extra parameters to src and replace HTML.
$params = array(
'controls' => 1,
'hd' => 1,
'autohide' => 1,
'enablejsapi' => 1,
'version' =>3,
);
$new_src = add_query_arg($params, $src);
$iframe = str_replace($src, $new_src, $iframe);
error_log($src);
error_log($iframe);
// Add extra attributes to iframe HTML.
$attributes = 'frameborder="0"';
$iframe = str_replace('></iframe>', ' ' . $attributes . '></iframe>', $iframe);
$iframe = str_replace('<iframe', '<iframe class="yt_player_iframe" ', $iframe);
error_log($iframe); ?>
<div class="modal" id="<?php echo $modalId; ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<?php echo $iframe; ?>
</div>
</div>
</div>
</div>
<script>
var myModalEl = document.getElementById('<?php echo $modalId ?>')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
jQuery('.yt_player_iframe').each(function(){
this.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')
});
});
</script>
<?php endwhile; ?>
<?php endif; ?>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
<?php break;
case 'pdf': ?>
<?php if( have_rows('promo_items') ): ?>
<div class=" carousel-items promo-carousel pdf-carousel">
<div class='swiper-wrapper'>
<?php while( the_repeater_field('promo_items') ): ?>
<?php $page = get_sub_field('pdf'); ?>
<div class="swiper-slide">
<div class="carousel-content">
<div class="promo-image" >
<?php $image = get_the_post_thumbnail_url( $page->ID, 'medium' );
$thumbnail_id = get_post_meta( $page->ID, '_thumbnail_id', true );
$img_alt = get_post_meta ( $thumbnail_id, '_wp_attachment_image_alt', true );
if(!$img_alt){
$img_alt = get_the_title($thumbnail_id);
}
?>
<a href="<?php echo $page ?>" class="pdf_open" >
<div class="promo-image pdf" >
<?php $image = get_sub_field('place_holder');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" loading="eager" />
<?php endif; ?>
<img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager">
</div>
<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>
<div class="promo-text"><?php echo get_sub_field('title'); ?></div>
</a>
</div>
</div>
......@@ -65,7 +149,8 @@ $carousel_style = get_field('carousel_style');
</div>
<div class="swiper-button-prev" data-id="<?= $id ?>"></div>
<div class="swiper-button-next" data-id="<?= $id ?>"></div>
</div>
</div>
<?php else: ?>
<p>Please add some slides.</p>
<?php endif; ?>
......
......@@ -6061,8 +6061,8 @@ textarea.form-control-lg {
--bs-modal-padding: 1rem;
--bs-modal-margin: 0.5rem;
--bs-modal-color: ;
--bs-modal-bg: #fff;
--bs-modal-border-color: var(--bs-border-color-translucent);
--bs-modal-bg: transparent;
--bs-modal-border-color: transparent;
--bs-modal-border-width: 1px;
--bs-modal-border-radius: 0.5rem;
--bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
......@@ -6070,12 +6070,12 @@ textarea.form-control-lg {
--bs-modal-header-padding-x: 1rem;
--bs-modal-header-padding-y: 1rem;
--bs-modal-header-padding: 1rem 1rem;
--bs-modal-header-border-color: var(--bs-border-color);
--bs-modal-header-border-color: transparent;
--bs-modal-header-border-width: 1px;
--bs-modal-title-line-height: 1.5;
--bs-modal-footer-gap: 0.5rem;
--bs-modal-footer-bg: ;
--bs-modal-footer-border-color: var(--bs-border-color);
--bs-modal-footer-border-color: transparent;
--bs-modal-footer-border-width: 1px;
position: fixed;
top: 0;
......@@ -6880,9 +6880,9 @@ textarea.form-control-lg {
--bs-offcanvas-padding-x: 1rem;
--bs-offcanvas-padding-y: 1rem;
--bs-offcanvas-color: ;
--bs-offcanvas-bg: #fff;
--bs-offcanvas-bg: transparent;
--bs-offcanvas-border-width: 1px;
--bs-offcanvas-border-color: var(--bs-border-color-translucent);
--bs-offcanvas-border-color: transparent;
--bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
......@@ -19890,6 +19890,8 @@ ul.sf_date_field .sf-datepicker {
@media only screen and (max-width: 48.875rem) {
.header_text.mobile {
display: block;
max-width: 85vw;
overflow: hidden;
}
}
......@@ -20301,38 +20303,20 @@ ul.sf_date_field .sf-datepicker {
line-height: 1.25rem;
}
.swiper-pagination-bullet {
background: #fff !important;
border: 0.125rem solid #2c2c2c !important;
height: 0.625rem !important;
width: 0.625rem !important;
border-radius: 0% !important;
background-color: #666666 !important;
border: 0.0625rem solid #666666 !important;
opacity: 0.25 !important;
}
.swiper-pagination-bullet-active {
opacity: 1 !important;
}
.swiper-pagination {
bottom: -2.5rem !important;
}
.carousel:not(.is-admin) {
background-color: transparent !important;
left: -5%;
width: 110%;
margin-top: 24px;
margin-bottom: 24px;
padding: 0rem 3.125rem;
height: 280px;
}
@media only screen and (max-width: 67.063rem) {
.carousel:not(.is-admin) {
left: 0%;
width: 100vw;
padding: 0rem 0rem;
overflow: scroll;
}
}
......@@ -20360,18 +20344,27 @@ ul.sf_date_field .sf-datepicker {
width: 340px;
height: 186px;
overflow: hidden;
padding: 0px 4px;
background-color: #F2F2F2;
transition: all 0.5s ease-in-out;
}
@media only screen and (max-width: 67.063rem) {
.promo-image {
min-height: 186px !important;
max-height: 186px !important;
max-width: 340px;
min-width: 340px;
max-width: 80vw;
min-width: 80vw;
}
}
.promo-image img {
width: 100%;
transition: all 0.5s ease-in-out;
}
.promo-image.pdf {
width: 270px;
}
.promo-image.pdf img {
width: auto;
}
.promo-carousel h2, .promo-carousel .h2 {
......@@ -20391,6 +20384,26 @@ ul.sf_date_field .sf-datepicker {
font-size: 1rem;
line-height: 1.5rem;
text-align: left;
color: #000;
text-decoration: none;
max-width: 320px;
}
.promo-carousel .pdf_open,
.promo-carousel .video_open {
text-decoration: none !important;
font-weight: bold;
}
.promo-carousel .pdf_open:hover,
.promo-carousel .video_open:hover {
text-decoration: underline !important;
}
.promo-carousel .pdf_open:hover .promo-image,
.promo-carousel .video_open:hover .promo-image {
background-color: #c2c2c2;
}
.promo-carousel .pdf_open:hover .promo-image img,
.promo-carousel .video_open:hover .promo-image img {
filter: brightness(0.5);
}
.promo-carousel .understrap-read-more-link {
font-weight: bold;
......@@ -20401,6 +20414,25 @@ ul.sf_date_field .sf-datepicker {
text-decoration: underline;
}
.swiper-pagination-bullet {
background: #fff !important;
border: 0.125rem solid #2c2c2c !important;
height: 0.625rem !important;
width: 0.625rem !important;
border-radius: 0% !important;
background-color: #666666 !important;
border: 0.0625rem solid #666666 !important;
opacity: 0.25 !important;
}
.swiper-pagination-bullet-active {
opacity: 1 !important;
}
.swiper-pagination {
bottom: -2.5rem !important;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
pointer-events: all !important;
......@@ -20492,6 +20524,18 @@ ul.sf_date_field .sf-datepicker {
@media only screen and (max-width: 67.063rem) {
.swiper-slide {
margin-right: 24px;
max-width: 80vw;
min-width: 80vw;
}
}
.pdf-carousel .swiper-slide {
width: 270px !important;
}
@media only screen and (max-width: 67.063rem) {
.pdf-carousel .swiper-slide {
width: auto !important;
margin-right: 24px;
}
}
......@@ -20506,6 +20550,44 @@ ul.sf_date_field .sf-datepicker {
}
}
.modal.show {
background: rgba(0, 0, 0, 0.6);
}
.modal-backdrop {
display: none !important;
}
.modal-header .btn-close {
opacity: 1 !important;
}
.modal-header .btn-close:hover {
filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
}
.modal-body iframe {
width: 100%;
height: 100%;
min-height: 60vh;
margin: auto;
}
.promo-image.video {
position: relative;
}
.promo-image.video:after {
content: "";
position: absolute;
width: 66px;
height: 66px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
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>');
}
.pojo-a11y-grayscale {
overflow-y: scroll !important;
}
......@@ -20525,6 +20607,7 @@ ul.sf_date_field .sf-datepicker {
#pojo-a11y-toolbar {
position: relative;
top: 1.25rem;
z-index: 999 !important;
}
@media screen and (max-width: 62.5rem) {
#pojo-a11y-toolbar {
......@@ -20537,7 +20620,7 @@ ul.sf_date_field .sf-datepicker {
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
z-index: 9999 !important;
z-index: 999 !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a {
......@@ -21190,6 +21273,7 @@ ul.sf_date_field .sf-datepicker {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: all 0.5s ease-in-out;
}
.news-and-stories-block ul .article-card.lg a {
gap: 0;
......@@ -21219,11 +21303,15 @@ ul.sf_date_field .sf-datepicker {
color: #699;
text-decoration: underline;
}
.news-and-stories-block ul .article-card:hover img {
filter: brightness(0.5);
}
.article-card {
max-width: 31rem;
min-width: 31rem;
min-height: 8.438rem;
margin-right: 24px;
margin-right: 12px;
}
.article-card a {
color: white;
......@@ -21350,6 +21438,13 @@ ul.sf_date_field .sf-datepicker {
color: #fff;
font-weight: bold;
}
@media only screen and (min-width: 67.063rem) {
.load-more-link-out {
margin: auto;
display: block;
width: 300px;
}
}
.load-more-link-out:hover {
background: #669999;
......@@ -21377,12 +21472,12 @@ ul.sf_date_field .sf-datepicker {
}
.mobile-article-list ul {
flex-wrap: nowrap;
width: 1800px;
width: 1400px;
}
.mobile-article-list .sm,
.mobile-article-list .lg {
max-width: 340px;
min-width: 340px;
max-width: 80vw;
min-width: 80vw;
}
.mobile-article-list .sm .image,
.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.
......@@ -127,4 +127,18 @@ function megamenu_override_default_theme($value) {
// return $custom_logo_attr;
// } ,10,3);
\ No newline at end of file
function getName() {
$characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$randomString = '';
$n=10;
for ($i = 0; $i < $n; $i++) {
$index = rand(0, strlen($characters) - 1);
$randomString .= $characters[$index];
}
return $randomString;
}
\ No newline at end of file
......
......@@ -26127,7 +26127,7 @@
var thisSwiper = this;
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesOffsetAfter: 0,
slidesOffsetAfter: 100,
slidesOffsetBefore: 0,
spaceBetween: 24,
// centeredSlides: true,
......@@ -26187,7 +26187,7 @@
if (size == 2) {
li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>";
if (post_obj['img_src']) {
li += "<div class='image large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>";
li += "<div class='image large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>";
}
if (post_obj['title'].length > 100) {
li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>";
......@@ -26201,7 +26201,7 @@
} else {
li += "<li class='article-card sm'><a href='" + post_obj['href'] + "'>";
if (post_obj['img_src']) {
li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>";
li += "<div class='image'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div></div>";
}
if (post_obj['title'].length > 100) {
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($) {
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesOffsetAfter: 0,
slidesOffsetAfter: 100,
slidesOffsetBefore: 0,
spaceBetween: 24,
// centeredSlides: true,
......@@ -89,4 +89,6 @@ jQuery(document).ready(function($) {
// });
});
\ No newline at end of file
......
......@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) {
if(size == 2) {
li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>";
if(post_obj['img_src']) {
li += "<div class='image large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>";
li += "<div class='image large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div></div>";
}
if(post_obj['title'].length > 100) {
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) {
} else {
li += "<li class='article-card sm'><a href='"+post_obj['href']+"'>";
if(post_obj['img_src']) {
li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>";
li += "<div class='image'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div></div>";
}
if(post_obj['title'].length > 100) {
li += "<div class='content reduce'><p>"+post_obj['title']+"</p>";
......
......@@ -7,6 +7,12 @@ $purple: #5533ff; // Thats a sample how you could change a BootStrap variable.
$primary: #000; // Once we've changed the value, we'll also make it the primary brand color.
$modal-header-border-color: transparent;
$modal-footer-border-color: transparent;
$modal-content-bg: transparent;
$modal-content-border-color: transparent;
@font-face {
font-family: "PT Sans",sans-serif; font-weight:bold;
src: local("/../fonts/PTSans-Bold.ttf");
......
......@@ -476,5 +476,7 @@ h1{
}
@media only screen and (max-width: 48.875rem) {
display: block;
max-width: 85vw;
overflow: hidden;
}
}
......
......@@ -22,7 +22,7 @@
#pojo-a11y-toolbar{
position: relative;
top: 1.25rem;
z-index: 999 !important;
@media screen and (max-width: 62.5rem){
top: 0rem;
}
......@@ -32,7 +32,7 @@
right: 0rem !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle{
z-index: 9999 !important;
z-index: 999 !important;
}
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle a{
......
......@@ -69,6 +69,7 @@
height: 100%;
width: 100%;
object-fit: cover;
transition: all 0.5s ease-in-out;
}
a {
gap:0;
......@@ -105,6 +106,7 @@
text-decoration: underline;
}
img {
filter: brightness(0.5);
// transform: scale(1.05);
//opacity: 0.8;
}
......@@ -119,7 +121,7 @@
max-width: 31rem;
min-width: 31rem;
min-height: 8.438rem;
margin-right: 24px;
margin-right: 12px;
a {
color:white;
gap: 1.625rem;
......@@ -254,6 +256,11 @@
font-size: 14px;
color: #fff;
font-weight: bold;
@media only screen and (min-width: 67.063rem) {
margin: auto;
display: block;
width: 300px;
}
}
.load-more-link-out:hover{
background: #669999;
......@@ -283,12 +290,12 @@
width: 100vw;
ul{
flex-wrap: nowrap;
width: 1800px;
width: 1400px;
}
.sm,
.lg{
max-width: 340px ;
min-width: 340px ;
max-width: 80vw;
min-width: 80vw;
.image{
position: relative;
min-height: 186px;
......