Skip to content

MSF / msf-climate-hub

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

header 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent a758dbc1
Inline Side-by-side
Showing 13 changed files with 458 additions and 28 deletions
......@@ -14987,18 +14987,20 @@ figure.woocommerce-product-gallery__wrapper {
width: 100%;
background: white;
z-index: 9000;
height: 158px;
height: 168px;
}
#wrapper-navbar #navbarNavDropdown {
width: 100%;
display: flex !important;
align-content: center;
flex-wrap: wrap;
}
#wrapper-navbar #main-menu {
width: 100%;
justify-content: space-evenly;
justify-content: space-between;
}
#wrapper-navbar #main-menu > li:nth-child(n+2) .dropdown-menu {
flex-flow: column wrap-reverse;
margin-right: -5px;
}
#wrapper-navbar #main-menu > li:nth-child(n+2) .dropdown-shadow {
padding: 0 5px !important;
......@@ -15012,7 +15014,7 @@ figure.woocommerce-product-gallery__wrapper {
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.6em solid white;
border-top: 0.6em solid transparent;
border-right: 0.6em solid transparent;
border-bottom: 0;
border-left: 0.6em solid transparent;
......@@ -15031,7 +15033,7 @@ figure.woocommerce-product-gallery__wrapper {
#wrapper-navbar #main-nav {
position: fixed;
width: 100%;
height: 158px;
height: 168px;
padding: 0;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
z-index: 991 !important;
......@@ -15046,10 +15048,45 @@ figure.woocommerce-product-gallery__wrapper {
padding-right: 1rem;
padding-left: 1rem;
}
#wrapper-navbar #main-menu li {
#wrapper-navbar #main-menu .menu-item-has-children {
display: flex;
align-items: center;
flex-direction: column;
width: 23%;
height: 50px;
}
#wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle {
color: #fff;
padding-top: 0.55rem;
padding-right: 3rem;
padding-left: 3rem;
width: 100%;
background-color: #EE0000;
border-radius: 20px;
text-align: center;
height: 40px;
margin-top: 0px;
position: relative;
}
#wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle .title-before-short {
position: relative;
}
#wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle .title-before-short:before {
content: "";
width: 12.74px;
height: 7.73px;
position: absolute;
background-size: contain;
top: 5px;
left: -20px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1491" data-name="Path 1491" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z" transform="translate(0 0)" fill="%23fff"/></svg>');
}
#wrapper-navbar #main-menu .menu-item-has-children a.dropdown-toggle.show {
background-color: #669999;
border-radius: 20px 20px 0px 0px;
height: 60px;
margin-top: 0px;
margin-bottom: -20px;
}
#wrapper-navbar #main-menu > li {
justify-content: flex-end;
......@@ -15062,7 +15099,7 @@ figure.woocommerce-product-gallery__wrapper {
}
#wrapper-navbar .title-before-short {
margin: 0;
color: black;
color: #fff;
text-decoration: none;
white-space: break-spaces;
}
......@@ -15125,7 +15162,7 @@ figure.woocommerce-product-gallery__wrapper {
border: 0;
margin: 0;
padding-bottom: 1rem;
background: none;
background: 0 0;
border-radius: 0;
height: 15.25rem;
max-height: 15.25rem;
......@@ -15134,6 +15171,7 @@ figure.woocommerce-product-gallery__wrapper {
flex-wrap: wrap;
left: auto;
right: 0;
margin-top: 11px;
}
#wrapper-navbar #main-menu .dropdown-menu:before {
content: "";
......@@ -15143,12 +15181,19 @@ figure.woocommerce-product-gallery__wrapper {
top: -10px;
padding-left: 150%;
}
#wrapper-navbar #main-menu .dropdown-menu li {
display: flex;
align-items: center;
flex-direction: column;
}
#wrapper-navbar #main-menu .dropdown-menu > li {
flex: 0;
background: #e5e5e5;
width: 16.25rem;
min-width: 16.25rem;
max-width: 16.25rem;
margin-top: 7px;
justify-content: flex-end;
}
#wrapper-navbar #main-menu .dropdown-menu > li a {
font-family: "PT Sans", sans-serif;
......@@ -15172,6 +15217,17 @@ figure.woocommerce-product-gallery__wrapper {
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
border-left: 1px solid #999;
padding-left: 27px;
margin-left: 37px;
}
.branding {
display: flex;
margin-bottom: 10px;
}
.has-blue-color,
......
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.
......@@ -8,6 +8,9 @@
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
@ini_set( 'upload_max_size' , '100M' );
require_once __DIR__.'/vendor/autoload.php';
require_once __DIR__.'/inc/inc.php';
......
......@@ -24,7 +24,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<!-- Your site branding in the menu -->
<div class="branding">
<?php get_template_part( 'global-templates/navbar-branding' ); ?>
<span class="site-title">MSF CLIMATE HUB</span>
<div class="site-title">MSF CLIMATE HUB</div>
</div>
<button
class="navbar-toggler"
......
......@@ -6743,6 +6743,163 @@
}
})();
// Add your custom JS here.
//In order to do that we have to flex:1 each item.. see flexMatrix
function correctDropdownMenuItemGaps() {
var drop_index = 0;
jQuery('#main-menu > li').each(function () {
var dropdown = jQuery(this).find('.dropdown-menu');
consecutive_normals = 0;
if (dropdown.length > 0) {
var items = jQuery(dropdown).find('li'),
idx = 0,
total_width = 0;
items.each(function (item) {
++idx;
if (flexMatrix(items, idx)) {
items.eq(idx - 1).css('flex', 1);
total_width += items.eq(idx - 1).width();
// if(drop_idx == 2) {
// console.log(total_width)
// }
}
});
if (drop_index >= 3) {
jQuery(this).find('.dropdown-shadow').css('width', total_width);
} else {
jQuery(this).find('.dropdown-shadow').css('width', total_width);
}
}
++drop_index;
});
}
var consecutive_normals = 0;
//Returns true if this menu item should flex:1, it's true if an image is the next item and this item is not a 3rd.. etc.
function flexMatrix(items, current_idx) {
var last_item = items.eq(current_idx - 2);
var next_item = items.eq(current_idx);
var item = items.eq(current_idx - 1);
//if the last item was an image we started a new col so do not break here unless its the last one
if (last_item) {
if (jQuery(last_item).find('img').length > 0 && !next_item) {
return false;
}
}
//if the next item is an image item or this is the last one
if (next_item) {
if (jQuery(next_item).find('img').length > 0) {
consecutive_normals = 0;
return true;
}
}
//last item flex it
if (items.length === current_idx) {
return true;
}
if (jQuery(item).hasClass('break-here')) {
consecutive_normals = 0;
return true;
}
//If this is an image item flex
if (jQuery(item).find('img').length > 0) {
consecutive_normals = 0;
return true;
}
++consecutive_normals;
//If this is a 3rd consecutive normal item
if (consecutive_normals == 3) {
consecutive_normals = 0;
return true;
}
}
//This adjusts the menu dropdown location to never go past the inner edge of the Donate Now button
//and line up with it if so
function lineUpThePositionsOfTheDropdowns() {
var menu_item_widths = [];
jQuery('#main-menu > li').each(function () {
menu_item_widths.push(jQuery(this).outerWidth());
});
//Remove the donate button
menu_item_widths.pop();
var idx = 0;
jQuery('#main-menu > li').each(function () {
if (jQuery(this).find('.dropdown-menu').length > 0) {
if (idx == 0) {
jQuery(this).find('.dropdown-menu').css('left', -100);
} else {
jQuery(this).find('.dropdown-menu').css('right', -100);
}
}
++idx;
});
}
var HeaderMenu = function () {
return {
alignTheSideCaptions: function () {
jQuery('.side-caption').each(function () {
var that = this;
var _bottom = jQuery(this).find('.image-side-caption').innerHeight();
if (!Responsive.isDesktop()) {
if (jQuery(that).parent().is('.entry-header') && !jQuery(that).parent().is('.no-photo')) {
jQuery(that).css('margin-bottom', -_bottom);
var _bottom = jQuery(that).parent().find('.title-container').innerHeight();
jQuery(that).css('bottom', _bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
} else {
jQuery(that).css('bottom', -_bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
}
} else {
jQuery(this).css('bottom', -_bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
}
});
}
};
}();
jQuery(function ($) {
correctDropdownMenuItemGaps();
lineUpThePositionsOfTheDropdowns();
setInterval(function () {
HeaderMenu.alignTheSideCaptions();
}, 1000);
$('.copy-link').on('click', function (e) {
e.preventDefault();
});
var body = document.getElementsByTagName("BODY")[0];
body.offsetWidth;
if (window.addEventListener) {
// all browsers except IE before version 9
window.addEventListener("resize", onResizeEvent, true);
} else {
if (window.attachEvent) {
// IE before version 9
window.attachEvent("onresize", onResizeEvent);
}
}
function onResizeEvent() {
// bodyElement = document.getElementsByTagName("BODY")[0];
// newWidth = bodyElement.offsetWidth;
// if(newWidth != width){
// width = newWidth;
// }
}
});
exports.Alert = alert;
exports.Button = button;
exports.Carousel = carousel;
......
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.
// Add your custom JS here.
//In order to do that we have to flex:1 each item.. see flexMatrix
function correctDropdownMenuItemGaps() {
var drop_index = 0;
jQuery('#main-menu > li').each(function () {
var dropdown = jQuery(this).find('.dropdown-menu');
consecutive_normals = 0;
if (dropdown.length > 0) {
var items = jQuery(dropdown).find('li'),
idx = 0,
total_width = 0;
items.each(function (item) {
++idx;
if (flexMatrix(items, idx)) {
items.eq(idx - 1).css('flex', 1);
total_width += items.eq(idx - 1).width();
// if(drop_idx == 2) {
// console.log(total_width)
// }
}
});
if (drop_index >= 3) {
jQuery(this).find('.dropdown-shadow').css('width', total_width);
} else {
jQuery(this).find('.dropdown-shadow').css('width', total_width);
}
}
++drop_index;
});
}
var consecutive_normals = 0;
//Returns true if this menu item should flex:1, it's true if an image is the next item and this item is not a 3rd.. etc.
function flexMatrix(items, current_idx) {
var last_item = items.eq(current_idx - 2);
var next_item = items.eq(current_idx);
var item = items.eq(current_idx - 1);
//if the last item was an image we started a new col so do not break here unless its the last one
if (last_item) {
if (jQuery(last_item).find('img').length > 0 && !next_item) {
return false;
}
}
//if the next item is an image item or this is the last one
if (next_item) {
if (jQuery(next_item).find('img').length > 0) {
consecutive_normals = 0;
return true;
}
}
//last item flex it
if (items.length === current_idx) {
return true;
}
if (jQuery(item).hasClass('break-here')) {
consecutive_normals = 0;
return true;
}
//If this is an image item flex
if (jQuery(item).find('img').length > 0) {
consecutive_normals = 0;
return true;
}
++consecutive_normals;
//If this is a 3rd consecutive normal item
if (consecutive_normals == 3) {
consecutive_normals = 0;
return true;
}
}
//This adjusts the menu dropdown location to never go past the inner edge of the Donate Now button
//and line up with it if so
function lineUpThePositionsOfTheDropdowns() {
var menu_item_widths = [];
jQuery('#main-menu > li').each(function () {
menu_item_widths.push(jQuery(this).outerWidth());
});
//Remove the donate button
menu_item_widths.pop();
var idx = 0;
jQuery('#main-menu > li').each(function () {
if (jQuery(this).find('.dropdown-menu').length > 0) {
if (idx == 0) {
jQuery(this).find('.dropdown-menu').css('left', -100);
} else {
jQuery(this).find('.dropdown-menu').css('right', -100);
}
}
++idx;
});
}
var HeaderMenu = function () {
return {
alignTheSideCaptions: function () {
jQuery('.side-caption').each(function () {
var that = this;
var _bottom = jQuery(this).find('.image-side-caption').innerHeight();
if (!Responsive.isDesktop()) {
if (jQuery(that).parent().is('.entry-header') && !jQuery(that).parent().is('.no-photo')) {
jQuery(that).css('margin-bottom', -_bottom);
var _bottom = jQuery(that).parent().find('.title-container').innerHeight();
jQuery(that).css('bottom', _bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
} else {
jQuery(that).css('bottom', -_bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
}
} else {
jQuery(this).css('bottom', -_bottom);
setTimeout(function () {
jQuery(that).addClass('ready');
}, 500);
}
});
}
};
}();
jQuery(function ($) {
correctDropdownMenuItemGaps();
lineUpThePositionsOfTheDropdowns();
setInterval(function () {
HeaderMenu.alignTheSideCaptions();
}, 1000);
$('.copy-link').on('click', function (e) {
e.preventDefault();
});
var body = document.getElementsByTagName("BODY")[0];
body.offsetWidth;
if (window.addEventListener) {
// all browsers except IE before version 9
window.addEventListener("resize", onResizeEvent, true);
} else {
if (window.attachEvent) {
// IE before version 9
window.attachEvent("onresize", onResizeEvent);
}
}
function onResizeEvent() {
// bodyElement = document.getElementsByTagName("BODY")[0];
// newWidth = bodyElement.offsetWidth;
// if(newWidth != width){
// width = newWidth;
// }
}
});
\ No newline at end of file
......
......@@ -5,4 +5,16 @@
letter-spacing: 0px;
color: #000000;
text-transform: uppercase;
display: flex;
align-content: flex-end;
flex-wrap: wrap;
border-left: 1px solid #999;
padding-left: 27px;
margin-left: 37px;
}
.branding{
display: flex;
margin-bottom: 10px;
}
......
......@@ -4,17 +4,19 @@
width: 100%;
background:white;
z-index: 9000;
height: 158px;
height: 168px;
#navbarNavDropdown{
width: 100%;
display: flex !important;
align-content: center;
flex-wrap: wrap;
}
#main-menu {
width: 100%;
justify-content: space-evenly;
justify-content: space-between;
& > li:nth-child(n+2) {
.dropdown-menu {
flex-flow: column wrap-reverse;
margin-right: -5px;
}
.dropdown-shadow {
padding:0 5px !important;
......@@ -30,7 +32,7 @@
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.6em solid white;
border-top: 0.6em solid transparent;
border-right: 0.6em solid transparent;
border-bottom: 0;
border-left: 0.6em solid transparent;
......@@ -51,7 +53,7 @@
#main-nav {
position: fixed;
width: 100%;
height: 158px;
height: 168px;
padding:0;
box-shadow: 0px 3px 6px #00000029;
z-index: 991 !important;
......@@ -67,10 +69,49 @@
padding-right: 1rem;
padding-left: 1rem;
}
li {
.menu-item-has-children{
display: flex;
align-items: center;
flex-direction: column;
width: 23%;
height: 50px;
a.dropdown-toggle {
color:#fff;
padding-top:.55rem;
padding-right: 3rem;
padding-left: 3rem;
width: 100%;
background-color: #EE0000;
border-radius: 20px;
text-align: center;
height: 40px;
margin-top: 0px;
position: relative;
.title-before-short{
position: relative;
}
.title-before-short:before{
content: "";
width: 12.74px;
height: 7.73px;
position: absolute;
background-size: contain;
top: 5px;
left: -20px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12.742" height="7.726" viewBox="0 0 12.742 7.726"><path id="Path_1491" data-name="Path 1491" d="M6.383,4.709c.442-.447.875-.89,1.313-1.328Q9.274,1.8,10.855.231a.708.708,0,0,1,1.047,0c.2.206.405.407.608.61a.694.694,0,0,1,0,1.038L9.667,4.721,6.913,7.48a.768.768,0,0,1-.515.246.734.734,0,0,1-.567-.245Q4.769,6.415,3.706,5.349L.812,2.454c-.2-.2-.395-.393-.591-.591A.69.69,0,0,1,.228.844l.6-.6a.708.708,0,0,1,1.062,0L4.456,2.792,6.311,4.64Z" transform="translate(0 0)" fill="%23fff"/></svg>');
}
}
a.dropdown-toggle.show{
background-color: #669999;
border-radius: 20px 20px 0px 0px;
height: 60px;
margin-top: 0px;
margin-bottom: -20px;
}
}
li {
}
& > li {
justify-content: flex-end;
......@@ -87,7 +128,7 @@
}
.title-before-short {
margin:0;
color:#000f;
color:#fff;
text-decoration: none;
white-space: break-spaces;
}
......@@ -146,23 +187,20 @@
box-sizing: content-box;
}
#main-menu .dropdown-menu {
padding:0;
border:0;
margin:0;
padding-bottom:1rem;
background:none;
// padding-top:6px;
// margin-top:-6px;
// padding-top:5px;
// background:none;
padding: 0;
border: 0;
margin: 0;
padding-bottom: 1rem;
background: 0 0;
border-radius: 0;
height:15.25rem;
height: 15.25rem;
max-height: 15.25rem;
min-height: 15.25rem;
flex-direction: column;
flex-wrap: wrap;
left:auto;
right:0;
left: auto;
right: 0;
margin-top: 11px;
&:before {
content: "";
width: 100%;
......@@ -171,12 +209,19 @@
top: -10px;
padding-left: 150%;
}
li{
display: flex;
align-items: center;
flex-direction: column;
}
& > li {
flex:0;
background: #e5e5e5;
width:16.25rem;
min-width:16.25rem;
max-width: 16.25rem;
margin-top: 7px;
justify-content: flex-end;
a {
font-family: "PT Sans",sans-serif;
}
......