Adds inital version of polaroid view mode.

This commit is contained in:
mateuswetah 2018-05-30 23:18:40 -03:00
parent a9b69a95d5
commit c77255686d
4 changed files with 118 additions and 1 deletions

View File

@ -0,0 +1,74 @@
.tainacan-polaroid-container {
padding: 30px 4.166666667%;
background-color: #f5f5f5;
.row { justify-content: space-around; }
.col {
flex-grow: 0;
&:nth-of-type(odd) {
transform: rotate(0.5deg);
}
&:nth-of-type(even) {
transform: rotate(-1.0deg);
}
&:nth-of-type(3n+0) {
transform: rotate(1.0deg);
}
&:nth-of-type(7n+0) {
transform: rotate(-0.5deg);
}
}
.tainacan-polaroid {
padding: 16px;
text-align: center;
background-color: white;
box-shadow: 0px 2px 14px -8px #333;
margin: 16px;
transition: box-shadow 0.1s;
&:hover {
box-shadow: 0px 3px 16px -7px #333;
}
img {
width: 258px;
height: auto;
margin-bottom: 0.75rem;
}
.metadata-title {
flex-shrink: 0;
font-size: 0.875rem;
margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
padding-bottom: 1.0rem;
text-align: center;
}
.list-metadata {
flex: 1;
font-size: 0.6875rem;
color: gray;
overflow: hidden;
display: grid;
.metadata-label {
font-size: 0.75rem;
line-height: 1.0;
margin-bottom: 0.2rem;
}
.metadata-value {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
}

View File

@ -210,4 +210,6 @@ form{
@import "_view-mode-masonry.scss";
@import "_view-mode-books.scss";
@import "_view-mode-books.scss";
@import "_view-mode-polaroid.scss";

View File

@ -90,6 +90,12 @@ if(!function_exists('tainacan_setup')) {
'icon' => '<span class="icon"><i class="mdi mdi-library-books mdi-24px"></i></span>',
'dynamic_metadata' => false,
]);
tainacan_register_view_mode('polaroid', [
'label' => 'Polaroid view',
'description' => 'A framed picture view, similar to polaroid photographs',
'icon' => '<span class="icon"><i class="mdi mdi-polaroid mdi-24px"></i></span>',
'dynamic_metadata' => true,
]);
}
}

View File

@ -0,0 +1,35 @@
<?php if (have_posts()): ?>
<div class="tainacan-polaroid-container">
<div class="row no-gutters">
<?php while (have_posts()): the_post(); ?>
<div class="col">
<div class="tainacan-polaroid">
<?php if ( tainacan_current_view_displays('thumbnail') ): ?>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium_large'); ?>
</a>
<?php endif; ?>
<?php if ( tainacan_current_view_displays('title') ): ?>
<p class="metadata-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</p>
<?php endif; ?>
<div class="list-metadata">
<?php tainacan_the_metadata(array('metadata__in' => $displayed_metadata, 'exclude_title' => true, 'before_title' => '<h3 class="metadata-label">', 'before_value' => '<p class="metadata-value">')); ?>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
<?php else: ?>
<div class="tainacan-grid-container">
Nenhum item encontrado
</div>
<?php endif; ?>