Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
7c914fb6 by Jeff Balicki
Options

blocks 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 0d127ad1
Inline Side-by-side
Showing 18 changed files with 471 additions and 172 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
.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
<?php
// Create id attribute allowing for custom "anchor" value.
$id = 'project-lead' . $block['id'] . rand(0,100);
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'project-lead' ;
$className .= ' ' .get_field('style');
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
$content = get_field('content');
$image = get_field('image');
$thumbnail_image = get_posts(array('p' => $image['ID'], 'post_type' => 'attachment'));
;
if ($thumbnail_image && isset($thumbnail_image[0])) {
$img_description = $thumbnail_image[0]->post_content;
$photo_caption = $thumbnail_image[0]->post_excerpt;
$img_alt = get_post_meta($image['ID'] , '_wp_attachment_image_alt', true);
$img_title = $thumbnail_image[0]->post_title;
$copy = get_field('copy', $image['ID'] );
}
?>
<div class="<?= $className ?>">
<div class="image">
<img src="<?= $image['url']; ?>" alt="<?php $img_alt; ?>">
</div>
<div class='content'>
<?php echo $content; ?>
</div>
</div>
<?php
// Create id attribute allowing for custom "anchor" value.
$id = 'promo-area' . $block['id'] . rand(0,100);
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'promo-area' ;
$className .= ' ' .get_field('style');
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
$content = get_field('content');
$image = get_field('image');
$thumbnail_image = get_posts(array('p' => $image['ID'], 'post_type' => 'attachment'));
error_log(print_r($thumbnail_image,true));
if ($thumbnail_image && isset($thumbnail_image[0])) {
$img_description = $thumbnail_image[0]->post_content;
$photo_caption = $thumbnail_image[0]->post_excerpt;
$img_alt = get_post_meta($image['ID'] , '_wp_attachment_image_alt', true);
$img_title = $thumbnail_image[0]->post_title;
$copy = get_field('copy', $image['ID'] );
}
?>
<div class="<?= $className ?>" id='<?= $id ?>'>
<div class='content'>
<?php echo $content; ?>
</div>
<div class='image' style="<?= (!empty($image))?"background-image: url(".$image['url'] .")":"" ?>">
<div class='side-caption header-caption <?= (empty($copy) && empty($cap)) ? "hide" : "" ?>'>
<a class='copy-link' aria-label="Header Slide Caption" href='#' ></a>
<span class='image-side-caption'>
<span class='cap'><?= $photo_caption ?></span>
<span class='copyright'><?= ($copy) ? "&copy; ".$copy : "" ?></span>
</span>
</div>
</div>
</div>
......@@ -15121,8 +15121,8 @@ body {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
margin-top: 0px;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after {
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link:after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link:after {
content: "";
width: 20px;
height: 15px;
......@@ -15130,8 +15130,9 @@ body {
background-size: contain;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1369" data-name="Path 1369" d="M7.515,3.553c.52.526,1.03,1.048,1.546,1.564q1.857,1.856,3.718,3.708a.834.834,0,0,0,1.232,0c.236-.242.477-.479.716-.718a.817.817,0,0,0,0-1.222L11.379,3.538Q9.758,1.915,8.138.29A.9.9,0,0,0,7.532,0a.864.864,0,0,0-.667.288Q5.614,1.544,4.363,2.8L.956,6.207c-.232.232-.465.463-.7.7A.812.812,0,0,0,.269,8.1l.71.71a.833.833,0,0,0,1.25,0l3.016-3L7.429,3.634Z" transform="translate(9.095) rotate(90)" fill="%23fff"/></svg>');
display: inline-block;
position: relative;
position: absolute;
top: 12px;
right: 0px;
}
.back-one-level {
background-color: #EE0000;
......@@ -15164,7 +15165,7 @@ body {
.is-visible .back-one-level {
display: block !important;
}
.mega-sub-menu .mega-indicator {
.mega-indicator {
display: none !important;
}
.mega-sub-menu .mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title {
......@@ -15229,7 +15230,7 @@ body {
}
#mega-menu-wrap-primary {
width: 100%;
height: auto;
height: 30px;
top: 55px;
right: 0px;
position: absolute;
......@@ -15591,10 +15592,6 @@ button, input, optgroup, select, textarea {
display: none;
}
.content br {
display: none;
}
.appArea.responsive .row {
padding-right: 10px;
}
......@@ -16100,6 +16097,11 @@ a.skip-link:focus {
opacity: 1;
}
p {
font-size: 16px;
line-height: 20px;
}
.entry-content h1, .entry-content .h1, .entry-content h2, .entry-content .h2, .entry-content h3, .entry-content .h3, .entry-content h4, .entry-content .h4, .entry-content h5, .entry-content .h5, .entry-content h6, .entry-content .h6 {
font-family: "PT Sans", sans-serif;
font-weight: 700;
......@@ -16371,6 +16373,49 @@ a.skip-link:focus {
display: block;
}
table {
margin: 40px 0px;
border: 4px solid #fff !important;
background-color: #EAEDF1 !important;
width: 100%;
text-align: left;
border-collapse: collapse;
overflow-x: scroll;
}
table td, table th {
border: 4px solid #FFFFFF !important;
padding: 7px 7px;
}
table tbody td {
font-size: 16px;
line-height: 20px;
padding: 10px 15px !important;
}
table tr:nth-child(even) {
background: #FFFFFF !important;
}
table thead {
background: #FFFFFF !important;
border: 4px solid #fff !important;
}
table thead th {
font-size: 16px;
line-height: 20px;
font-weight: bold;
color: #000000;
border: 4px solid #fff !important;
padding: 10px 15px !important;
}
table thead th:first-child {
border-left: none;
}
#search-sidebar {
min-width: 320px;
}
......@@ -17425,6 +17470,28 @@ ul.sf_date_field .sf-datepicker {
position: relative;
}
.entry-footer {
display: none;
}
.side-menu-page #page-sidebar {
min-width: 320px;
}
@media screen and (max-width: 1000px) {
.side-menu-page #page-sidebar {
min-width: 320px;
width: 100%;
}
}
.side-menu-page #main {
width: calc(100% - 340px);
}
@media screen and (max-width: 1000px) {
.side-menu-page #main {
width: 100%;
}
}
#content:not(.search-content) {
display: flex;
}
......@@ -17690,8 +17757,7 @@ ul.sf_date_field .sf-datepicker {
}
}
.pi {
height: 300px;
min-height: 300px;
min-height: 150px;
}
@media (min-width: 1024px) {
.pi {
......@@ -17910,6 +17976,11 @@ ul.sf_date_field .sf-datepicker {
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) {
.call-out-block {
min-height: 250px;
}
}
@media screen and (max-width: 768px) {
.call-out-block h2, .call-out-block .h2 {
font-size: 24px;
}
......@@ -18691,6 +18762,108 @@ body.pojo-a11y-resize-font-130 span, body.pojo-a11y-resize-font-140 span, body.p
}
}
.promo-area {
width: 100%;
display: flex;
min-height: 250px;
background-color: #000;
color: #fff;
flex-direction: row;
border-radius: 10px;
margin: 40px 0px;
overflow: hidden;
}
@media screen and (max-width: 900px) {
.promo-area {
flex-direction: column-reverse;
border-radius: 20px;
}
}
.promo-area .content {
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 30px;
}
@media screen and (max-width: 900px) {
.promo-area .content {
width: 100%;
}
}
.promo-area .image {
background-size: cover;
width: 50%;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
position: relative;
}
@media screen and (max-width: 900px) {
.promo-area .image {
width: 100%;
min-height: 300px;
border-radius: 20px 20px 0px 0px;
}
}
.promo-area .image .side-caption {
max-width: 100%;
}
.project-lead {
width: 100%;
display: flex;
min-height: 200px;
background-color: #F0F0F0;
color: #000;
flex-direction: row;
border-radius: 10px;
margin: 40px 0px;
padding: 20px;
overflow: hidden;
}
@media screen and (max-width: 900px) {
.project-lead {
flex-direction: column;
border-radius: 20px;
}
}
.project-lead .image {
display: flex;
flex-wrap: wrap;
}
.project-lead .image img {
height: 200px;
}
.project-lead .content {
width: 75%;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-left: 20px;
}
@media screen and (max-width: 900px) {
.project-lead .content {
width: 100%;
padding-left: 0px;
padding-top: 20px;
}
}
.project-lead .content h2, .project-lead .content .h2 {
font-size: 25px;
line-height: 30px;
font-weight: 700;
margin-bottom: 20px;
}
@media screen and (max-width: 900px) {
.project-lead .content h2, .project-lead .content .h2 {
font-size: 24px;
}
}
.project-lead .content p {
font-size: 16px;
line-height: 20px;
}
.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,6 +25,21 @@ if( function_exists('acf_add_options_page') ) {
'mode' => 'edit'
));
acf_register_block_type( array(
'title' => __( 'Promo Area', 'client_textdomain' ),
'name' => 'msf-promo-area',
'render_template' => 'blocks/promo-area/promo-area.php',
'mode' => 'edit'
));
acf_register_block_type( array(
'title' => __( 'Project Lead', 'client_textdomain' ),
'name' => 'msf-project-lead',
'render_template' => 'blocks/project-lead/project-lead.php',
'mode' => 'edit'
));
acf_register_block(array(
'name' => 'call-out-block',
'title' => __('Call Out Block'),
......
......@@ -36,3 +36,8 @@ function advance_search($atts){
}
function add_linebreak_shortcode() {
return '<br />';
}
add_shortcode('br', 'add_linebreak_shortcode' );
\ No newline at end of file
......
......@@ -16,6 +16,9 @@
padding-right:50%;
background-color: #000;
box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.3);
@media screen and (max-width: 768px) {
min-height: 250px;
}
h2{
@media screen and (max-width: 768px) {
font-size: 24px;
......
......@@ -18,3 +18,5 @@ body{
@import "pojo_a11";
@import "g_translate";
@import "text_size_increased";
@import "promo_area";
@import "project_lead";
......
......@@ -18,6 +18,11 @@ a.skip-link {
}
}
p{
font-size: 16px;
line-height: 20px;
}
.entry-content{
h1, h2, h3, h4, h5, h6 {
font-family: "PT Sans",sans-serif;
......@@ -293,3 +298,45 @@ blockquote{
}
}
table {
margin: 40px 0px;
border: 4px solid #fff!important;
background-color: #EAEDF1 !important;
width: 100%;
text-align: left;
border-collapse: collapse;
overflow-x: scroll;
}
table td, table th {
border: 4px solid #FFFFFF !important;
padding: 7px 7px;
}
table tbody td {
font-size: 16px;
line-height: 20px;
padding: 10px 15px !important;
}
table tr:nth-child(even) {
background: #FFFFFF !important;
}
table thead {
background: #FFFFFF !important;
border: 4px solid #fff!important;
}
table thead th {
font-size: 16px;
line-height: 20px;
font-weight: bold;
color: #000000;
border: 4px solid #fff!important;
padding: 10px 15px !important;
}
table thead th:first-child {
border-left: none;
}
......
......@@ -105,11 +105,7 @@ button, input, optgroup, select, textarea{
//Forms from luminate
.content {
br {
display: none;
}
}
.appArea.responsive {
.row{
......
......@@ -156,8 +156,8 @@
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu{
margin-top: 0px;
}
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link > span.mega-indicator:after,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after{
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link:after ,
#mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link:after {
content:"";
width: 20px;
height: 15px;
......@@ -165,8 +165,9 @@
background-size: contain;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1369" data-name="Path 1369" d="M7.515,3.553c.52.526,1.03,1.048,1.546,1.564q1.857,1.856,3.718,3.708a.834.834,0,0,0,1.232,0c.236-.242.477-.479.716-.718a.817.817,0,0,0,0-1.222L11.379,3.538Q9.758,1.915,8.138.29A.9.9,0,0,0,7.532,0a.864.864,0,0,0-.667.288Q5.614,1.544,4.363,2.8L.956,6.207c-.232.232-.465.463-.7.7A.812.812,0,0,0,.269,8.1l.71.71a.833.833,0,0,0,1.25,0l3.016-3L7.429,3.634Z" transform="translate(9.095) rotate(90)" fill="%23fff"/></svg>');
display: inline-block;
position: relative;
position: absolute;
top: 12px;
right: 0px;
}
.back-one-level{
......@@ -204,12 +205,13 @@
display: block !important;
}
}
.mega-sub-menu{
.mega-indicator{
display: none !important;
}
.mega-sub-menu{
.mega-menu-item-has-children > .mega-menu-link > .mega-description-group > .mega-menu-title{
position: relative;
......@@ -281,7 +283,7 @@
#mega-menu-wrap-primary{
width: 100%;
height: auto;
height: 30px;
top: 55px;
right: 0px;
position:absolute;
......
......@@ -6,7 +6,25 @@
}
}
.entry-footer{
display: none;
}
.side-menu-page{
#page-sidebar{
min-width: 320px;
@media screen and (max-width: 1000px){
min-width: 320px;
width:100%;
}
}
#main{
width: calc(100% - 340px);
@media screen and (max-width: 1000px){
width:100%;
}
}
}
#content:not(.search-content){
......@@ -311,8 +329,8 @@ h1+p {
.pi {
height:300px;
min-height:300px;
min-height:150px;
@media(min-width: 1024px) {
min-height:200px;
text-align: center;
......
.project-lead{
width: 100%;
display: flex;
min-height: 200px;
background-color: #F0F0F0;
color: #000;
flex-direction: row;
border-radius: 10px;
margin:40px 0px;
padding: 20px;
overflow: hidden;
@media screen and (max-width: 900px) {
flex-direction: column;
border-radius: 20px;
}
.image{
display: flex;
flex-wrap: wrap;
img{
height: 200px;
}
}
.content{
width: 75%;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-left: 20px;
@media screen and (max-width: 900px) {
width: 100%;
padding-left: 0px;
padding-top: 20px;
}
h2{
font-size: 25px;
line-height: 30px;
font-weight: 700;
margin-bottom: 20px;
@media screen and (max-width: 900px) {
font-size: 24px;
}
}
p{
font-size: 16px;
line-height: 20px;
}
}
}
.promo-area{
width: 100%;
display: flex;
min-height: 250px;
background-color: #000;
color: #fff;
flex-direction: row;
border-radius: 10px;
margin:40px 0px;
overflow: hidden;
@media screen and (max-width: 900px) {
flex-direction: column-reverse;
border-radius: 20px;
}
.content{
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 30px;
@media screen and (max-width: 900px) {
width: 100%;
}
}
.image{
background-size: cover;
width: 50%;
overflow: hidden;
border-radius: 0px 0px 20px 20px;
position: relative;
@media screen and (max-width: 900px) {
width: 100%;
min-height: 300px;
border-radius: 20px 20px 0px 0px;
}
.side-caption {
max-width: 100%;
}
}
}