diff --git a/docs/configuration.md b/docs/configuration.md index 0944e67..06701d2 100644 --- a/docs/configuration.md +++ b/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: diff --git a/docs/images/videos-widget-grid-cards-preview.png b/docs/images/videos-widget-grid-cards-preview.png new file mode 100644 index 0000000..5c4f109 Binary files /dev/null and b/docs/images/videos-widget-grid-cards-preview.png differ diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 27e8aa7..a1d47b8 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -329,23 +329,36 @@ body { --cards-per-row: 6.5; } -.cards-grid { - --cards-per-row: 6; -} - -.cards-horizontal, .cards-vertical, .cards-grid { +.cards-horizontal, .cards-vertical { --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; diff --git a/internal/assets/templates.go b/internal/assets/templates.go index fe82ed5..6328463 100644 --- a/internal/assets/templates.go +++ b/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") diff --git a/internal/assets/templates/video-card-contents.html b/internal/assets/templates/video-card-contents.html new file mode 100644 index 0000000..3bfd234 --- /dev/null +++ b/internal/assets/templates/video-card-contents.html @@ -0,0 +1,12 @@ +{{ define "video-card-contents" }} + +
+ {{ .Title }} + +
+{{ end }} diff --git a/internal/assets/templates/videos-grid.html b/internal/assets/templates/videos-grid.html new file mode 100644 index 0000000..d723d0e --- /dev/null +++ b/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" }} +
+ {{ range .Videos }} +
+ {{ template "video-card-contents" . }} +
+ {{ end }} +
+{{ end }} diff --git a/internal/assets/templates/videos.html b/internal/assets/templates/videos.html index a71237d..2bf162f 100644 --- a/internal/assets/templates/videos.html +++ b/internal/assets/templates/videos.html @@ -4,19 +4,10 @@ {{ define "widget-content" }}
-
+
{{ range .Videos }}
- -
- {{ .Title }} - -
+ {{ template "video-card-contents" . }}
{{ end }}
diff --git a/internal/widget/videos.go b/internal/widget/videos.go index a472f0e..252c8ff 100644 --- a/internal/widget/videos.go +++ b/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) }