mirror of
https://github.com/glanceapp/glance.git
synced 2025-06-22 02:41:23 +02:00
Add grid-cards style for videos widget
This commit is contained in:
parent
54102ae35e
commit
3c1fb97c12
@ -446,6 +446,7 @@ Preview:
|
|||||||
| ---- | ---- | -------- | ------- |
|
| ---- | ---- | -------- | ------- |
|
||||||
| channels | array | yes | |
|
| channels | array | yes | |
|
||||||
| limit | integer | no | 25 |
|
| limit | integer | no | 25 |
|
||||||
|
| style | string | no | horizontal-cards |
|
||||||
| video-url-template | string | no | https://www.youtube.com/watch?v={VIDEO-ID} |
|
| video-url-template | string | no | https://www.youtube.com/watch?v={VIDEO-ID} |
|
||||||
|
|
||||||
##### `channels`
|
##### `channels`
|
||||||
@ -460,6 +461,13 @@ Then scroll down and click on "Share channel", then "Copy channel ID":
|
|||||||
##### `limit`
|
##### `limit`
|
||||||
The maximum number of videos to show.
|
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`:
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
##### `video-url-template`
|
##### `video-url-template`
|
||||||
Used to replace the default link for videos. Useful when you're running your own YouTube front-end. Example:
|
Used to replace the default link for videos. Useful when you're running your own YouTube front-end. Example:
|
||||||
|
|
||||||
|
BIN
docs/images/videos-widget-grid-cards-preview.png
Normal file
BIN
docs/images/videos-widget-grid-cards-preview.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 330 KiB |
@ -329,23 +329,36 @@ body {
|
|||||||
--cards-per-row: 6.5;
|
--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);
|
--cards-gap: calc(var(--widget-content-vertical-padding) * 0.7);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: var(--cards-gap);
|
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 {
|
.cards-horizontal {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cards-grid {
|
.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; } }
|
@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: 750px) { .cards-grid { --cards-per-row: 3; } }
|
||||||
@container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } }
|
@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 {
|
.widget-error-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -22,7 +22,8 @@ var (
|
|||||||
RedditCardsHorizontalTemplate = compileTemplate("reddit-horizontal-cards.html", "widget-base.html")
|
RedditCardsHorizontalTemplate = compileTemplate("reddit-horizontal-cards.html", "widget-base.html")
|
||||||
RedditCardsVerticalTemplate = compileTemplate("reddit-vertical-cards.html", "widget-base.html")
|
RedditCardsVerticalTemplate = compileTemplate("reddit-vertical-cards.html", "widget-base.html")
|
||||||
ReleasesTemplate = compileTemplate("releases.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")
|
StocksTemplate = compileTemplate("stocks.html", "widget-base.html")
|
||||||
RSSListTemplate = compileTemplate("rss-list.html", "widget-base.html")
|
RSSListTemplate = compileTemplate("rss-list.html", "widget-base.html")
|
||||||
RSSCardsTemplate = compileTemplate("rss-cards.html", "widget-base.html")
|
RSSCardsTemplate = compileTemplate("rss-cards.html", "widget-base.html")
|
||||||
|
12
internal/assets/templates/video-card-contents.html
Normal file
12
internal/assets/templates/video-card-contents.html
Normal file
@ -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 }}
|
13
internal/assets/templates/videos-grid.html
Normal file
13
internal/assets/templates/videos-grid.html
Normal file
@ -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 }}
|
@ -4,19 +4,10 @@
|
|||||||
|
|
||||||
{{ define "widget-content" }}
|
{{ define "widget-content" }}
|
||||||
<div class="carousel-container">
|
<div class="carousel-container">
|
||||||
<div class="videos cards-horizontal carousel-items-container">
|
<div class="cards-horizontal carousel-items-container">
|
||||||
{{ range .Videos }}
|
{{ range .Videos }}
|
||||||
<div class="card widget-content-frame thumbnail-container">
|
<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>
|
</div>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</div>
|
</div>
|
||||||
|
@ -13,6 +13,7 @@ type Videos struct {
|
|||||||
widgetBase `yaml:",inline"`
|
widgetBase `yaml:",inline"`
|
||||||
Videos feed.Videos `yaml:"-"`
|
Videos feed.Videos `yaml:"-"`
|
||||||
VideoUrlTemplate string `yaml:"video-url-template"`
|
VideoUrlTemplate string `yaml:"video-url-template"`
|
||||||
|
Style string `yaml:"style"`
|
||||||
Channels []string `yaml:"channels"`
|
Channels []string `yaml:"channels"`
|
||||||
Limit int `yaml:"limit"`
|
Limit int `yaml:"limit"`
|
||||||
}
|
}
|
||||||
@ -42,5 +43,9 @@ func (widget *Videos) Update(ctx context.Context) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
func (widget *Videos) Render() template.HTML {
|
func (widget *Videos) Render() template.HTML {
|
||||||
|
if widget.Style == "grid-cards" {
|
||||||
|
return widget.render(widget, assets.VideosGridTemplate)
|
||||||
|
}
|
||||||
|
|
||||||
return widget.render(widget, assets.VideosTemplate)
|
return widget.render(widget, assets.VideosTemplate)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user