Adds initial version of book cover view mode.
This commit is contained in:
mateuswetah
parent
e67e6f72c3
commit
609b6e6314
|
|
@ -0,0 +1,114 @@
|
|||
.tainacan-books-container {
|
||||
padding: 30px 4.166666667%;
|
||||
background-color: #f5f5f5;
|
||||
-moz-perspective: 100px;
|
||||
-moz-transform-style: preserve-3d;
|
||||
|
||||
.row { justify-content: center; }
|
||||
.col {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-basis: auto;
|
||||
margin-bottom: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* I'd recommend using Modernized to detect 3d transform support
|
||||
* then add a "supports-transform-3d" class
|
||||
*/
|
||||
|
||||
.tainacan-book {
|
||||
position: relative;
|
||||
-moz-perspective: 100px;
|
||||
-webkit-perspective-origin-x: 100px;
|
||||
-webkit-perspective-origin-y: 100px;
|
||||
transform: rotateY(-3deg);
|
||||
-moz-transform: rotateY(-3deg);
|
||||
-webkit-transform: rotateY(-3deg);
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
transition: -moz-transform 0.2s, -webkit-transform 0.2s, transform 0.2s;
|
||||
|
||||
&:hover {
|
||||
-moz-transform: rotateY(-10deg);
|
||||
-webkit-transform: rotateY(-10deg);
|
||||
|
||||
&:after {
|
||||
width: 4.0%;
|
||||
}
|
||||
&::before {
|
||||
left: 3.6%;
|
||||
}
|
||||
.metadata-title {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tainacan-book img {
|
||||
vertical-align: middle;
|
||||
width: 258px;
|
||||
height: auto;
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
border-radius: 4px 1px 1px 10px;
|
||||
}
|
||||
|
||||
.tainacan-book:before,
|
||||
.tainacan-book:after {
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
height: 96%;
|
||||
content: ' ';
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.tainacan-book:before {
|
||||
width: 100%;
|
||||
left: 3.5%;
|
||||
background-color: #333;
|
||||
box-shadow: 0px 2px 10px #333;
|
||||
transition: left 0.2s;
|
||||
}
|
||||
|
||||
.tainacan-book:after {
|
||||
width: 3.5%;
|
||||
left: 99%;
|
||||
background-color: #EFEFEF;
|
||||
box-shadow: inset 2px 3px 5px #999;
|
||||
-moz-transform: rotateY(20deg);
|
||||
-webkit-transform: perspective(100) rotateY(20deg);
|
||||
transition: width 0.2s;
|
||||
}
|
||||
|
||||
// img {
|
||||
// width: 258px;
|
||||
// height: auto;
|
||||
// border-radius: 2px;
|
||||
// }
|
||||
|
||||
|
||||
.metadata-title {
|
||||
flex-shrink: 0;
|
||||
border-radius: 5px;
|
||||
font-size: 0.875rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
background-color: rgba(255,255,255,0.45);
|
||||
transition: opacity 0.5s;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -3;
|
||||
margin: 8px 10px;
|
||||
border: 1px solid #e3e3e3;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
background-color: #f5f5f5;
|
||||
|
||||
.row {
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.col { flex-grow: 0; }
|
||||
|
|
@ -16,6 +16,10 @@
|
|||
background: black;
|
||||
box-shadow: 0 10px 10px -6px rgba(0, 0, 0, 0.4);
|
||||
padding: 12px;
|
||||
|
||||
&:hover .art::before {
|
||||
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5) inset;
|
||||
}
|
||||
}
|
||||
|
||||
.mat {
|
||||
|
|
@ -29,7 +33,7 @@
|
|||
|
||||
}
|
||||
.art::before {
|
||||
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5) inset;
|
||||
box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.5) inset;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -37,6 +41,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 2px;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.art img {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.tainacan-grid-container {
|
||||
padding: 30px 4.166666667%;
|
||||
|
||||
.row { justify-content: flex-start; }
|
||||
.row { justify-content: center; }
|
||||
.col { flex-grow: 0; }
|
||||
|
||||
.tainacan-grid {
|
||||
|
|
|
|||
|
|
@ -208,4 +208,6 @@ form{
|
|||
|
||||
@import "_view-mode-frame.scss";
|
||||
|
||||
@import "_view-mode-masonry.scss";
|
||||
@import "_view-mode-masonry.scss";
|
||||
|
||||
@import "_view-mode-books.scss";
|
||||
|
|
@ -81,7 +81,13 @@ if(!function_exists('tainacan_setup')) {
|
|||
tainacan_register_view_mode('masonry', [
|
||||
'label' => 'Masonry view',
|
||||
'description' => 'A masonry view',
|
||||
'icon' => '<span class="icon"><i class="mdi mdi-collage mdi-24px"></i></span>',
|
||||
'icon' => '<span class="icon"><i class="mdi mdi-view-dashboard mdi-24px"></i></span>',
|
||||
'dynamic_metadata' => false,
|
||||
]);
|
||||
tainacan_register_view_mode('books', [
|
||||
'label' => 'Books view',
|
||||
'description' => 'A books view, made for library visualizations',
|
||||
'icon' => '<span class="icon"><i class="mdi mdi-library-books mdi-24px"></i></span>',
|
||||
'dynamic_metadata' => false,
|
||||
]);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,30 @@
|
|||
<?php if (have_posts()): ?>
|
||||
|
||||
<div class="tainacan-books-container">
|
||||
|
||||
<div class="row no-gutters">
|
||||
<?php while (have_posts()): the_post(); ?>
|
||||
<div class="col col-sm-12 col-md-6 col-lg-4 col-xl-3">
|
||||
<div class="tainacan-book">
|
||||
<?php if ( tainacan_current_view_displays('thumbnail') ): ?>
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<?php the_post_thumbnail('large'); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<?php if ( tainacan_current_view_displays('title') ): ?>
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<p class="metadata-title"><?php the_title(); ?></p>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
<div class="tainacan-books-container">
|
||||
Nenhum item encontrado
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<?php if ( tainacan_current_view_displays('thumbnail') ): ?>
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<?php the_post_thumbnail('medium', array('class' => 'mr-4')); ?>
|
||||
<?php the_post_thumbnail('medium_large', array('class' => 'mr-4')); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
<div class="tainacan-cards-container">
|
||||
<div class="tainacan-frame-container">
|
||||
Nenhum item encontrado
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,18 @@
|
|||
<?php while (have_posts()): the_post(); ?>
|
||||
<div class="col">
|
||||
<div class="tainacan-grid">
|
||||
<?php the_post_thumbnail('medium'); ?>
|
||||
<p class="metadata-title"><?php the_title(); ?></p>
|
||||
<?php if ( tainacan_current_view_displays('thumbnail') ): ?>
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<?php the_post_thumbnail('medium'); ?>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
|
@ -16,7 +26,7 @@
|
|||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
<div class="tainacan-cards-container">
|
||||
<div class="tainacan-grid-container">
|
||||
Nenhum item encontrado
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,16 @@
|
|||
<?php while (have_posts()): the_post(); ?>
|
||||
|
||||
<div class="tainacan-mosaic">
|
||||
<?php the_post_thumbnail('large'); ?>
|
||||
<p class="metadata-title"><?php the_title(); ?></p>
|
||||
<?php if ( tainacan_current_view_displays('thumbnail') ): ?>
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<?php the_post_thumbnail('large'); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
<?php if ( tainacan_current_view_displays('title') ): ?>
|
||||
<a href="<?php the_permalink(); ?>">
|
||||
<p class="metadata-title"><?php the_title(); ?></p>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<?php endwhile; ?>
|
||||
|
|
@ -14,7 +22,7 @@
|
|||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
<div class="tainacan-cards-container">
|
||||
<div class="tainacan-mosaic-container">
|
||||
Nenhum item encontrado
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue