Add grid-cards style for videos widget

docs/configuration.md

@@ -446,6 +446,7 @@ Preview:
 | ---- | ---- | -------- | ------- |
 | channels | array | yes | |
 | limit | integer | no | 25 |
+| style | string | no | horizontal-cards |
 | video-url-template | string | no | https://www.youtube.com/watch?v={VIDEO-ID} |
 
 ##### `channels`
@@ -460,6 +461,13 @@ Then scroll down and click on "Share channel", then "Copy channel ID":
 ##### `limit`
 The maximum number of videos to show.
 
+##### `style`
+Used to change the appearance of the widget. Possible values are `horizontal-cards` and `grid-cards`.
+
+Preview of `grid-cards`:
+
+![](images/videos-widget-grid-cards-preview.png)
+
 ##### `video-url-template`
 Used to replace the default link for videos. Useful when you're running your own YouTube front-end. Example:
 

internal/assets/static/main.css

@@ -329,23 +329,36 @@ body {
     --cards-per-row: 6.5;
 }
 
-.cards-grid {
+.cards-horizontal, .cards-vertical {
-    --cards-per-row: 6;
-}
-
-.cards-horizontal, .cards-vertical, .cards-grid {
     --cards-gap: calc(var(--widget-content-vertical-padding) * 0.7);
     display: flex;
     gap: var(--cards-gap);
 }
 
+.card {
+    display: flex;
+    flex-direction: column;
+}
+
+.cards-horizontal .card {
+    flex-shrink: 0;
+    width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
+}
+
+.cards-grid .card {
+    min-width: 0;
+}
+
 .cards-horizontal {
     overflow-x: auto;
     padding-bottom: 1rem;
 }
 
 .cards-grid {
-    flex-wrap: wrap;
+    --cards-per-row: 6;
+    display: grid;
+    grid-template-columns: repeat(var(--cards-per-row), 1fr);
+    gap: calc(var(--widget-content-vertical-padding) * 0.7);
 }
 
 @container widget (max-width: 1300px) { .cards-horizontal { --cards-per-row: 5.5; } }
@@ -361,12 +374,7 @@ body {
 @container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } }
 @container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } }
 
-.card {
+
-    flex-shrink: 0;
-    width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
-    display: flex;
-    flex-direction: column;
-}
 
 .widget-error-header {
     display: flex;

internal/assets/templates.go

@@ -22,7 +22,8 @@ var (
 	RedditCardsHorizontalTemplate = compileTemplate("reddit-horizontal-cards.html", "widget-base.html")
 	RedditCardsVerticalTemplate   = compileTemplate("reddit-vertical-cards.html", "widget-base.html")
 	ReleasesTemplate              = compileTemplate("releases.html", "widget-base.html")
-	VideosTemplate                = compileTemplate("videos.html", "widget-base.html")
+	VideosTemplate                = compileTemplate("videos.html", "widget-base.html", "video-card-contents.html")
+	VideosGridTemplate            = compileTemplate("videos-grid.html", "widget-base.html", "video-card-contents.html")
 	StocksTemplate                = compileTemplate("stocks.html", "widget-base.html")
 	RSSListTemplate               = compileTemplate("rss-list.html", "widget-base.html")
 	RSSCardsTemplate              = compileTemplate("rss-cards.html", "widget-base.html")

internal/assets/templates/video-card-contents.html

@@ -0,0 +1,12 @@
+{{ define "video-card-contents" }}
+<img class="video-thumbnail thumbnail" loading="lazy" src="{{ .ThumbnailUrl }}" alt="">
+<div class="margin-top-10 margin-bottom-widget flex flex-column grow padding-inline-widget">
+    <a class="video-title color-primary-if-not-visited" href="{{ .Url }}" target="_blank" rel="noreferrer" title="{{ .Title }}">{{ .Title }}</a>
+    <ul class="list-horizontal-text flex-nowrap margin-top-7">
+        <li class="shrink-0" title="{{ .TimePosted | formatTime }}" {{ dynamicRelativeTimeAttrs .TimePosted }}>{{ .TimePosted | relativeTime }}</li>
+        <li class="shrink min-width-0">
+            <a class="block text-truncate" href="{{ .AuthorUrl }}" target="_blank" rel="noreferrer">{{ .Author }}</a>
+        </li>
+    </ul>
+</div>
+{{ end }}

internal/assets/templates/videos-grid.html

@@ -0,0 +1,13 @@
+{{ template "widget-base.html" . }}
+
+{{ define "widget-content-classes" }}widget-content-frameless{{ end }}
+
+{{ define "widget-content" }}
+<div class="cards-grid">
+    {{ range .Videos }}
+    <div class="card widget-content-frame thumbnail-container">
+        {{ template "video-card-contents" . }}
+    </div>
+    {{ end }}
+</div>
+{{ end }}

internal/assets/templates/videos.html

@@ -4,19 +4,10 @@
 
 {{ define "widget-content" }}
 <div class="carousel-container">
-    <div class="videos cards-horizontal carousel-items-container">
+    <div class="cards-horizontal carousel-items-container">
         {{ range .Videos }}
         <div class="card widget-content-frame thumbnail-container">
-            <img class="video-thumbnail thumbnail" loading="lazy" src="{{ .ThumbnailUrl }}" alt="">
+            {{ template "video-card-contents" . }}
-            <div class="margin-top-10 margin-bottom-widget flex flex-column grow padding-inline-widget">
-                <a class="video-title color-primary-if-not-visited" href="{{ .Url }}" target="_blank" rel="noreferrer" title="{{ .Title }}">{{ .Title }}</a>
-                <ul class="list-horizontal-text flex-nowrap margin-top-7">
-                    <li class="shrink-0" title="{{ .TimePosted | formatTime }}" {{ dynamicRelativeTimeAttrs .TimePosted }}>{{ .TimePosted | relativeTime }}</li>
-                    <li class="shrink min-width-0">
-                        <a class="block text-truncate" href="{{ .AuthorUrl }}" target="_blank" rel="noreferrer">{{ .Author }}</a>
-                    </li>
-                </ul>
-            </div>
         </div>
         {{ end }}
     </div>

internal/widget/videos.go

@@ -13,6 +13,7 @@ type Videos struct {
 	widgetBase       `yaml:",inline"`
 	Videos           feed.Videos `yaml:"-"`
 	VideoUrlTemplate string      `yaml:"video-url-template"`
+	Style            string      `yaml:"style"`
 	Channels         []string    `yaml:"channels"`
 	Limit            int         `yaml:"limit"`
 }
@@ -42,5 +43,9 @@ func (widget *Videos) Update(ctx context.Context) {
 }
 
 func (widget *Videos) Render() template.HTML {
+	if widget.Style == "grid-cards" {
+		return widget.render(widget, assets.VideosGridTemplate)
+	}
+
 	return widget.render(widget, assets.VideosTemplate)
 }