Adds option for simple vs boxed header style on items list.
This commit is contained in:
parent
2c72969ff1
commit
baf8893a70
|
@ -39,6 +39,16 @@ $options = [
|
|||
'prefix' => $prefix,
|
||||
]),
|
||||
'inner-options' => [
|
||||
$prefix . 'page_header_background_style' => [
|
||||
'label' => __('Header style', 'blocksy-tainacan'),
|
||||
'type' => 'ct-radio',
|
||||
'value' => 'boxed',
|
||||
'view' => 'text',
|
||||
'choices' => [
|
||||
'simple' => __('Simple', 'blocksy'),
|
||||
'boxed' => __('Boxed', 'blocksy'),
|
||||
],
|
||||
],
|
||||
$prefix . 'hero_elements' => [
|
||||
'label' => __('Elements', 'blocksy'),
|
||||
'type' => 'ct-layers',
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
background: transparent !important;
|
||||
padding: 6px 13px;
|
||||
@include display-grid;
|
||||
grid-template-columns: 1fr minmax(auto, 1300px) 1fr;
|
||||
grid-template-columns: 0fr 100% 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas:
|
||||
". searchcontrol ."
|
||||
|
@ -33,10 +33,8 @@
|
|||
.search-control {
|
||||
grid-area: searchcontrol;
|
||||
border-radius: 0 0 var(--borderRadius, 3px) var(--borderRadius, 3px);
|
||||
background-color: var(--tainacan-item-background-color, white);
|
||||
padding: 20px 20px 6px 20px !important;
|
||||
margin: 5px;
|
||||
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
|
||||
|
||||
.search-control-item {
|
||||
margin-bottom: 20px !important;
|
||||
|
@ -281,11 +279,8 @@ body:not(.tainacan-admin-page) {
|
|||
--linkInitialColor: var(--tainacan-secondary, #3eaf7c);
|
||||
|
||||
.tainacan-collection-header__box {
|
||||
width: var(--maxSiteWidth, 1290px);
|
||||
border-radius: var(--borderRadius,3px) var(--borderRadius, 3px) 0 0;
|
||||
background-color: var(--tainacan-item-background-color,#fff);
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-shadow: var(--boxShadow,0 12px 18px -6px rgba(34,56,101,.04));
|
||||
|
||||
.page-title {
|
||||
margin-bottom: 4px;
|
||||
|
@ -309,3 +304,19 @@ body:not(.tainacan-admin-page) {
|
|||
}
|
||||
}
|
||||
|
||||
.page.has-page-header-style-boxed {
|
||||
.theme-items-list:not(.is-fullscreen) {
|
||||
grid-template-columns: 1fr minmax(auto, 1300px) 1fr;
|
||||
}
|
||||
.tainacan-collection-header .tainacan-collection-header__box {
|
||||
width: var(--maxSiteWidth, 1290px);
|
||||
border-radius: var(--borderRadius,3px) var(--borderRadius, 3px) 0 0;
|
||||
background-color: var(--tainacan-item-background-color,#fff);
|
||||
box-shadow: var(--boxShadow,0 12px 18px -6px rgba(34,56,101,.04));
|
||||
}
|
||||
.search-control {
|
||||
background-color: var(--tainacan-item-background-color, white);
|
||||
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -188,6 +188,7 @@
|
|||
}
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
background-image: none;
|
||||
top: 65px;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
|
@ -261,9 +262,12 @@
|
|||
color: black;
|
||||
}
|
||||
.attachment-without-image img {
|
||||
box-sizing: border-box;
|
||||
padding: 36px;
|
||||
background-color: #dbdbdb;
|
||||
object-fit: contain;
|
||||
max-width: var(--attachments-size,140px);
|
||||
max-height: var(--attachments-size,140px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -298,7 +302,10 @@
|
|||
min-height: 54px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
.pswp__caption__center {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
// Metadata list -------------------------------------
|
||||
|
|
34
style.css
34
style.css
|
@ -40,7 +40,7 @@
|
|||
display: flex;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(auto, 1300px) 1fr;
|
||||
grid-template-columns: 0fr 100% 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas: ". searchcontrol ." "itemslist itemslist itemslist";
|
||||
}
|
||||
|
@ -48,10 +48,8 @@
|
|||
.theme-items-list .search-control {
|
||||
grid-area: searchcontrol;
|
||||
border-radius: 0 0 var(--borderRadius, 3px) var(--borderRadius, 3px);
|
||||
background-color: var(--tainacan-item-background-color, white);
|
||||
padding: 20px 20px 6px 20px !important;
|
||||
margin: 5px;
|
||||
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
|
||||
}
|
||||
|
||||
.theme-items-list .search-control .search-control-item {
|
||||
|
@ -305,11 +303,8 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
|
|||
}
|
||||
|
||||
.tainacan-collection-header .tainacan-collection-header__box {
|
||||
width: var(--maxSiteWidth, 1290px);
|
||||
border-radius: var(--borderRadius, 3px) var(--borderRadius, 3px) 0 0;
|
||||
background-color: var(--tainacan-item-background-color, #fff);
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
box-shadow: var(--boxShadow, 0 12px 18px -6px rgba(34, 56, 101, 0.04));
|
||||
}
|
||||
|
||||
.tainacan-collection-header .tainacan-collection-header__box .page-title {
|
||||
|
@ -335,6 +330,22 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
|
|||
border-radius: var(--borderRadius, 3px);
|
||||
}
|
||||
|
||||
.page.has-page-header-style-boxed .theme-items-list:not(.is-fullscreen) {
|
||||
grid-template-columns: 1fr minmax(auto, 1300px) 1fr;
|
||||
}
|
||||
|
||||
.page.has-page-header-style-boxed .tainacan-collection-header .tainacan-collection-header__box {
|
||||
width: var(--maxSiteWidth, 1290px);
|
||||
border-radius: var(--borderRadius, 3px) var(--borderRadius, 3px) 0 0;
|
||||
background-color: var(--tainacan-item-background-color, #fff);
|
||||
box-shadow: var(--boxShadow, 0 12px 18px -6px rgba(34, 56, 101, 0.04));
|
||||
}
|
||||
|
||||
.page.has-page-header-style-boxed .search-control {
|
||||
background-color: var(--tainacan-item-background-color, white);
|
||||
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
|
||||
}
|
||||
|
||||
/* Single Item Page */
|
||||
.tainacan-item-single {
|
||||
flex-wrap: wrap;
|
||||
|
@ -543,6 +554,7 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
|
|||
.tainacan-item-single .tainacan-item-section__gallery-items .swiper-button-prev,
|
||||
.tainacan-item-single .tainacan-item-section__attachments .swiper-button-next,
|
||||
.tainacan-item-single .tainacan-item-section__attachments .swiper-button-prev {
|
||||
background-image: none;
|
||||
top: 65px;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
|
@ -646,9 +658,12 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
|
|||
|
||||
.tainacan-item-single .tainacan-item-section__gallery-items .tainacan-item-section__attachments-file .attachment-without-image img,
|
||||
.tainacan-item-single .tainacan-item-section__attachments .tainacan-item-section__attachments-file .attachment-without-image img {
|
||||
box-sizing: border-box;
|
||||
padding: 36px;
|
||||
background-color: #dbdbdb;
|
||||
object-fit: contain;
|
||||
max-width: var(--attachments-size, 140px);
|
||||
max-height: var(--attachments-size, 140px);
|
||||
}
|
||||
|
||||
.tainacan-item-single .pswp__zoom-wrap .attachment-without-image {
|
||||
|
@ -680,6 +695,11 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
|
|||
padding: 12px;
|
||||
}
|
||||
|
||||
.tainacan-item-single .pswp__caption__center {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.tainacan-item-single .tainacan-item-section__metadata {
|
||||
height: 100%;
|
||||
-moz-column-width: var(--metadata-column-width, 400px);
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -4,6 +4,7 @@ $prefix = blocksy_manager()->screen->get_prefix();
|
|||
|
||||
$page_container_classes = 'page type-page hentry singular';
|
||||
$page_container_classes = $page_container_classes . ( get_theme_mod($prefix . '_filters_panel_background_style', 'boxed') == 'boxed' ? ' has-filters-panel-style-boxed' : '' );
|
||||
$page_container_classes = $page_container_classes . ( get_theme_mod($prefix . '_page_header_background_style', 'boxed') == 'boxed' ? ' has-page-header-style-boxed' : '' );
|
||||
|
||||
$filters_panel_size = get_theme_mod($prefix . '_filters_panel_size', '20%');
|
||||
$page_container_style = '--tainacan-filter-menu-width-theme:' . $filters_panel_size . ';';
|
||||
|
@ -42,7 +43,15 @@ $page_container_style .= 'background-color: var(--tainacan-background-color, #f8
|
|||
|
||||
<?php get_header(); ?>
|
||||
<article class="<?php echo $page_container_classes ?>" style="<?php echo $page_container_style ?>">
|
||||
<header class="tainacan-collection-header" style="background-image: <?php if ( get_header_image() ) { echo('linear-gradient(to bottom, rgba(255, 255, 255, 0.3), var(--tainacan-background-color, var(--background-color, #f8f9fb))), url(' . get_header_image() . ')'); } else { echo ''; } ?>">
|
||||
<header
|
||||
class="tainacan-collection-header"
|
||||
style="background-image:
|
||||
<?php if ( get_header_image() ) {
|
||||
echo('linear-gradient(to bottom, rgba(255, 255, 255, ' . (get_theme_mod($prefix . '_page_header_background_style', 'boxed') == 'boxed' ? '0.3' : '0.8') . '), var(--tainacan-background-color, var(--background-color, #f8f9fb))), url(' . get_header_image() . ')');
|
||||
} else {
|
||||
echo '';
|
||||
} ?>"
|
||||
>
|
||||
<div class="tainacan-collection-header__box">
|
||||
<?php
|
||||
|
||||
|
|
Loading…
Reference in New Issue