0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

play overlay

Browse source
This commit is contained in:
j 2021-11-22 17:41:00 +01:00
parent 2a24beb579
commit 31749ee82b
3 changed files with 22 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/static/css/partials/_film.scss
View file

@ -104,11 +104,26 @@ main > .film {
text-decoration: none; text-decoration: none;
} }
figure { figure {
position: relative;
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
object-fit: contain; object-fit: contain;
} }
.overlay {
position: absolute;
height: 100%;
width: 100%;
display: flex;
img {
width: 50%;
margin: auto;
padding-bottom: 64px;
&:hover {
filter: invert(1);
}
}
}
} }
} }
@media screen and (max-width: 799px) { @media screen and (max-width: 799px) {

4
app/static/svg/play.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256">
<polygon points="56,32 248,128 56,224" fill="#F0F0F080"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 136 B

3
app/templates/film.html
View file

@ -79,6 +79,9 @@ body {
<div class="item"> <div class="item">
<a href="play/{{ item.id }}"> <a href="play/{{ item.id }}">
<figure> <figure>
<div class="overlay">
<img src="{% static 'svg/play.svg' %}">
</div>
<img src="https://archive.njp.ma/{{ item.id }}/480p.jpg"> <img src="https://archive.njp.ma/{{ item.id }}/480p.jpg">
<figcaption> <figcaption>
{{ item.title | safe }} {{ item.title | safe }}