Adds initial gallery view mode (quite experimental this one).
This commit is contained in:
mateuswetah
parent
c77255686d
commit
971437b802
|
|
@ -0,0 +1,126 @@
|
||||||
|
.tainacan-gallery-container {
|
||||||
|
padding: 30px 24px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
|
||||||
|
.tainacan-gallery {
|
||||||
|
padding: 12px 4.166666667% 24px 4.166666667%;
|
||||||
|
|
||||||
|
.frame {
|
||||||
|
background: black;
|
||||||
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.6);
|
||||||
|
padding: 5px;
|
||||||
|
|
||||||
|
&:hover .art::before {
|
||||||
|
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5) inset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat {
|
||||||
|
background: white;
|
||||||
|
padding: 10px;
|
||||||
|
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.5) inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.art {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover img {
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.art img {
|
||||||
|
width: 100px;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.3s;
|
||||||
|
}
|
||||||
|
.art::before {
|
||||||
|
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5) inset;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media {
|
||||||
|
.media-body {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.list-metadata {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 0.6875rem;
|
||||||
|
color: gray;
|
||||||
|
background-color: white;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
box-shadow: 0 2px 8px -8px #333;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
.metadata-title {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
margin-bottom: 0.875rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.0;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metadata-value {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.metadata-title,
|
||||||
|
.metadata-label,
|
||||||
|
.metadata-value {
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 22px;
|
||||||
|
float: left;
|
||||||
|
margin-left: 10px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
border-right: 1px solid #ddd;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-transform-origin: 0 100%;
|
||||||
|
-ms-transform-origin: 0 100%;
|
||||||
|
transform-origin: 0 100%;
|
||||||
|
-webkit-transform: rotate(-135deg);
|
||||||
|
-ms-transform: rotate(-135deg);
|
||||||
|
transform: rotate(-135deg);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -212,4 +212,6 @@ form{
|
||||||
|
|
||||||
@import "_view-mode-books.scss";
|
@import "_view-mode-books.scss";
|
||||||
|
|
||||||
@import "_view-mode-polaroid.scss";
|
@import "_view-mode-polaroid.scss";
|
||||||
|
|
||||||
|
@import "_view-mode-gallery.scss";
|
||||||
|
|
@ -78,6 +78,12 @@ if(!function_exists('tainacan_setup')) {
|
||||||
'icon' => '<span class="icon"><i class="mdi mdi-checkbox-intermediate mdi-24px"></i></span>',
|
'icon' => '<span class="icon"><i class="mdi mdi-checkbox-intermediate mdi-24px"></i></span>',
|
||||||
'dynamic_metadata' => false,
|
'dynamic_metadata' => false,
|
||||||
]);
|
]);
|
||||||
|
tainacan_register_view_mode('gallery', [
|
||||||
|
'label' => 'Gallery view',
|
||||||
|
'description' => 'A framed view with metadata, made for gallery expositions',
|
||||||
|
'icon' => '<span class="icon"><i class="mdi mdi-bank mdi-24px"></i></span>',
|
||||||
|
'dynamic_metadata' => true,
|
||||||
|
]);
|
||||||
tainacan_register_view_mode('masonry', [
|
tainacan_register_view_mode('masonry', [
|
||||||
'label' => 'Masonry view',
|
'label' => 'Masonry view',
|
||||||
'description' => 'A masonry view',
|
'description' => 'A masonry view',
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,7 @@
|
||||||
<div class="frame">
|
<div class="frame">
|
||||||
<div class="mat">
|
<div class="mat">
|
||||||
<div class="art">
|
<div class="art">
|
||||||
|
<?php the_post_thumbnail('medium'); ?>
|
||||||
<?php the_post_thumbnail('medium'); ?>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,47 @@
|
||||||
|
<?php if (have_posts()): ?>
|
||||||
|
|
||||||
|
<div class="tainacan-gallery-container">
|
||||||
|
|
||||||
|
<div class="row no-gutters">
|
||||||
|
<?php while (have_posts()): the_post(); ?>
|
||||||
|
<div class="col col-md-12 col-lg-6 col-xl-4">
|
||||||
|
<div class="tainacan-gallery">
|
||||||
|
<div class="media">
|
||||||
|
|
||||||
|
<?php if ( tainacan_current_view_displays('thumbnail') ): ?>
|
||||||
|
<a href="<?php the_permalink(); ?>">
|
||||||
|
<div class="frame">
|
||||||
|
<div class="mat">
|
||||||
|
<div class="art">
|
||||||
|
<?php the_post_thumbnail('medium_large'); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<div class="media-body pl-3">
|
||||||
|
<div class="list-metadata ">
|
||||||
|
<?php if ( tainacan_current_view_displays('title') ): ?>
|
||||||
|
<p class="metadata-title">
|
||||||
|
<a href="<?php the_permalink(); ?>">
|
||||||
|
<?php the_title(); ?>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php endwhile; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php else: ?>
|
||||||
|
<div class="tainacan-gallery-container">
|
||||||
|
Nenhum item encontrado
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
Loading…
Reference in New Issue