Several experiments for collection items list page.

This commit is contained in:
mateuswetah 2020-09-10 23:47:04 -03:00
parent 3c81d206ce
commit b04fccd91b
10 changed files with 2106 additions and 29 deletions

View File

@ -2,8 +2,16 @@
if (! defined('WP_DEBUG')) { if (! defined('WP_DEBUG')) {
die( 'Direct access forbidden.' ); die( 'Direct access forbidden.' );
} }
/**
* Enqueue scripts and styles.
*/
add_action( 'wp_enqueue_scripts', function () { add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'blocksy-parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'tainacan-blocksy-style',
get_stylesheet_directory_uri() . '/style.min.css',
array( 'blocksy-parent-style' )
);
}); });

0
js/index.js Normal file
View File

1632
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

25
package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "blocksy-tainacan",
"version": "1.0.0",
"description": "A Blocksy child theme compatible with Tainacan",
"main": "index.js",
"scripts": {
"compile-styles": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 sass/style.scss style.css",
"css-minify": "cleancss --level 1 --format breaksWith=lf --source-map --source-map-inline-sources --output style.min.css style.css",
"build": "npm run compile-styles && npm run css-minify"
},
"repository": {
"type": "git",
"url": "git+https://github.com/tainacan/blocksy-tainacan.git"
},
"author": "mateuswetah",
"license": "ISC",
"bugs": {
"url": "https://github.com/tainacan/blocksy-tainacan/issues"
},
"homepage": "https://github.com/tainacan/blocksy-tainacan#readme",
"devDependencies": {
"clean-css-cli": "^4.3.0",
"node-sass": "^4.14.1"
}
}

198
sass/style.scss Normal file
View File

@ -0,0 +1,198 @@
/**
* Theme Name: Blocksy Tainacan
* Description: A Blocksy Child theme compatible with Tainacan plugin
* Author: Tainacan
* Template: blocksy
* Text Domain: blocksy-tainacan
*/
/* Tainacan Items list customization */
.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));
display: grid !important;
grid-template-columns: var(--tainacan-filter-menu-width-theme, 20%) auto;
grid-template-rows: auto auto;
margin-top: -42px !important;
background: transparent;
/* Tainacan items list view modes */
.tainacan-masonry-container .tainacan-masonry-item,
.tainacan-records-container .tainacan-record,
.tainacan-cards-container .tainacan-card,
.tainacan-list-container .tainacan-list {
border-radius: var(--borderRadius, 3px);
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
border: var(--border, none);
overflow: hidden;
.metadata-title p {
font-weight: 500;
}
.metadata-value,
.metadata-label {
font-size: 0.8125em !important;
}
}
.tainacan-records-container .tainacan-record,
.tainacan-list-container .tainacan-list {
background-color: var(--tainacan-item-background-color, white) !important;
}
.tainacan-table {
.column-main-content p {
font-weight: 500;
}
td p {
font-size: 0.725em !important;
}
}
/* Search control */
.search-control {
grid-row-start: 1;
grid-row-end: 1;
justify-self: stretch;
align-self: start;
border-radius: var(--borderRadius, 3px);
background-color: var(--tainacan-item-background-color, white);
padding: 20px 20px 6px 20px !important;
margin: 12px 10px;
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
.search-control-item {
margin-bottom: 20px;
&:first-of-type {
width: 100%;
}
}
}
/* Filters panel */
#filters-modal {
grid-column-start: 1;
grid-row-start: 2;
justify-self: stretch;
align-self: start;
max-width: 100%;
.modal-content {
padding: 24px 18px;
#filters-items-list {
border-radius: var(--borderRadius, 3px);
background-color: var(--tainacan-item-background-color, white);
padding: 20px;
margin: -3px;
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
}
}
}
/* Items list container */
#items-list-area {
max-width: 100% !important;
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
justify-self: stretch;
align-self: stretch;
#items-list-results {
display: flex;
flex-wrap: wrap;
.table-container {
min-width: 100%;
padding-top: 12px;
padding-left: 24px;
padding-bottom: 24px;
padding-right: 24px;
}
.pagination-area {
width: 100%;
}
}
}
/* Advanced Search */
.advanced-search-criteria-title hr {
display: none;
}
}
/* Tooltips and Modals are outside of the items list div */
body:not(.tainacan-admin-page) {
.tooltip,
.tainacan-modal-content {
--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-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-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-modal-content {
border-radius: var(--borderRadius, 6px);
.tainacan-modal-title {
hr {
display: none;
}
}
.tabs li {
margin-bottom: 0px;
}
.modal-card-body {
background-color: var(--tainacan-item-background-color, white);
}
}
}
/* Collection Items List */
.tainacan-collection-header {
display: flex;
padding: 36px 12px 28px 12px;
justify-content: center;
align-items: center;
.tainacan-collection-header__box {
width: var(--maxSiteWidth);
border-radius: var(--borderRadius,3px);
background-color: var(--tainacan-item-background-color,#fff);
padding: 20px;
box-shadow: var(--boxShadow,0 12px 18px -6px rgba(34,56,101,.04));
h1 {
margin-bottom: 12px;
display: inline-block;
}
.collection-thumbnail {
max-width: var(--tainacan-filter-menu-width-theme, 20%);
float: left;
margin-right: 24px;
img {
border-radius: var(--borderRadius,3px);
}
}
}
}

203
style.css
View File

@ -5,3 +5,206 @@
* Template: blocksy * Template: blocksy
* Text Domain: blocksy-tainacan * Text Domain: blocksy-tainacan
*/ */
/* Tainacan Items list customization */
.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));
display: grid !important;
grid-template-columns: var(--tainacan-filter-menu-width-theme, 20%) auto;
grid-template-rows: auto auto;
margin-top: -42px !important;
background: transparent;
/* Tainacan items list view modes */
/* Search control */
/* Filters panel */
/* Items list container */
/* Advanced Search */
}
.theme-items-list .tainacan-masonry-container .tainacan-masonry-item,
.theme-items-list .tainacan-records-container .tainacan-record,
.theme-items-list .tainacan-cards-container .tainacan-card,
.theme-items-list .tainacan-list-container .tainacan-list {
border-radius: var(--borderRadius, 3px);
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
border: var(--border, none);
overflow: hidden;
}
.theme-items-list .tainacan-masonry-container .tainacan-masonry-item .metadata-title p,
.theme-items-list .tainacan-records-container .tainacan-record .metadata-title p,
.theme-items-list .tainacan-cards-container .tainacan-card .metadata-title p,
.theme-items-list .tainacan-list-container .tainacan-list .metadata-title p {
font-weight: 500;
}
.theme-items-list .tainacan-masonry-container .tainacan-masonry-item .metadata-value,
.theme-items-list .tainacan-masonry-container .tainacan-masonry-item .metadata-label,
.theme-items-list .tainacan-records-container .tainacan-record .metadata-value,
.theme-items-list .tainacan-records-container .tainacan-record .metadata-label,
.theme-items-list .tainacan-cards-container .tainacan-card .metadata-value,
.theme-items-list .tainacan-cards-container .tainacan-card .metadata-label,
.theme-items-list .tainacan-list-container .tainacan-list .metadata-value,
.theme-items-list .tainacan-list-container .tainacan-list .metadata-label {
font-size: 0.8125em !important;
}
.theme-items-list .tainacan-records-container .tainacan-record,
.theme-items-list .tainacan-list-container .tainacan-list {
background-color: var(--tainacan-item-background-color, white) !important;
}
.theme-items-list .tainacan-table .column-main-content p {
font-weight: 500;
}
.theme-items-list .tainacan-table td p {
font-size: 0.725em !important;
}
.theme-items-list .search-control {
grid-row-start: 1;
grid-row-end: 1;
justify-self: stretch;
align-self: start;
border-radius: var(--borderRadius, 3px);
background-color: var(--tainacan-item-background-color, white);
padding: 20px 20px 6px 20px !important;
margin: 12px 10px;
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
}
.theme-items-list .search-control .search-control-item {
margin-bottom: 20px;
}
.theme-items-list .search-control .search-control-item:first-of-type {
width: 100%;
}
.theme-items-list #filters-modal {
grid-column-start: 1;
grid-row-start: 2;
justify-self: stretch;
align-self: start;
max-width: 100%;
}
.theme-items-list #filters-modal .modal-content {
padding: 24px 18px;
}
.theme-items-list #filters-modal .modal-content #filters-items-list {
border-radius: var(--borderRadius, 3px);
background-color: var(--tainacan-item-background-color, white);
padding: 20px;
margin: -3px;
box-shadow: var(--boxShadow, 0px 12px 18px -6px rgba(34, 56, 101, 0.04));
}
.theme-items-list #items-list-area {
max-width: 100% !important;
grid-row-start: 1;
grid-column-start: 2;
grid-row-end: 3;
justify-self: stretch;
align-self: stretch;
}
.theme-items-list #items-list-area #items-list-results {
display: flex;
flex-wrap: wrap;
}
.theme-items-list #items-list-area #items-list-results .table-container {
min-width: 100%;
padding-top: 12px;
padding-left: 24px;
padding-bottom: 24px;
padding-right: 24px;
}
.theme-items-list #items-list-area #items-list-results .pagination-area {
width: 100%;
}
.theme-items-list .advanced-search-criteria-title hr {
display: none;
}
/* Tooltips and Modals are outside of the items list div */
body:not(.tainacan-admin-page) .tooltip,
body:not(.tainacan-admin-page) .tainacan-modal-content {
--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-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-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));
}
body:not(.tainacan-admin-page) .tainacan-modal-content {
border-radius: var(--borderRadius, 6px);
}
body:not(.tainacan-admin-page) .tainacan-modal-content .tainacan-modal-title hr {
display: none;
}
body:not(.tainacan-admin-page) .tainacan-modal-content .tabs li {
margin-bottom: 0px;
}
body:not(.tainacan-admin-page) .tainacan-modal-content .modal-card-body {
background-color: var(--tainacan-item-background-color, white);
}
/* Collection Items List */
.tainacan-collection-header {
display: flex;
padding: 36px 12px 28px 12px;
justify-content: center;
align-items: center;
}
.tainacan-collection-header .tainacan-collection-header__box {
width: var(--maxSiteWidth);
border-radius: var(--borderRadius, 3px);
background-color: var(--tainacan-item-background-color, #fff);
padding: 20px;
box-shadow: var(--boxShadow, 0 12px 18px -6px rgba(34, 56, 101, 0.04));
}
.tainacan-collection-header .tainacan-collection-header__box h1 {
margin-bottom: 12px;
display: inline-block;
}
.tainacan-collection-header .tainacan-collection-header__box .collection-thumbnail {
max-width: var(--tainacan-filter-menu-width-theme, 20%);
float: left;
margin-right: 24px;
}
.tainacan-collection-header .tainacan-collection-header__box .collection-thumbnail img {
border-radius: var(--borderRadius, 3px);
}
/*# sourceMappingURL=style.css.map */

12
style.css.map Normal file

File diff suppressed because one or more lines are too long

2
style.min.css vendored Normal file

File diff suppressed because one or more lines are too long

1
style.min.css.map Normal file

File diff suppressed because one or more lines are too long

View File

@ -1,40 +1,36 @@
<?php get_header(); ?> <?php get_header(); ?>
<article class="page type-page hentry singular"> <article class="page type-page hentry singular">
<header class="entry-header has-text-align-center"> <header class="tainacan-collection-header" style="background: <?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 'var(--backgroundColor, #f8f9fb)'; } ?>">
<div class="entry-header-inner section-inner medium"> <div class="tainacan-collection-header__box">
<?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) :
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); ?>
<div class="collection-thumbnail">
<img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" alt="<?php echo esc_attr($alt); ?>">
</div>
<?php endif; ?>
<h1 class="entry-title"> <h1 class="entry-title">
<?php tainacan_the_collection_name(); ?> <?php tainacan_the_collection_name(); ?>
</h1> </h1>
</div> <?php $tainacan_collection_description = tainacan_get_the_collection_description(); ?>
<?php $tainacan_collection_description = tainacan_get_the_collection_description(); ?> <?php if ( ! empty( $tainacan_collection_description )) : ?>
<?php if ( ! empty( $tainacan_collection_description )) : ?> <?php if (has_post_thumbnail( tainacan_get_collection_id() )): ?>
<?php if (has_post_thumbnail( tainacan_get_collection_id() )): ?> <div class="entry-description">
<div class="entry-description"> <?php else: ?>
<?php else: ?> <div class="entry-description">
<div class="entry-description"> <?php endif; ?>
<?php tainacan_the_collection_description(); ?>
</div>
<?php endif; ?> <?php endif; ?>
<?php tainacan_the_collection_description(); ?> </div>
</div>
<?php endif; ?>
</header> </header>
<div class="tainacan-collection-header">
<?php if ( has_post_thumbnail( tainacan_get_collection_id() ) ) :
$thumbnail_id = get_post_thumbnail_id( $post->ID );
$alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); ?>
<div class="single-item-collection--thumbnail">
<img src="<?php echo get_the_post_thumbnail_url( tainacan_get_collection_id() ); ?>" alt="<?php echo esc_attr($alt); ?>">
</div>
<?php endif; ?>
<?php if ( get_header_image() ) : ?>
<div class="hero" style="background-image: url(<?php header_image(); ?>);">
<img src="<?php header_image(); ?>" class="attachment-veganos-hero-thumbnail size-veganos-hero-thumbnail wp-post-image" alt="">
</div>
<?php endif; ?>
</div>
<div class="entry-content"> <div class="entry-content">
<?php <?php
tainacan_the_faceted_search(); tainacan_the_faceted_search([
'hide-hide-filters-button' => true
]);
?> ?>
</div> </div>
</article> </article>