Several experiments for collection items list page.
This commit is contained in:
mateuswetah
parent
3c81d206ce
commit
b04fccd91b
|
|
@ -2,8 +2,16 @@
|
|||
if (! defined('WP_DEBUG')) {
|
||||
die( 'Direct access forbidden.' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue scripts and styles.
|
||||
*/
|
||||
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' )
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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
203
style.css
|
|
@ -5,3 +5,206 @@
|
|||
* 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 */
|
||||
/* 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 */
|
||||
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
|
|
@ -1,40 +1,36 @@
|
|||
<?php get_header(); ?>
|
||||
|
||||
<article class="page type-page hentry singular">
|
||||
<header class="entry-header has-text-align-center">
|
||||
<div class="entry-header-inner section-inner medium">
|
||||
<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="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">
|
||||
<?php tainacan_the_collection_name(); ?>
|
||||
</h1>
|
||||
<?php $tainacan_collection_description = tainacan_get_the_collection_description(); ?>
|
||||
<?php if ( ! empty( $tainacan_collection_description )) : ?>
|
||||
<?php if (has_post_thumbnail( tainacan_get_collection_id() )): ?>
|
||||
<div class="entry-description">
|
||||
<?php else: ?>
|
||||
<div class="entry-description">
|
||||
<?php endif; ?>
|
||||
<?php tainacan_the_collection_description(); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php $tainacan_collection_description = tainacan_get_the_collection_description(); ?>
|
||||
<?php if ( ! empty( $tainacan_collection_description )) : ?>
|
||||
<?php if (has_post_thumbnail( tainacan_get_collection_id() )): ?>
|
||||
<div class="entry-description">
|
||||
<?php else: ?>
|
||||
<div class="entry-description">
|
||||
<?php endif; ?>
|
||||
<?php tainacan_the_collection_description(); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<div class="entry-content">
|
||||
<?php
|
||||
tainacan_the_faceted_search();
|
||||
tainacan_the_faceted_search([
|
||||
'hide-hide-filters-button' => true
|
||||
]);
|
||||
?>
|
||||
</div>
|
||||
</article>
|
||||
|
|
|
|||
Loading…
Reference in New Issue