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

Adds color palette options to tainacan archive items

This commit is contained in:
mateuswetah 2021-01-08 19:45:22 -03:00
parent 29c6237dc7
commit f646642eec
9 changed files with 228 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

139
inc/options/archive-elements/color-palettes.php Normal file
View File

@ -0,0 +1,139 @@
<?php
if (! isset($prefix)) {
$prefix = '';
$initial_prefix = '';
} else {
$initial_prefix = $prefix;
$prefix = $prefix . '_';
}
$options = [
$prefix . 'items_list_background_palette' => [
'label' => __( 'Background color palette', 'blocksy-tainacan' ),
'type' => 'ct-color-palettes-picker',
'design' => 'block',
// translators: The interpolations addes a html link around the word.
'desc' => sprintf(
__('Learn more about palettes and colors %shere%s.', 'blocksy'),
'<a href="https://creativethemes.com/blocksy/docs/general-options/colors/" target="_blank">',
'</a>'
),
'setting' => [ 'transport' => 'postMessage' ],
'predefined' => true,
'wrapperAttr' => [
'data-type' => 'color-palette',
'data-label' => 'heading-label'
],
'value' => [
'color1' => [ 'color' => 'var(--background-color, #f8f9fb)' ],
'color2' => [ 'color' => 'var(--cardBackground, #ffffff)' ],
'color3' => [ 'color' => 'var(--cardBackground, #ffffff)' ],
'color4' => [ 'color' => 'var(--formBackgroundInitialColor, #ffffff)' ],
'color5' => [ 'color' => 'var(--background-color, #f8f9fb)' ],
'current_palette' => 'palette-1',
'palettes' => [
[
'id' => 'palette-1',
'color1' => [ 'color' => 'var(--background-color, #f8f9fb)' ],
'color2' => [ 'color' => 'var(--cardBackground, #ffffff)' ],
'color3' => [ 'color' => 'var(--cardBackground, #ffffff)' ],
'color4' => [ 'color' => 'var(--formBackgroundInitialColor, #ffffff)' ],
'color5' => [ 'color' => 'var(--background-color, #f8f9fb)' ],
],
[
'id' => 'palette-2',
'color1' => [ 'color' => '#dfd9cd' ],
'color2' => [ 'color' => '#ece6db' ],
'color3' => [ 'color' => '#f4eee2' ],
'color4' => [ 'color' => '#f4eee2' ],
'color5' => [ 'color' => '#dfd9cd' ],
],
[
'id' => 'palette-3',
'color1' => [ 'color' => '#1e1e1e' ],
'color2' => [ 'color' => '#282828' ],
'color3' => [ 'color' => '#333333' ],
'color4' => [ 'color' => '#333333' ],
'color5' => [ 'color' => '#1e1e1e' ],
]
]
],
'sync' => blocksy_sync_whole_page([
'prefix' => $prefix
]),
],
$prefix . 'items_list_text_palette' => [
'label' => __( 'Text color palette', 'blocksy-tainacan' ),
'type' => 'ct-color-palettes-picker',
'design' => 'block',
// translators: The interpolations addes a html link around the word.
'desc' => sprintf(
__('Learn more about palettes and colors %shere%s.', 'blocksy'),
'<a href="https://creativethemes.com/blocksy/docs/general-options/colors/" target="_blank">',
'</a>'
),
'setting' => [ 'transport' => 'postMessage' ],
'predefined' => true,
'wrapperAttr' => [
'data-type' => 'color-palette',
'data-label' => 'heading-label'
],
'value' => [
'color1' => [ 'color' => 'var(--paletteColor1,#3eaf7c)' ],
'color2' => [ 'color' => 'var(--headingColor, rgba(44, 62, 80, 1))' ],
'color3' => [ 'color' => 'var(--color, #454647)' ],
'color4' => [ 'color' => '#555758' ],
'color5' => [ 'color' => 'var(--formTextInitialColor, #454647)' ],
'current_palette' => 'palette-1',
'palettes' => [
[
'id' => 'palette-1',
'color1' => [ 'color' => 'var(--paletteColor1,#3eaf7c)' ],
'color2' => [ 'color' => 'var(--headingColor, rgba(44, 62, 80, 1))' ],
'color3' => [ 'color' => 'var(--color, #454647)' ],
'color4' => [ 'color' => '#555758' ],
'color5' => [ 'color' => 'var(--formTextInitialColor, #454647)' ],
],
[
'id' => 'palette-2',
'color1' => [ 'color' => '#795040' ],
'color2' => [ 'color' => 'rgb(80, 54, 44)' ],
'color3' => [ 'color' => '#474545' ],
'color4' => [ 'color' => '#585655' ],
'color5' => [ 'color' => '#474545' ],
],
[
'id' => 'palette-3',
'color1' => [ 'color' => '#3eaf7c' ],
'color2' => [ 'color' => 'rgb(207, 216, 225)' ],
'color3' => [ 'color' => '#f0f0f0' ],
'color4' => [ 'color' => '#c8c8c8' ],
'color5' => [ 'color' => '#f0f0f0' ],
]
]
],
'sync' => blocksy_sync_whole_page([
'prefix' => $prefix
]),
]
];

25
inc/options/archive-elements/filters-panel.php
View File

@ -25,12 +25,35 @@ $options = [
'type' => 'ct-radio',
'value' => 'boxed',
'view' => 'text',
'divider' => 'bottom',
'choices' => [
'simple' => __('Simple', 'blocksy'),
'boxed' => __('Boxed', 'blocksy'),
],
],
blocksy_rand_md5() => [
'type' => 'ct-condition',
'condition' => [
$prefix . 'filters_as_modal' => 'no'
],
'options' => [
$prefix . 'filters_panel_size' => [
'label' => __( 'Panel size', 'blocksy-tainacan' ),
'type' => 'ct-slider',
'value' => '20%',
'units' => blocksy_units_config([
[
'unit' => '%',
'min' => 10,
'max' => 80,
]
]),
'sync' => blocksy_sync_whole_page([
'prefix' => $prefix
]),
'divider' => 'bottom'
]
]
],
$prefix . 'start_with_filters_hidden' => [
'label' => __( 'Start with filters hidden', 'blocksy-tainacan' ),
'type' => 'ct-switch',

3
inc/options/posts/tainacan-item-archive.php
View File

@ -32,4 +32,7 @@ $options = [
'enabled' => 'yes'
], false),
blocksy_get_options(get_stylesheet_directory() . '/inc/options/archive-elements/color-palettes.php', [
'prefix' => $post_type->name . '_archive'
], false),
];

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

@ -2,18 +2,18 @@
.theme-items-list {
--tainacan-font-family: var(--fontFamily, inherit);
--tainacan-base-font-size: var(--fontSize, 1em);
--tainacan-secondary: var(--paletteColor1, #3eaf7c);
--tainacan-primary: var(--formBorderInitialColor, #e0e5eb);
--tainacan-background-color: var(--backgroundColor, #f8f9fb);
--tainacan-item-background-color: var(--cardBackground, white);
--tainacan-item-hover-background-color: var(--tainacan-item-background-color, white);
// --tainacan-secondary: var(--paletteColor1, #3eaf7c);
// --tainacan-primary: var(--formBorderInitialColor, #e0e5eb);
// --tainacan-background-color: var(--backgroundColor, #f8f9fb);
//--tainacan-item-background-color: var(--cardBackground, white);
// --tainacan-item-hover-background-color: var(--tainacan-item-background-color, white);
--tainacan-item-heading-hover-background-color: var(--tainacan-item-background-color, white);
--tainacan-input-color: var(--color, rgba(44, 62, 80, 0.9));
--tainacan-input-background-color: var(--formBackgroundInitialColor, white);
// --tainacan-input-color: var(--color, rgba(44, 62, 80, 0.9));
// --tainacan-input-background-color: var(--formBackgroundInitialColor, white);
--tainacan-input-border-color: var(--formBorderInitialColor, #e0e5eb);
--tainacan-heading-color: var(--headingColor, rgba(44, 62, 80, 1));
--tainacan-label-color: var(--color, rgba(44, 62, 80, 0.9));
--tainacan-info-color: var(--color, rgba(44, 62, 80, 0.9));
// --tainacan-heading-color: var(--headingColor, rgba(44, 62, 80, 1));
// --tainacan-label-color: var(--color, rgba(44, 62, 80, 0.9));
// --tainacan-info-color: var(--color, rgba(44, 62, 80, 0.9));
--tainacan-skeleton-color: rgba(252, 252, 252, 0.5);
&:not(.is-fullscreen) {
@ -245,16 +245,13 @@ body:not(.tainacan-admin-page) {
padding: 36px 18px 28px 18px;
justify-content: center;
align-items: center;
background-color: var(--backgroundColor, #f8f9fb);
background-color: var(--tainacan-background-color, #f8f9fb);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
// We also apply this here as we want to keep the same style of the .theme-items-list
--tainacan-secondary: var(--paletteColor1, #3eaf7c);
--tainacan-primary: var(--formBorderInitialColor, #e0e5eb);
--tainacan-background-color: var(--backgroundColor, #f8f9fb);
--tainacan-item-background-color: var(--cardBackground, white);
--headingColor: var(--tainacan-heading-color, rgba(44, 62, 80, 1));
--color: var(--tainacan-label-color, #454647);
--linkInitialColor: var(--tainacan-secondary, #3eaf7c);
.tainacan-collection-header__box {
width: var(--maxSiteWidth, 1290px);
@ -263,7 +260,7 @@ body:not(.tainacan-admin-page) {
padding: 20px;
box-shadow: var(--boxShadow,0 12px 18px -6px rgba(34,56,101,.04));
h1 {
.page-title {
margin-bottom: 4px;
display: inline-block;
}

21
style.css
View File

@ -21,18 +21,8 @@
.theme-items-list {
--tainacan-font-family: var(--fontFamily, inherit);
--tainacan-base-font-size: var(--fontSize, 1em);
--tainacan-secondary: var(--paletteColor1, #3eaf7c);
--tainacan-primary: var(--formBorderInitialColor, #e0e5eb);
--tainacan-background-color: var(--backgroundColor, #f8f9fb);
--tainacan-item-background-color: var(--cardBackground, white);
--tainacan-item-hover-background-color: var(--tainacan-item-background-color, white);
--tainacan-item-heading-hover-background-color: var(--tainacan-item-background-color, white);
--tainacan-input-color: var(--color, rgba(44, 62, 80, 0.9));
--tainacan-input-background-color: var(--formBackgroundInitialColor, white);
--tainacan-input-border-color: var(--formBorderInitialColor, #e0e5eb);
--tainacan-heading-color: var(--headingColor, rgba(44, 62, 80, 1));
--tainacan-label-color: var(--color, rgba(44, 62, 80, 0.9));
--tainacan-info-color: var(--color, rgba(44, 62, 80, 0.9));
--tainacan-skeleton-color: rgba(252, 252, 252, 0.5);
/* Search control */
/* Filters panel */
@ -278,14 +268,13 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
padding: 36px 18px 28px 18px;
justify-content: center;
align-items: center;
background-color: var(--backgroundColor, #f8f9fb);
background-color: var(--tainacan-background-color, #f8f9fb);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
--tainacan-secondary: var(--paletteColor1, #3eaf7c);
--tainacan-primary: var(--formBorderInitialColor, #e0e5eb);
--tainacan-background-color: var(--backgroundColor, #f8f9fb);
--tainacan-item-background-color: var(--cardBackground, white);
--headingColor: var(--tainacan-heading-color, rgba(44, 62, 80, 1));
--color: var(--tainacan-label-color, #454647);
--linkInitialColor: var(--tainacan-secondary, #3eaf7c);
}
.tainacan-collection-header .tainacan-collection-header__box {
@ -296,7 +285,7 @@ body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
box-shadow: var(--boxShadow, 0 12px 18px -6px rgba(34, 56, 101, 0.04));
}
.tainacan-collection-header .tainacan-collection-header__box h1 {
.tainacan-collection-header .tainacan-collection-header__box .page-title {
margin-bottom: 4px;
display: inline-block;
}

4
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

42
tainacan/archive-items.php
View File

@ -1,14 +1,48 @@
<?php
$prefix = blocksy_manager()->screen->get_prefix();
$page_container_classes = 'page type-page hentry singular';
$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' : '' );
$filters_panel_size = get_theme_mod($prefix . '_filters_panel_size', '20%');
$page_container_style = '--tainacan-filter-menu-width-theme:' . $filters_panel_size . ';';
$background_color_palette = get_theme_mod($prefix . '_items_list_background_palette',
[
'color1' => [ 'color' => 'var(--background-color, #f8f9fb)' ],
'color2' => [ 'color' => 'var(--cardBackground, #ffffff)' ],
'color3' => [ 'color' => 'var(--cardBackground, #ffffff)' ],
'color4' => [ 'color' => 'var(--formBackgroundInitialColor, #ffffff)' ],
'color5' => [ 'color' => 'var(--background-color, #f8f9fb)' ],
]);
$page_container_style .= '--tainacan-background-color:' . $background_color_palette['color1']['color'] . ';';
$page_container_style .= '--tainacan-item-background-color:' . $background_color_palette['color2']['color'] . ';';
$page_container_style .= '--tainacan-item-background-hover-color:' . $background_color_palette['color3']['color'] . ';';
$page_container_style .= '--tainacan-input-background-color:' . $background_color_palette['color4']['color'] . ';';
$page_container_style .= '--tainacan-primary-color:' . $background_color_palette['color5']['color'] . ';';
$text_color_palette = get_theme_mod($prefix . '_items_list_text_palette',
[
'color1' => [ 'color' => 'var(--paletteColor1,#3eaf7c)' ],
'color2' => [ 'color' => 'var(--headingColor, rgba(44, 62, 80, 1))' ],
'color3' => [ 'color' => 'var(--color, #454647)' ],
'color4' => [ 'color' => '#555758' ],
'color5' => [ 'color' => 'var(--formTextInitialColor, #454647)' ],
]);
$page_container_style .= '--tainacan-secondary:' . $text_color_palette['color1']['color'] . ';';
$page_container_style .= '--tainacan-heading-color:' . $text_color_palette['color2']['color'] . ';';
$page_container_style .= '--tainacan-label-color:' . $text_color_palette['color3']['color'] . ';';
$page_container_style .= '--tainacan-info-color:' . $text_color_palette['color4']['color'] . ';';
$page_container_style .= '--tainacan-input-color:' . $text_color_palette['color5']['color'] . ';';
$page_container_style .= 'background-color: var(--tainacan-background-color, #f8f9fb);';
?>
<?php get_header(); ?>
<article class="<?php echo $page_container_classes ?>">
<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(--backgroundColor, #f8f9fb)), url(' . get_header_image() . ')'); } else { echo ''; } ?>">
<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 ''; } ?>">
<div class="tainacan-collection-header__box">
<?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) :
$thumbnail_id = get_post_thumbnail_id( $post->ID );
@ -18,7 +52,7 @@ $page_container_classes = $page_container_classes . ( get_theme_mod($prefix . '_
</div>
<?php endif; ?>
<?php
echo blocksy_output_hero_section( 'type-1' );
echo blocksy_output_hero_section('type-1');
?>
</div>
</header>