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

Adds skeleton template to grid view mode.

This commit is contained in:
mateuswetah 2018-12-11 09:32:29 -02:00
parent a5229b0489
commit 73cb6ee5eb
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/scss/_view-mode-grid.scss
View File

@ -6,21 +6,24 @@
grid-template-columns: repeat(auto-fill, 285px);
grid-gap: 0px;
justify-content: space-evenly;
animation-name: item-appear;
animation-name: appear;
animation-duration: 0.5s;
.row { justify-content: space-around }
.col { flex-grow: 0; }
.tainacan-grid-item {
animation-name: item-appear;
animation-duration: 0.5s;
max-width: 255px;
width: 255px;
margin: 12px 15px 24px 15px;
text-align: center;
display: block;
text-decoration: none !important;
&.skeleton {
width: 255px;
height: 295px;
}
.grid-item-thumbnail {
width: 255px;
height: 255px;

14
src/functions.php
View File

@ -72,6 +72,20 @@ if ( ! function_exists( 'tainacan_setup' ) ) {
'icon' => '<span class="icon"><i class="mdi mdi-apps mdi-24px"></i></span>',
'dynamic_metadata' => false,
'template' => get_template_directory() . '/tainacan/view-mode-grid.php',
'skeleton_template' => '<div class="tainacan-grid-container">
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
<div class="skeleton tainacan-grid-item"></div>
</div>'
));
}