tmdinosaurcenter
/
blocksy-tainacan
mirror of https://github.com/tainacan/blocksy-tainacan.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds option for simple vs boxed header style on items list.

This commit is contained in:
mateuswetah 2021-02-14 21:37:52 -03:00
parent 2c72969ff1
commit baf8893a70
8 changed files with 78 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
inc/options/archive-elements/page-header.php
View File

@ -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',

25
sass/tainacan-item-archive.scss
View File

@ -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));
}
}

9
sass/tainacan-item-single.scss
View File

@ -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
View File

@ -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);

6
style.css.map
View File

File diff suppressed because one or more lines are too long

2
style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
style.min.css.map
View File

File diff suppressed because one or more lines are too long

11
tainacan/archive-items.php
View File

@ -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