Skip to content

Commit

Permalink
Merge pull request #154 from MichalSvatos/feature/visuals-video-section
Browse files Browse the repository at this point in the history 
Tweaks - Video page
  • Loading branch information
@henry-fisher
henry-fisher authored Dec 5, 2024
2 parents 1e71c0d + db054b4 commit 079e70e
Show file tree
Hide file tree
Showing 5 changed files with 150 additions and 84 deletions.
22 changes: 5 additions & 17 deletions _includes/c_video.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,16 +16,12 @@
{% endif %}


<li class="video-list__item is-flex is-align-items-flex-start {{ classes }}">
<a class="video-list__link has-overlay has-border has-radius-normal" href="{{ link }}" target="_blank">
{% if include.tags.size > 0 and (isDetailed == null) %}
<span class="video-list__tags tags">
{% for tag in include.tags %}
<span class="video-list__tag tag has-background-white has-text-black">{{ tag | prepend: "#" }}</span>
{% endfor %}
</span>
<li class="video-list__item is-flex is-align-items-center column p-0 {{ classes }}">
<a class="video-list__link video-list__link--thumb has-radius-normal{% unless include.disableHover %} has-overlay{% endunless %}" href="{{ link }}" target="_blank">
{% include e_render-svg-icon.html icon="arrow-up-right" class="video-list__link-icon" dimension=200 inline=true %}
{% if include.thumbnail %}
<img src="{{ include.thumbnail }}" class="video-list__thumb" alt="Video thumbnail - {{ include.title }}" loading="lazy">
{% endif %}
<img src="{{ include.thumbnail }}" class="video-list__thumb" alt="Video thumbnail - {{ include.title }}" loading="lazy">
</a>

<div class="video-list__content">
Expand All @@ -42,14 +38,6 @@
{{ date | date: "%B %d, %Y" }}
</div>
{% endif %}

{% if include.tags.size > 0 %}
<div class="video-list__tags tags mt-2">
{% for tag in include.tags %}
<span class="video-list__tag tag">{{ tag | prepend: "#" }}</span>
{% endfor %}
</div>
{% endif %}
</div>

<div class="buttons mt-4 mb-0">
Expand Down
136 changes: 98 additions & 38 deletions _sass/_video.scss
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,66 @@
.video-list {
&:has(.video-list__item--minimal) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(var(--bulma-size-5) * 12), 1fr));
gap: var(--bulma-size-5);
}
display: flex;

li + li {
margin-top: 0;
}

&--3-videos {
justify-content: center;
}
}

.video-list__item {
flex-basis: 100%;

&:hover {
.video-list__link {
&:before {
opacity: 1;
}
}

.video-list__link-icon {
translate: -50% -50%;
opacity: 1;
}
}

@media (min-width: 476px) {
width: calc((100% / 2) - var(--bulma-column-gap));
flex-grow: 0;
flex-basis: auto;
}

@media (min-width: $tablet) {
width: calc((100% / 4) - var(--bulma-column-gap));
}

// --- 3 main videos
.video-list--3-videos & {
@media (min-width: $tablet) {
width: calc((100% / 3) - (var(--bulma-column-gap) * .95));
}
}

// --- 50% container
.video-list--50 & {
@media (min-width: $tablet) {
width: calc((100% / 2) - (var(--bulma-column-gap) - (var(--bulma-column-gap) * .25)));
}
}

// --- Minimal (Home, Videos)
&--minimal {
border-radius: var(--bulma-radius);
border: 1px solid var(--bulma-border-weak);
}

// --- Detailed ("all videos" version)
// --- Detailed ("Guides" version)
&--detailed {
@media (max-width: 500px) {
width: 100%;

@media (max-width: 519px) {
flex-direction: column;
}
}
Expand All @@ -35,47 +76,70 @@
&:before {
content: '';
position: absolute;
background-image: linear-gradient(0, rgba(0 0 0 / 0), rgba(0 0 0 / 50%));
background-color: rgba(0 0 0 / 50%);
inset: 0;
border-radius: var(--bulma-radius);
opacity: 0;
transition: opacity 350ms ease-in-out;
z-index: 2;
}
}

&:hover {
text-decoration: underline;

&:before {
opacity: 1;
}

.video-list__tags {
translate: 0 0;
}
}

.video-list__item--minimal & {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border: 0;
}

// --- Detailed ("all videos" version)
.video-list__item--detailed & {
@media (min-width: 500px) {
@media (min-width: 520px) {
flex-shrink: 0;
}
}
}

.video-list__link--thumb {
aspect-ratio: 16 / 9;
width: 100%;
background-color: var(--bulma-background-hover);

.video-list__item--detailed & {
width: auto;
}

&:after {
content: '';
width: 15px;
aspect-ratio: 1;
border-radius: 50%;
animation: thumbLoader 1s infinite linear alternate;
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
z-index: 0;
}
}

@keyframes thumbLoader {
0% {box-shadow: 20px 0 var(--bulma-background), -20px 0 var(--bulma-background-active);background: var(--bulma-background) }
33% {box-shadow: 20px 0 var(--bulma-background), -20px 0 var(--bulma-background-active);background: var(--bulma-background-active)}
66% {box-shadow: 20px 0 var(--bulma-background-active),-20px 0 var(--bulma-background); background: var(--bulma-background-active)}
100%{box-shadow: 20px 0 var(--bulma-background-active),-20px 0 var(--bulma-background); background: var(--bulma-background) }
}

.video-list__thumb {
display: block;
position: relative;
z-index: 1;

aspect-ratio: 16 / 9;
object-fit: cover;

.video-list__item--detailed & {
@media (min-width: 500px) {
@media (min-width: 520px) {
width: calc(var(--bulma-size-5) * 10);
}

Expand All @@ -100,7 +164,7 @@
}

.video-list__title {
font-weight: 900;
font-weight: var(--bulma-weight-bold);
line-height: 1.4;
}

Expand All @@ -109,22 +173,18 @@
padding-right: var(--bulma-size-5);
}

.video-list__tags {
.video-list__item--minimal & {
padding: calc(var(--bulma-size-7) * .5);
position: absolute;
inset: 0 0 auto 0;
translate: 0 -100%;
transition: translate .6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
}

.video-list__tag {
.video-list__item--detailed & {
background-color: transparent;
}

.video-list__item--minimal & {
padding-inline: .75em;
.video-list__link-icon {
position: absolute;
inset: auto 0 0 auto;
top: 50%;
left: 50%;
translate: -50% -25%;
opacity: 0;
z-index: 5;
color: var(--bulma-white);
transition: opacity 350ms ease-in-out, translate 350ms ease-in-out;

path {
stroke-width: 4px;
}
}
3 changes: 1 addition & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<div class="column">
{%- include c_box-header.html title=t.videos.titleNewest links=site.techloreVideos.links -%}
<div class="box">
<ul class="video-list marginless listless columns">
<ul class="video-list video-list--50 marginless listless columns">
{% for video in site.data._en.forum.latest-techlore-videos limit: 2 %}
{% assign forumLink = video.id | prepend: "https://discuss.techlore.tech/t/" %}

Expand All @@ -27,7 +27,6 @@
link=forumLink
thumbnail=video.image_url
date=video.created_at
tags=video.tags
-%}

{% endfor %}
Expand Down
1 change: 0 additions & 1 deletion resources.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@
linkPeerTube=guide.linkPeerTube
linkOdysee=guide.linkOdysee
thumbnail=guideThumbnail
tags=guide.tags
isPremium=guide.isPremium
isDetailed=true
-%}
Expand Down
72 changes: 46 additions & 26 deletions videos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<div class="container">
{%- include c_box-header.html title=t.videos.titleNewest links=site.techloreVideos.links -%}
<div class="box has-footer">
<ul class="video-list marginless listless columns">
<ul class="video-list video-list--3-videos marginless listless columns is-multiline is-gap-2">
{% for video in site.data._en.forum.latest-techlore-videos limit: 3 %}
{% assign forumLink = video.id | prepend: "https://discuss.techlore.tech/t/" %}

Expand All @@ -21,7 +21,6 @@
link=forumLink
thumbnail=video.image_url
date=video.created_at
tags=video.tags
-%}

{% endfor %}
Expand All @@ -38,7 +37,7 @@
<div class="container">
{%- include c_box-header.html title=t.videos.titleFeatured -%}
<div class="box has-footer">
<ul class="video-list marginless listless columns">
<ul class="video-list marginless listless columns is-multiline is-gap-2">
{% assign sortedVideos = site.guides | sort: "datePublished" | reverse %}
{% for video in sortedVideos limit: 4 %}
{% assign filename = video.path | split: "/" | last %}
Expand All @@ -52,7 +51,6 @@
linkPeerTube=video.linkPeerTube
thumbnail=videoThumbnail
date=video.datePublished
tags=video.tags
-%}

{% endfor %}
Expand Down Expand Up @@ -92,7 +90,7 @@ <h2 class="has-text-centered">{{ t.goincognito.titleMore }}</h2>
<div class="column is-full-mobile is-half" id="techlore-clips">
{%- include c_box-header.html title=t.videos.techloreClips.title links=site.techloreClips.links -%}
<div class="box has-footer">
<ul class="video-list marginless listless columns">
<ul class="video-list video-list--50 marginless listless columns is-multiline is-gap-2">
{% for video in site.data._en.forum.latest-techlore-clips-videos limit: 2 %}
{% assign forumLink = video.id | prepend: "https://discuss.techlore.tech/t/" %}

Expand All @@ -102,7 +100,6 @@ <h2 class="has-text-centered">{{ t.goincognito.titleMore }}</h2>
link=forumLink
thumbnail=video.image_url
date=video.created_at
tags=video.tags
-%}

{% endfor %}
Expand All @@ -112,7 +109,7 @@ <h2 class="has-text-centered">{{ t.goincognito.titleMore }}</h2>
<div class="column is-full-mobile is-half" id="surveillance-report">
{%- include c_box-header.html title=t.videos.surveillanceReport.title links=site.surveillanceReport.links -%}
<div class="box has-footer">
<ul class="video-list marginless listless columns">
<ul class="video-list video-list--50 marginless listless columns is-multiline is-gap-2">
{% for video in site.data._en.forum.latest-surveillance-report-videos limit: 2 %}
{% assign forumLink = video.id | prepend: "https://discuss.techlore.tech/t/" %}

Expand All @@ -122,7 +119,8 @@ <h2 class="has-text-centered">{{ t.goincognito.titleMore }}</h2>
link=forumLink
thumbnail=video.image_url
date=video.created_at
tags=video.tags
posts=video.posts_count
likes=video.like_count
-%}

{% endfor %}
Expand All @@ -135,23 +133,45 @@ <h2 class="has-text-centered">{{ t.goincognito.titleMore }}</h2>

<section id="older-videos">
<div class="container">
{%- include c_box-header.html title=t.videos.titleArchive links=site.techloreVideos.links -%}
<div class="box has-footer">
<ul class="video-list marginless listless columns">
{% for video in site.data._en.forum.latest-techlore-videos offset:3 %}
{% assign forumLink = video.id | prepend: "https://discuss.techlore.tech/t/" %}

{%- include c_video.html
title=video.fancy_title
desc=video.excerpt
link=forumLink
thumbnail=video.image_url
date=video.created_at
tags=video.tags
-%}

{% endfor %}
</ul>
</div>
<h2 class="has-text-centered">{{ t.videos.titleArchive }}</h2>
<p class="has-text-centered mb-6">
{% include e_render-svg-icon.html icon="arrow-down" dimension=200 inline=true %}
</p>

{% assign sortedVideos = site.data._en.forum.latest-techlore-videos %}
{% assign groupedVideos = "" %}

{%- for video in sortedVideos -%}
{% assign videoDate = video.last_posted_at | date: "%B %Y" %}
{% assign groupedVideos = groupedVideos | append: videoDate | append: "," %}
{%- endfor -%}

{% assign monthArray = groupedVideos | split: "," | uniq %}

{%- for month in monthArray -%}
{% assign title = month | date: "%B, %Y" %}
{%- include c_box-header.html title=title links=site.techloreVideos.links -%}
<div class="box mb-6 pb-6">
<ul class="video-list marginless listless columns is-multiline is-gap-2">
{%- for video in sortedVideos -%}
{% assign videoDate = video.last_posted_at | date: "%B %Y" %}
{% assign forumLink = video.id | prepend: "https://discuss.techlore.tech/t/" %}
{% if videoDate == month %}
{%- include c_video.html
title=video.fancy_title
desc=video.excerpt
link=forumLink
thumbnail=video.image_url
date=video.created_at
-%}
{% endif %}
{%- endfor -%}
</ul>
</div>
{% include c_box-footer.html
link=site.data._en.navigation.hiddenNav.allTechloreVideos.url
title=site.data._en.content.global.back.backToVideos
%}
{%- endfor -%}
</div>
</section>

0 comments on commit 079e70e

Please sign in to comment.