r
/
lumbung.space
forked from ruangrupa/lumbung.space
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make video boxes closer to figma design

This commit is contained in:
Aadil Ayub 2022-01-06 17:38:36 +05:00
parent 2442944d69
commit ed3eefdd0a
4 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
themes/lumbung-theme/layouts/partials/video_box.html
View File

@ -1,4 +1,5 @@
<div class='video-box'>
<div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
<div class='media' id='media-{{ .Params.uuid }}'>
<span class='video-thumbnail' id='thumb-{{ .Params.uuid }}'
href="https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}"
@ -9,9 +10,9 @@
<img src="{{.Site.BaseURL}}{{ .File.Dir }}{{ .Params.preview_image }}">
{{ if .Params.is_live}}
<div class="video-thumbnail-duration-overlay">LIVE</div>
<div class="video-thumbnail-duration-overlay">LIVE</div>
{{ else }}
<div class="video-thumbnail-duration-overlay">{{.Params.video_duration}}</div>
<div class="video-thumbnail-duration-overlay">{{.Params.video_duration}}</div>
{{ end }}
<div class="play-overlay">
@ -21,10 +22,13 @@
</div>
<div class='video metadata'>
<div class='title'>{{ .Title }}</div>
<div class='video channel'><a href='{{ .Params.channel_url }}'> {{ .Params.video_channel }}</a></div>
<input class='descr_button' type='checkbox' id='toggle-{{ .Params.uuid }}'/>
<label class='video' for='toggle-{{ .Params.uuid }}'>↕</label>
<div class='video date'> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
<label class='video' for='toggle-{{ .Params.uuid }}'>
<svg class="dot" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
</svg>
</label>
<div class='video date' style="display: none;"> <a href='https://tv.lumbung.space/videos/watch/{{ .Params.uuid }}'> {{ .Date.Format "Jan 02, 2006" }}</a></div>
<div class="description video" id='vid-{{ .Params.uuid }}'> {{ .Content }}
<ul>
{{ range (.GetTerms "categories") }}

1
themes/lumbung-theme/static/css/main.css
View File

@ -542,7 +542,6 @@ input:checked + label +.calendar-location+.description {
}
.metadata label {
text-align: center;
vertical-align: sub;
flex-grow: 1;
font-weight: normal;

32
themes/lumbung-theme/static/css/video-box.css
View File

@ -4,9 +4,9 @@
}
.video-box {
border:2px solid var(--tv-dark);
max-width:560px;
margin:auto;
border-top: 1px solid var(--tv-dark);
max-width: 560px;
margin: auto;
margin-bottom: 2em;
color: var(--tv-dark);
}
@ -124,8 +124,8 @@ input:checked + label + .video.date +.description {
.video-thumbnail-duration-overlay {
display: inline-block;
background-color: var(--tv-light);
color: chocolate;
background-color: var(--tv-dark);
color: white;
font-size: 14px;
line-height: 1.1;
z-index: 10;
@ -157,3 +157,25 @@ input:checked + label + .video.date +.description {
.video-thumbnail:hover .play-overlay .play-icon {
transform:translate(-50%,-50%) scale(1);
}
.video-box .dot {
fill: var(--tv-dark);
}
.video.channel a {
width: max-content;
background: var(--tv-dark);
padding: 0.5em;
position: relative;
bottom: 19px;
z-index: 1;
transform: rotate(2deg);
color: white;
}
.video.channel {
background: var(--tv-light);
display: flex;
justify-content: center;
border: none;
}

4
themes/lumbung-theme/static/img/dot.svg
View File

@ -1,3 +1,3 @@
<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" fill="black"/>
<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 765 B

After

Width:  |  Height:  |  Size: 745 B