kazhnuz
/
kazhnuz.css
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improvement: amelioration des preview 

Fixes #4
This commit is contained in:
Kazhnuz Klappsthul 2020-12-27 19:17:18 +01:00
parent 1c94a221db
commit 95dc3b05fe
3 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/scss/components/_previews.scss
View File

@ -11,7 +11,7 @@ $preview-height: 8*$lineheight;
grid-template-rows: auto;
grid-gap: $lineheight;
padding-bottom: $lineheight;
@include xl() {
grid-template-columns: 1fr 1fr;
}
@ -58,7 +58,6 @@ $preview-height: 8*$lineheight;
height: $preview-height;
font-size:0.9rem;
line-height: $lineheight !important;
padding:0.2em;
text-align:justify;
background-color:rgba(0,0,0,0.00);
color:rgba(0,0,0,0.4);
@ -75,9 +74,9 @@ $preview-height: 8*$lineheight;
top: 0;
left: 0;
position: absolute;
padding: $lineheight_half;
padding-top: $lineheight_half;
backdrop-filter: none;
transition: background 0.3s;
transition: background-color 0.3s;
h1, h2, h3, h4, h5, h6 {
color: $color-light;
@ -100,9 +99,10 @@ $preview-height: 8*$lineheight;
backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4);
.preview-metadata {
.metadata-pills {
opacity: .9;
transition: opacity .5s;
transition: opacity .5s, height .5s;
height:135px;
}
}
}
@ -141,13 +141,26 @@ $preview-height: 8*$lineheight;
}
.preview-metadata {
opacity: 0;
transition: opacity .3s;
color: $color-light;
height:165px;
overflow: hidden;
.metadata-pills {
height:165px;
opacity: 0;
transition: opacity .3s, height .3s;
display:flex;
justify-content:space-between;
padding-left: $lineheight/2;
padding-right: $lineheight/2;
}
}
.comment-text {
margin-top:0.8em;
@include angled-edge('outside top', 'upper left', $color-violet, 16);
color: $color-light;
background-color:$color-violet;
text-align: center;
}
.card-preview time {

8
src/static/includes/components/_preview-image.html
View File

@ -5,9 +5,11 @@
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
<div class="metadata-pills">
<div class="align-right"><time><span class="chip chip-primary">27/02/2017</span></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
</div>
<div class="comment-text">3 commentaires</div>
</div>
</div>
</div>

8
src/static/includes/components/_preview-text.html
View File

@ -5,9 +5,11 @@
<div class="preview-overlay">
<h1 class="card-header">Exemple titre</h1>
<div class="preview-metadata">
<div class="align-right"><time><small>Le 27/02/2017</small></time></div>
<div class="align-left"><span class="chip chip-primary">video</span></div>
<div class="align-center comment-text">3 commentaires</div>
<div class="metadata-pills">
<div><span class="chip chip-primary">video</span></div>
<div><time><span class="chip chip-primary">27/02/2017</span></time></div>
</div>
<div class="comment-text">3 commentaires</div>
</div>
</div>
</div>