Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
5f7cf355 by Jeff Balicki
Options

side menu 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 2e0427c3
Inline Side-by-side
Showing 20 changed files with 568 additions and 53 deletions
[
{
"key": "group_63499b3a90e22",
"title": "Call Out Block",
"fields": [
{
"key": "field_63499b49415ec",
"label": "Text Content",
"name": "text_content",
"type": "wysiwyg",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"tabs": "all",
"toolbar": "full",
"media_upload": 1,
"delay": 0
},
{
"key": "field_63499c971e885",
"label": "Button Text",
"name": "button_text",
"type": "text",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"default_value": "",
"placeholder": "",
"prepend": "",
"append": "",
"maxlength": ""
},
{
"key": "field_63499ca41e886",
"label": "Button URL",
"name": "button_url",
"type": "link",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "url"
},
{
"key": "field_63499b6c415ed",
"label": "Background Image",
"name": "background_image",
"type": "image",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"return_format": "url",
"preview_size": "medium",
"library": "all",
"min_width": "",
"min_height": "",
"min_size": "",
"max_width": "",
"max_height": "",
"max_size": "",
"mime_types": ""
}
],
"location": [
[
{
"param": "block",
"operator": "==",
"value": "acf\/call-out-block"
}
]
],
"menu_order": 0,
"position": "normal",
"style": "default",
"label_placement": "top",
"instruction_placement": "label",
"hide_on_screen": "",
"active": true,
"description": "",
"show_in_rest": 0
}
]
\ No newline at end of file
<?php
$type = get_field('type');
if(!$type || $type == 'full_width_half') {
$id = 'full-width-block-' . $block['id'] . rand(0,100);
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'full-width-block ' . $type;
$className .= ' ' .get_field('style');
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
$image = get_field('image');
$buttons = get_field('buttons');
$content = get_field('content');
$style = get_field('style');
$colour_style = get_field('colour_style');
$show_previous_impact_reports = get_field('show_previous_impact_reports');
$show_previous_financial_reports = get_field('show_previous_financial_reports');
?>
<div class="stretch no-pad <?= $className ?> <?= $colour_style ?> <?= $style ?>" id='<?= $id ?>'>
<div class='image'><figure class='wp-block-image'><img src='<?= $image['sizes']['medium_large'] ?>' alt='<?= $image['alt'] ?>' /><?php if(!empty($image['caption'])) { ?> <figcaption><?= $image['caption'] ?></figcaption><?php } ?></figure></div>
<div class='content'>
<div class='inner-content'><?= $content ?></div>
<div class='button-list'>
<?php foreach($buttons as $btn) { ?>
<a class='btn' href='<?= $btn['link']['url'] ?>'><?= $btn['link']['title'] ?></a>
<?php } ?>
</div>
<?php if($show_previous_impact_reports) { ?>
<a class='previous-reports-anchor' href='#'><?= __("VIEW PREVIOUS REPORTS AND LATEST INTERNATIONAL REPORT", 'msf') ?></a>
<div class='previous_impact_reports'>
<?php msf_get_translated_sidebar('previous-impact-report') ?>
</div>
<?php } ?>
<?php if($show_previous_financial_reports && !$show_previous_impact_reports) { ?>
<a class='previous-reports-anchor' href='#'><?= __("VIEW PREVIOUS REPORTS & LATEST INTERNATIONAL FINANCIAL REPORT", 'msf') ?></a>
<div class='previous_impact_reports'>
<?php msf_get_translated_sidebar('previous-financial-report') ?>
</div>
<?php } ?>
</div>
</div>
<?php
} else {
// Create id attribute allowing for custom "anchor" value.
$id = 'call-out-block-' . $block['id'] . rand(0,100);
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'call-out-block ' . $type;
$className .= ' ' .get_field('style');
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
$count = get_field('count');
$button = get_field('button_url');
$bg_image = get_field('background_image');
$text_content = get_field('text_content');
$pure_html = get_field('pure_html');
?>
<div class="<?= $className ?> <?= (strlen($text_content) < 250)?'small-text':'' ?>" id='<?= $id ?>' style="<?= (!empty($bg_image))?"background-image: url(".$bg_image.")":"" ?>">
<div class='content'>
<?= $text_content ?>
<?php if($type == 'newsletter_signup') { ?>
<?= get_field('signup_form', 'options') ?>
<?php } else if($type == 'html') { ?>
<?= $pure_html ?>
<?php } ?>
<?php if(!empty($button)) { ?>
<a href="<?= $button['url'] ?>" > <?= $button['title'] ?> </a>
<?php } ?>
</div>
</div>
<?php } ?>
\ No newline at end of file
.call-out-block{
background-size: cover;
min-height: 300px;
position: relative;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color:#fff;
margin-left:-50%;
margin-right:-50%;
padding-left:50%;
padding-right:50%;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.call-out-block h2{
text-align: center;
}
.call-out-block p{
text-align: center;
}
.call-out-block a{
border-radius: 0!important;
background-color: #EE0000;
color: #fff;
border: none;
font-size: 19px;
font-weight: 500;
margin: 10px 0 0px 0;
padding: 15px 60px;
line-height: 26px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
width: unset;
}
.call-out-block a:hover{
color: #fff;
background-color:#669999;
}
\ No newline at end of file
......@@ -16109,16 +16109,16 @@ h4, .h4 {
line-height: 25px;
}
ul li {
ul:not(.side-menu):not(.children) li {
color: #4D4D4D;
margin-bottom: 8px;
padding: 3px 0 2px 10px;
}
ul li ul {
ul:not(.side-menu):not(.children) li ul:not(.side-menu):not(.children) {
list-style: none;
margin-top: 8px;
}
ul li ul li:before {
ul:not(.side-menu):not(.children) li ul:not(.side-menu):not(.children) li:before {
content: "-";
color: #4D4D4D;
font-weight: bold;
......@@ -17358,12 +17358,13 @@ ul.sf_date_field .sf-datepicker {
font-weight: bold;
font-size: 20px;
line-height: 25px;
text-decoration: none;
}
.side-menu {
list-style: none;
margin-top: 14px;
padding-left: 0px;
padding-left: 15px;
}
.side-menu li {
margin-bottom: 14px;
......@@ -17373,6 +17374,56 @@ ul.sf_date_field .sf-datepicker {
font-size: 20px;
line-height: 25px;
}
.side-menu li a:hover {
text-decoration: underline;
position: relative;
}
.side-menu li a:hover:before {
content: "";
position: absolute;
left: -15px;
top: 8px;
border-radius: 50%;
width: 9px;
height: 9px;
background: #EE0000 0% 0% no-repeat padding-box;
}
.side-menu .children .has-children {
position: relative;
}
.side-menu .children .has-children:after {
position: absolute;
content: "";
width: 14px;
height: 9px;
top: 10px;
margin-left: 10px;
transform: rotateX(180deg);
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14.462" height="8.769" viewBox="0 0 14.462 8.769"><path id="Path_1387" data-name="Path 1387" d="M18.55,187.453c.5.507.993,1.01,1.49,1.508q1.791,1.789,3.585,3.575a.8.8,0,0,0,1.188,0c.227-.234.46-.462.691-.692a.787.787,0,0,0,0-1.179l-3.223-3.224q-1.563-1.565-3.125-3.131a.872.872,0,0,0-.585-.279.833.833,0,0,0-.643.278q-1.206,1.21-2.413,2.42l-3.285,3.286c-.224.224-.448.446-.67.671a.783.783,0,0,0,.008,1.157l.685.684a.8.8,0,0,0,1.206,0l2.908-2.9,2.106-2.1Z" transform="translate(-11.305 -184.028)"/></svg>');
}
.side-menu .children .children {
padding-left: 20px;
display: none;
}
.side-menu .children .children:has(.current_page_item) {
display: block;
}
.side-menu .children a.opened:after {
transform: rotateX(0deg);
}
.side-menu ul {
list-style: none;
margin-top: 14px;
padding-left: 15px;
}
.current_page_item a {
font-weight: bold;
text-decoration: underline;
}
.current_page_item li a {
font-weight: 300;
text-decoration: none;
}
@media only screen and (max-width: 1000px) {
#page-sidebar {
......@@ -17578,6 +17629,52 @@ ul.sf_date_field .sf-datepicker {
padding-left: 2rem;
}
.call-out-block {
background-size: cover;
min-height: 300px;
position: relative;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-left: -50%;
margin-right: -50%;
padding-left: 50%;
padding-right: 50%;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.call-out-block h2, .call-out-block .h2 {
text-align: center;
}
.call-out-block p {
text-align: center;
}
.call-out-block a {
border-radius: 0 !important;
background-color: #EE0000;
color: #fff;
border: none;
font-size: 19px;
font-weight: 500;
margin: 10px 0 0px 0;
padding: 15px 60px;
line-height: 26px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
width: unset;
}
.call-out-block a:hover {
color: #fff;
background-color: #669999;
}
.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.
......@@ -25,4 +25,19 @@ if( function_exists('acf_add_options_page') ) {
'mode' => 'edit'
));
acf_register_block(array(
'name' => 'call-out-block',
'title' => __('Call Out Block'),
'description' => __('A custom block for Call Out Block items.'),
'render_template' => 'blocks/call-out-block/call-out-block.php',
'category' => 'layout',
'icon' => 'excerpt-view',
'mode' => 'edit',
'supports' => [
'align' => false,
'anchor' => true,
'customClassName' => true
]
));
}
\ No newline at end of file
......
<?php
function show_all_children($parent_id, $post_id, $current_level)
{
$top_parents = array();
$top_parents = get_post_ancestors($post_id);
$top_parents[] = $post_id;
$children = get_posts(
array(
'post_type' => 'page'
, 'posts_per_page' => -1
, 'post_parent' => $parent_id
, 'order_by' => 'title'
, 'order' => 'ASC'
));
if (empty($children)) return;
echo '
<a class="top_parent" href="'.get_permalink($parent_id).'" title="'.get_the_title($parent_id).'">'.get_the_title($parent_id).'</a>';
echo '<ul class="side-menu children level-'.$current_level.'-children">';
foreach ($children as $child)
{
echo '<li';
if (in_array($child->ID, $top_parents))
{
echo ' class="current_page_item"';
<?php /**
* Use wp_list_pages() to display parent and all child pages of current page.
*/
function wpse_get_ancestor_tree() {
// Bail if this is not a page.
if ( ! is_page() ) {
return false;
}
echo '>';
echo '<a href="'.get_permalink($child->ID).'">';
echo apply_filters('the_title', $child->post_title);
echo '</a>';
// now call the same function for child of this child
if ($child->ID && (in_array($child->ID, $top_parents)))
{
show_all_children($child->ID, $post_id, $current_level+1);
// Get the current post.
$post = get_post();
/**
* Get array of post ancestor IDs.
* Note: The direct parent is returned as the first value in the array.
* The highest level ancestor is returned as the last value in the array.
* See https://codex.wordpress.org/Function_Reference/get_post_ancestors
*/
$ancestors = get_post_ancestors( $post->ID );
// If there are ancestors, get the top level parent.
// Otherwise use the current post's ID.
$parent = ( ! empty( $ancestors ) ) ? array_pop( $ancestors ) : $post->ID;
// Get all pages that are a child of $parent.
$pages = get_pages( [
'child_of' => $parent,
] );
// Bail if there are no results.
if ( ! $pages ) {
return false;
}
echo '</li>';
}
// Store array of page IDs to include latere on.
$page_ids = array();
foreach ( $pages as $page ) {
$page_ids[] = $page->ID;
}
echo '</ul>';
// Add parent page to beginning of $page_ids array.
array_unshift( $page_ids, $parent );
// Get the output and return results if they exist.
$output = wp_list_pages( [
'include' => $page_ids,
'title_li' => false,
'echo' => false,
] );
if ( ! $output ) {
return false;
} else {
return '<ul class="side-menu ancestor-tree">' . PHP_EOL .
$output . PHP_EOL .
'</ul>' . PHP_EOL;
}
}
\ No newline at end of file
......
......@@ -7496,6 +7496,22 @@
// Search Filter
var Search = function ($) {
function init() {
$(".side-menu li:has(.children) > a").addClass("has-children closed");
$(".side-menu li .children .current_page_ancestor a").removeClass("closed").addClass("opened");
$(document).on("click", ".side-menu li:has(.children) > a.has-children.closed", function (e) {
e.preventDefault();
$(this).removeClass("closed");
$(this).addClass("opened");
$(this).next(".children").slideDown();
return false;
});
$(document).on("click", ".side-menu li:has(.children) > a.has-children.opened", function (e) {
e.preventDefault();
$(this).removeClass("opened");
$(this).addClass("closed");
$(this).next(".children").slideUp();
return false;
});
$(".searchandfilter ul li:contains('hidden')").hide();
$('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" "></li>').appendTo(jQuery('#advance-search-modal .searchandfilter ul:first-child '));
$(document).on("click", ".search-filter-reset-custom", function (e) {
......
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.
......@@ -41,9 +41,7 @@ $first_copy = get_field('copyright');
<div class="<?php echo esc_attr( $container ); ?>" id="content" tabindex="-1">
<div class="col-sm-12 col-md-12 col-lg-3 widget-area" id="page-sidebar">
<?php
$parents_ids = get_post_ancestors($post->ID);
$top_parent_id = (count($parents_ids) > 0) ? $parents_ids[count($parents_ids)-1] : $post->ID;
show_all_children($top_parent_id, $post->ID, 1);
echo wpse_get_ancestor_tree();
?>
</div>
<main class="col-sm-12 col-md-9 content-area site-main site-main" id="main">
......
......@@ -6,6 +6,26 @@ import jquery from 'jquery';
var Search = (function($) {
function init() {
$(".side-menu li:has(.children) > a").addClass("has-children closed");
$(".side-menu li .children .current_page_ancestor a").removeClass("closed").addClass("opened");
$(document).on("click", ".side-menu li:has(.children) > a.has-children.closed", function(e){
e.preventDefault();
$(this).removeClass("closed");
$(this).addClass("opened");
$(this).next(".children").slideDown();
return false;
});
$(document).on("click", ".side-menu li:has(.children) > a.has-children.opened", function(e){
e.preventDefault();
$(this).removeClass("opened");
$(this).addClass("closed");
$(this).next(".children").slideUp();
return false;
});
$(".searchandfilter ul li:contains('hidden')").hide();
$('<li class="sf-field-reset"><input type="submit" class="search-filter-reset-custom" value="CLEAR ALL" "></li>').appendTo( jQuery( '#advance-search-modal .searchandfilter ul:first-child ' ) );
......
......@@ -25,3 +25,5 @@ window.tz_checkVisible = function(elm, evalType , offset, heightBuffer) {
if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
if (evalType === "above") return ((y < (vpH + st)));
};
......
......@@ -14,3 +14,4 @@ body{
@import "page";
@import "footer";
@import "accordion";
@import "call-out";
......
......@@ -43,12 +43,12 @@ h4 {
line-height: 25px;
}
ul{
ul:not(.side-menu):not(.children){
li{
color: #4D4D4D;
margin-bottom: 8px;
padding: 3px 0 2px 10px;
ul{
ul:not(.side-menu):not(.children){
list-style: none;
margin-top: 8px;
li:before{
......@@ -62,6 +62,7 @@ ul{
}
}
}
ol{
li{
color: #4D4D4D;
......
......@@ -192,12 +192,14 @@ h1+p {
font-weight: bold;
font-size: 20px;
line-height: 25px;
text-decoration: none;
}
.side-menu{
list-style: none;
margin-top: 14px;
padding-left: 0px;
padding-left: 15px;
li{
margin-bottom: 14px;
......@@ -206,8 +208,77 @@ h1+p {
font-size: 20px;
line-height: 25px;
}
a:hover{
text-decoration: underline;
position: relative;
&:before{
content: "";
position: absolute;
left: -15px;
top: 8px;
border-radius: 50%;
width: 9px;
height: 9px;
background: #EE0000 0% 0% no-repeat padding-box;
}
}
}
.children{
.has-children{
position: relative;
&:after{
position: absolute;
content: "";
width: 14px;
height: 9px;
top: 10px;
margin-left: 10px;
transform: rotateX(180deg);
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14.462" height="8.769" viewBox="0 0 14.462 8.769"><path id="Path_1387" data-name="Path 1387" d="M18.55,187.453c.5.507.993,1.01,1.49,1.508q1.791,1.789,3.585,3.575a.8.8,0,0,0,1.188,0c.227-.234.46-.462.691-.692a.787.787,0,0,0,0-1.179l-3.223-3.224q-1.563-1.565-3.125-3.131a.872.872,0,0,0-.585-.279.833.833,0,0,0-.643.278q-1.206,1.21-2.413,2.42l-3.285,3.286c-.224.224-.448.446-.67.671a.783.783,0,0,0,.008,1.157l.685.684a.8.8,0,0,0,1.206,0l2.908-2.9,2.106-2.1Z" transform="translate(-11.305 -184.028)"/></svg>');
}
}
.children{
padding-left: 20px;
display: none;
}
.children:has(.current_page_item){
display: block;
}
a.opened:after{
transform: rotateX(0deg);
}
}
ul{
list-style: none;
margin-top: 14px;
padding-left: 15px;
li{
}
}
}
.current_page_item{
a{
font-weight: bold;
text-decoration: underline;
}
li{
a{
font-weight: 300;
text-decoration: none;
}
}
}
@media only screen and (max-width: 1000px) {
#page-sidebar{
display: none;
......
.call-out-block{
background-size: cover;
min-height: 300px;
position: relative;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color:#fff;
margin-left:-50%;
margin-right:-50%;
padding-left:50%;
padding-right:50%;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
.call-out-block h2{
text-align: center;
}
.call-out-block p{
text-align: center;
}
.call-out-block a{
border-radius: 0!important;
background-color: #EE0000;
color: #fff;
border: none;
font-size: 19px;
font-weight: 500;
margin: 10px 0 0px 0;
padding: 15px 60px;
line-height: 26px;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
width: unset;
}
.call-out-block a:hover{
color: #fff;
background-color:#669999;
}
\ No newline at end of file