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

improvement: amelioration des preview

Browse source 
Fixes #4
This commit is contained in:
Kazhnuz 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-template-rows: auto;
grid-gap: $lineheight; grid-gap: $lineheight;
padding-bottom: $lineheight; padding-bottom: $lineheight;
@include xl() { @include xl() {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
@ -58,7 +58,6 @@ $preview-height: 8*$lineheight;
height: $preview-height; height: $preview-height;
font-size:0.9rem; font-size:0.9rem;
line-height: $lineheight !important; line-height: $lineheight !important;
padding:0.2em;
text-align:justify; text-align:justify;
background-color:rgba(0,0,0,0.00); background-color:rgba(0,0,0,0.00);
color:rgba(0,0,0,0.4); color:rgba(0,0,0,0.4);
@ -75,9 +74,9 @@ $preview-height: 8*$lineheight;
top: 0; top: 0;
left: 0; left: 0;
position: absolute; position: absolute;
padding: $lineheight_half; padding-top: $lineheight_half;
backdrop-filter: none; backdrop-filter: none;
transition: background 0.3s; transition: background-color 0.3s;
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $color-light; color: $color-light;
@ -100,9 +99,10 @@ $preview-height: 8*$lineheight;
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
background-color:rgba(0,0,0,0.4); background-color:rgba(0,0,0,0.4);
.preview-metadata { .metadata-pills {
opacity: .9; opacity: .9;
transition: opacity .5s; transition: opacity .5s, height .5s;
height:135px;
} }
} }
} }
@ -141,13 +141,26 @@ $preview-height: 8*$lineheight;
} }
.preview-metadata { .preview-metadata {
opacity: 0;
transition: opacity .3s;
color: $color-light; 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 { .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 { .card-preview time {

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

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

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

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