Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
67f46a03 by Jeff Balicki
Options

mobile 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 260eea0f
Inline Side-by-side
Showing 17 changed files with 305 additions and 131 deletions
......@@ -46,7 +46,7 @@ $carousel_style = get_field('carousel_style');
<div class="swiper-slide">
<div class="carousel-content">
<div class="row">
<div class="promo-image" >
<?php $image = get_the_post_thumbnail_url( $page->ID, 'medium' );
$thumbnail_id = get_post_meta( $page->ID, '_thumbnail_id', true );
......@@ -58,7 +58,7 @@ $carousel_style = get_field('carousel_style');
<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>
</div>
</div>
<?php endwhile; ?>
......
......@@ -15687,6 +15687,12 @@ body {
width: 100%;
}
@media only screen and (max-width: 62.5rem) {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
padding: 0px 0px 14px 28px;
margin-top: 0px !important;
}
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
z-index: 999;
border-radius: 0;
......@@ -16595,7 +16601,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
display: inline-block;
position: absolute;
top: 1.1rem;
right: 10px;
right: 20px;
transform: rotate(90deg);
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link:after {
......@@ -16638,7 +16644,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
margin: 0.625rem auto 0rem auto;
color: #fff;
background-color: #EE0000;
border-radius: 1.25rem;
border-radius: 20px;
text-align: left;
height: 2.5rem;
margin-top: 0rem;
......@@ -16750,6 +16756,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
font-style: normal !important;
font-size: 1rem !important;
line-height: 1.25rem !important;
display: none !important;
}
.list-wrapper3 .mega-sub-menu .mega-menu-item a {
color: #000 !important;
......@@ -16766,11 +16773,11 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
}
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after {
content: "×";
font-size: 2.125rem;
font-weight: bold;
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin: 0 0 0 0.525rem;
line-height: 1.2625rem;
margin: 0 0 0 0.6rem;
line-height: 1.3625rem;
}
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
......@@ -19414,6 +19421,18 @@ ul.sf_date_field .sf-datepicker {
padding-top: 31px;
padding-bottom: 20px;
}
@media only screen and (max-width: 48.875rem) {
.full-black {
margin-left: -50px;
margin-right: -50px;
padding-left: 50px;
padding-right: 50px;
width: calc(100vw + 50px);
}
}
.full-black .wp-block-columns {
gap: 0em;
}
.full-black h2, .full-black .h2 {
color: #fff;
font-size: 22px;
......@@ -20164,10 +20183,6 @@ ul.sf_date_field .sf-datepicker {
.wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal a:hover {
color: #699 !important;
}
.admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal {
top: 3px;
}
.promo-area {
width: 100%;
display: flex;
......@@ -20312,9 +20327,11 @@ ul.sf_date_field .sf-datepicker {
margin-top: 24px;
padding: 0rem 3.125rem;
}
@media only screen and (max-width: 48.875rem) {
@media only screen and (max-width: 67.063rem) {
.carousel:not(.is-admin) {
padding-right: 30px !important;
left: 0%;
width: 100vw;
padding: 0rem 0rem;
}
}
......@@ -20332,11 +20349,6 @@ ul.sf_date_field .sf-datepicker {
.carousel-content {
height: 260px;
}
@media only screen and (max-width: 48.875rem) {
.carousel-content {
padding: 0rem 0.625rem;
}
}
.promo-image {
width: 340px;
......@@ -20344,10 +20356,12 @@ ul.sf_date_field .sf-datepicker {
overflow: hidden;
padding: 0px 4px;
}
@media only screen and (max-width: 48.875rem) {
@media only screen and (max-width: 67.063rem) {
.promo-image {
width: 100%;
height: auto;
min-height: 186px !important;
max-height: 186px !important;
max-width: 340px;
min-width: 340px;
}
}
.promo-image img {
......@@ -20372,15 +20386,6 @@ ul.sf_date_field .sf-datepicker {
line-height: 1.5rem;
text-align: left;
}
@media only screen and (max-width: 48.875rem) {
.promo-carousel .promo-text {
margin-left: 0rem;
margin-top: 1.25rem;
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}
}
.promo-carousel .understrap-read-more-link {
font-weight: bold;
text-transform: capitalize;
......@@ -20409,6 +20414,11 @@ ul.sf_date_field .sf-datepicker {
left: -15px !important;
top: calc(50% - 1rem) !important;
}
@media only screen and (max-width: 67.063rem) {
.swiper-button-prev {
display: none !important;
}
}
.swiper-button-prev:after {
content: "" !important;
width: 0.6875rem;
......@@ -20421,6 +20431,11 @@ ul.sf_date_field .sf-datepicker {
top: 0.5rem;
left: 11px;
}
@media only screen and (max-width: 67.063rem) {
.swiper-button-prev:after {
display: none;
}
}
.swiper-button-next {
background-color: #EE0000;
......@@ -20432,9 +20447,9 @@ ul.sf_date_field .sf-datepicker {
border-radius: 1.25rem;
display: none;
}
@media only screen and (max-width: 25rem) {
@media only screen and (max-width: 67.063rem) {
.swiper-button-next {
right: -0.625rem !important;
display: none !important;
}
}
.swiper-button-next:after {
......@@ -20450,12 +20465,31 @@ ul.sf_date_field .sf-datepicker {
top: 0.5rem;
left: 0.8125rem;
}
@media only screen and (max-width: 67.063rem) {
.swiper-button-next:after {
display: none;
}
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: #669999;
}
.swiper-slide {
width: auto !important;
flex-shrink: 0;
display: block;
height: 100%;
max-height: 100%;
}
.swiper-wrapper {
max-height: 100%;
height: 100%;
display: flex;
}
.pojo-a11y-grayscale {
overflow-y: scroll !important;
}
......@@ -21069,6 +21103,11 @@ ul.sf_date_field .sf-datepicker {
justify-content: center;
margin: 24px 0;
}
@media only screen and (max-width: 67.063rem) {
.news-and-stories-block {
display: block;
}
}
.news-and-stories-block .post-list-left-col {
flex-basis: 50%;
display: flex;
......@@ -21090,6 +21129,12 @@ ul.sf_date_field .sf-datepicker {
margin: 0;
gap: 12px;
}
@media only screen and (max-width: 67.063rem) {
.news-and-stories-block ul {
flex-direction: row;
padding-left: 0px !important;
}
}
.news-and-stories-block ul .article-card {
min-height: 117px;
}
......@@ -21098,11 +21143,13 @@ ul.sf_date_field .sf-datepicker {
height: 100%;
text-decoration: none;
}
.news-and-stories-block ul .article-card.lg {
min-height: 28rem;
max-height: 28rem;
@media only screen and (min-width: 67.063rem) {
.news-and-stories-block ul .article-card.lg {
min-height: 28rem;
max-height: 28rem;
}
}
.news-and-stories-block ul .article-card.lg .image-large {
.news-and-stories-block ul .article-card.lg .image.large {
position: relative;
}
.news-and-stories-block ul .article-card.lg .overlay {
......@@ -21160,6 +21207,7 @@ ul.sf_date_field .sf-datepicker {
max-width: 31rem;
min-width: 31rem;
min-height: 8.438rem;
margin-right: 30px;
}
.article-card a {
color: white;
......@@ -21235,18 +21283,22 @@ ul.sf_date_field .sf-datepicker {
width: 100%;
margin-top: 0.938rem;
}
.article-card .image {
flex-basis: 40%;
min-width: 214px;
max-width: 214px;
min-height: 117px;
max-height: 117px;
.article-card .image:not(.large) {
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
position: relative;
}
.article-card .image img {
@media only screen and (min-width: 67.063rem) {
.article-card .image:not(.large) {
flex-basis: 40%;
min-width: 214px;
max-width: 214px;
min-height: 117px;
max-height: 117px;
}
}
.article-card .image:not(.large) img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
......@@ -21292,6 +21344,49 @@ ul.sf_date_field .sf-datepicker {
display: none;
}
@media only screen and (max-width: 67.063rem) {
.post-list-right-col,
.post-list-left-col {
display: none !important;
}
.mobile-article-list {
display: block;
overflow: scroll;
}
.mobile-article-list {
pointer-events: auto;
position: relative;
overflow: scroll;
width: 100vw;
}
.mobile-article-list ul {
flex-wrap: nowrap;
width: 1800px;
}
.mobile-article-list .sm,
.mobile-article-list .lg {
max-width: 340px;
min-width: 340px;
}
.mobile-article-list .sm .image,
.mobile-article-list .lg .image {
position: relative;
min-height: 186px;
max-height: 186px;
}
.mobile-article-list .sm .scale-wrapper,
.mobile-article-list .lg .scale-wrapper {
min-height: 186px !important;
max-height: 186px !important;
overflow: hidden;
position: relative;
}
.mobile-article-list .sm a,
.mobile-article-list .lg a {
flex-direction: column;
height: 100%;
}
}
.has-blue-color,
.has-blue-color:visited {
color: #0d6efd;
......
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.
......@@ -26123,28 +26123,12 @@
jQuery(document).ready(function ($) {
jQuery('.carousel-items').each(function () {
//var offset = ((window.innerWidth - $('#content').width()) / 2) - 28;
//var offsetAfter = ((window.innerWidth - $('#content').width()) / 2) - 28;
var offsetAfter = 0;
var PerView = 3;
var offset = 0;
var space = 20;
var SlidesPerGroup = 3;
var _id = jQuery(this).parent().attr('id');
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
SlidesPerGroup = 1;
space = 0;
offsetAfter = 0;
}
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesPerView: PerView,
slidesOffsetAfter: offsetAfter,
slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup,
slidesOffsetAfter: 0,
slidesOffsetBefore: 0,
spaceBetween: 30,
// centeredSlides: true,
loop: false,
lazy: true,
......@@ -26164,6 +26148,16 @@
keyboard: {
enabled: true,
onlyInViewport: false
},
breakpoints: {
1073: {
slidesPerView: 1,
slidesPerGroup: 1
},
1074: {
slidesPerView: 3,
slidesPerGroup: 3
}
}
};
new Swiper(this, swiper_params);
......@@ -26182,7 +26176,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 class='overlay'></div></div>";
}
if (post_obj['title'].length > 100) {
li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>";
......
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.
......@@ -17,35 +17,14 @@ jQuery(document).ready(function($) {
jQuery('.carousel-items').each(function() {
//var offset = ((window.innerWidth - $('#content').width()) / 2) - 28;
//var offsetAfter = ((window.innerWidth - $('#content').width()) / 2) - 28;
var offsetAfter = 0;
var PerView = 3
var offset =0;
var space = 20;
var SlidesPerGroup= 3;
var _id = jQuery(this).parent().attr('id');
if ($(window).width() < 600) {
offset = 0;
PerView = 1;
SlidesPerGroup = 1;
space = 0;
offsetAfter = 0;
}
var swiper_params = {
modules: [Navigation, Pagination, A11y, Keyboard],
slidesPerView: PerView,
slidesOffsetAfter: offsetAfter,
slidesOffsetBefore: offset,
spaceBetween: space,
slidesPerGroup: SlidesPerGroup ,
slidesOffsetAfter: 0,
slidesOffsetBefore: 0,
spaceBetween: 30,
// centeredSlides: true,
loop: false,
lazy: true,
......@@ -68,6 +47,17 @@ jQuery(document).ready(function($) {
enabled: true,
onlyInViewport: false,
},
breakpoints: {
1073: {
slidesPerView: 1,
slidesPerGroup: 1,
},
1074: {
slidesPerView: 3,
slidesPerGroup: 3,
},
},
};
......
......@@ -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 class='overlay'></div></div>";
}
if(post_obj['title'].length > 100) {
li += "<div class='content reduce'><p>"+post_obj['title']+"</p><span class='anchor-dots'></span></div>";
......
......@@ -22,10 +22,13 @@
width: 110%;
margin-top:24px;
padding: 0rem 3.125rem;
@media only screen and (max-width: 48.875rem) {
padding-right: 30px !important;
//margin-right: -20px !important;
}
@media only screen and (max-width:67.063rem) {
left: 0%;
width: 100vw;
padding: 0rem 0rem;
}
}
.carousel-items {
......@@ -44,19 +47,22 @@
.carousel-content{
//padding: 0rem 3.125rem;
height: 260px;
@media only screen and (max-width: 48.875rem) {
padding: 0rem 0.625rem;
}
}
.promo-image{
width: 340px;
height: 186px;
overflow: hidden;
padding: 0px 4px;
@media only screen and (max-width: 48.875rem) {
width: 100%;
height: auto;
@media only screen and (max-width:67.063rem) {
min-height: 186px!important;
max-height: 186px!important;
max-width: 340px;
min-width: 340px;
}
img{
width: 100%;
}
......@@ -79,13 +85,7 @@ height: 260px;
font-size: 1rem;
line-height: 1.5rem;
text-align: left;
@media only screen and (max-width: 48.875rem) {
margin-left: 0rem;
margin-top: 1.25rem;
font-size: 16px;
line-height: 1.5rem;
text-align: left;
}
}
.understrap-read-more-link{
font-weight: bold;
......@@ -118,7 +118,9 @@ height: 260px;
display: none;
left: -15px !important;
top:calc(50% - 1rem) !important;
@media only screen and (max-width:67.063rem) {
display: none !important;
}
&:after{
content:"" !important;
width: 0.6875rem;
......@@ -130,6 +132,9 @@ height: 260px;
position: absolute;
top: 0.5rem;
left: 11px;
@media only screen and (max-width:67.063rem) {
display: none;
}
}
}
......@@ -139,15 +144,15 @@ height: 260px;
right: 0rem !important;
top:calc(50% - 1rem) !important;
@media only screen and (max-width:25rem) {
right: -0.625rem !important;
}
width:2.1875rem !important;
height:2.1875rem !important;
border: 0rem solid #EE0000;
border-radius: 1.25rem;
display: none;
@media only screen and (max-width:67.063rem) {
display: none !important;
}
&:after{
content:"" !important;
width: 0.6875rem;
......@@ -160,6 +165,9 @@ height: 260px;
position: absolute;
top: 0.5rem;
left: 0.8125rem;
@media only screen and (max-width:67.063rem) {
display: none;
}
}
}
......@@ -169,3 +177,18 @@ height: 260px;
background-color: #669999;
}
.swiper-slide{
width: auto !important;
flex-shrink: 0;
display: block;
height: 100%;
max-height: 100%;
}
.swiper-wrapper{
max-height: 100%;
height: 100%;
display: flex;
}
\ No newline at end of file
......
......@@ -179,6 +179,16 @@
padding-right:calc(50% - 5px);
padding-top: 31px;
padding-bottom: 20px;
@media only screen and (max-width: 48.875rem) {
margin-left: -50px;
margin-right: -50px;
padding-left:50px ;
padding-right:50px;
width: calc(100vw + 50px);
}
.wp-block-columns{
gap: 0em;
}
h2{
color:#fff;
font-size: 22px;
......
......@@ -22,5 +22,5 @@
}
.admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{
top: 3px;
//top: 3px;
}
\ No newline at end of file
......
......@@ -639,6 +639,12 @@
padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
width: 100%;
}
@media only screen and (max-width: 62.5rem) {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
padding:0px 0px 14px 28px;
margin-top: 0px !important;
}
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
z-index: 999;
border-radius: 0;
......
......@@ -183,7 +183,7 @@
display: inline-block;
position: absolute;
top: 1.1rem;
right: 10px;
right: 20px;
transform: rotate(90deg);
}
......@@ -237,7 +237,7 @@
margin: 0.625rem auto 0rem auto;
color:#fff;
background-color: #EE0000;
border-radius: 1.25rem;
border-radius: 20px;
text-align: left;
height: 2.5rem;
margin-top: 0rem;
......@@ -363,6 +363,7 @@
font-style: normal !important;
font-size:1rem !important;;
line-height: 1.25rem !important;;
display: none !important
}
.list-wrapper3 .mega-sub-menu .mega-menu-item a{
......@@ -383,11 +384,11 @@
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after{
content: "\00d7";
font-size: 2.125rem;
font-weight: bold;
font-size: 1.8rem;
font-weight: 700;
color: #fff;
margin: 0 0 0 0.525rem;
line-height: 1.2625rem;
margin: 0 0 0 0.6rem;
line-height: 1.3625rem;
}
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
content: "\f333";
......
......@@ -4,7 +4,9 @@
flex-wrap: wrap;
justify-content: center;
margin:24px 0;
@media only screen and (max-width:67.063rem) {
display: block;
}
.post-list-left-col {
flex-basis: 50%;
display: flex;
......@@ -25,6 +27,10 @@
padding:0;
margin:0;
gap: 12px;
@media only screen and (max-width: 67.063rem) {
flex-direction: row;
padding-left: 0px !important;
}
.article-card {
min-height: 117px;
// max-height: 8.438rem;
......@@ -34,10 +40,11 @@
text-decoration: none;
}
&.lg {
@media only screen and (min-width: 67.063rem) {
min-height: 28rem;
max-height: 28rem;
.image-large{
}
.image.large{
position: relative;
}
.overlay{
......@@ -112,6 +119,7 @@
max-width: 31rem;
min-width: 31rem;
min-height: 8.438rem;
margin-right: 30px;
a {
color:white;
gap: 1.625rem;
......@@ -197,15 +205,18 @@
width: 100%;
margin-top:0.938rem;
}
.image {
flex-basis: 40%;
min-width: 214px;
max-width: 214px;
min-height: 117px;
max-height: 117px;
object-fit: cover;
overflow: hidden;
position: relative;
.image:not(.large) {
@media only screen and (min-width: 67.063rem) {
flex-basis: 40%;
min-width: 214px;
max-width: 214px;
min-height: 117px;
max-height: 117px;
}
object-fit: cover;
overflow: hidden;
position: relative;
img {
object-fit: cover;
height: 100%;
......@@ -250,6 +261,50 @@
}
.mobile-article-list {
display: none;
}
\ No newline at end of file
}
@media only screen and (max-width: 67.063rem) {
.post-list-right-col,
.post-list-left-col{
display: none !important;
}
.mobile-article-list {
display:block;
overflow: scroll;
}
.mobile-article-list{
pointer-events: auto;
position: relative;
overflow: scroll;
width: 100vw;
ul{
flex-wrap: nowrap;
width: 1800px;
}
.sm,
.lg{
max-width: 340px ;
min-width: 340px ;
.image{
position: relative;
min-height: 186px;
max-height: 186px;
}
.scale-wrapper{
min-height: 186px !important;
max-height: 186px !important;
overflow: hidden;
position: relative;
}
a{
flex-direction: column;
height: 100%;
}
}
}
}
......