diff --git a/docs/configuration.md b/docs/configuration.md index 06701d2..56fc8e0 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -393,6 +393,7 @@ Example: | style | string | no | vertical-list | | feeds | array | yes | | thumbnail-height | float | no | 10 | +| card-height | float | no | 27 | | limit | integer | no | 25 | | collapse-after | integer | no | 5 | @@ -407,9 +408,16 @@ Used to change the appearance of the widget. Possible values are `vertical-list` ![preview of horizontal-cards style for RSS widget](images/rss-feed-horizontal-cards-preview.png) +`horizontal-cards-2` + +![preview of horizontal-cards-2 style for RSS widget](images/rss-widget-horizontal-cards-2-preview.png) + ##### `thumbnail-height` Used to modify the height of the thumbnails. Works only when the style is set to `horizontal-cards`. The default value is `10` and the units are `rem`, if you want to for example double the height of the thumbnails you can set it to `20`. +##### `card-height` +Used to modify the height of cards when using the `horizontal-cards-2` style. The default value is `27` and the units are `rem`. + ##### `feeds` An array of RSS/atom feeds. The title can optionally be changed. diff --git a/docs/images/rss-widget-horizontal-cards-2-preview.png b/docs/images/rss-widget-horizontal-cards-2-preview.png new file mode 100644 index 0000000..5f029dd Binary files /dev/null and b/docs/images/rss-widget-horizontal-cards-2-preview.png differ diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css index 00b50fd..833f07f 100644 --- a/internal/assets/static/main.css +++ b/internal/assets/static/main.css @@ -826,6 +826,43 @@ body { border-radius: var(--border-radius) var(--border-radius) 0 0; } +.rss-card-2 { + position: relative; + height: var(--rss-card-height, 27rem); + overflow: hidden; +} + +.rss-card-2::before { + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + background-image: linear-gradient( + 0deg, + var(--color-widget-background), + hsla(var(--color-widget-background-hsl-values), 0.8) 6rem, transparent 14rem + ); + z-index: 2; +} + +.rss-card-2-image { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + /* +1px is required to fix some weird graphical bug where the image overflows on the bottom in firefox */ + border-radius: calc(var(--border-radius) + 1px); + opacity: 0.9; + z-index: 1; +} + +.rss-card-2-content { + position: absolute; + inset-inline: 0; + bottom: var(--widget-content-vertical-padding); + z-index: 3; +} + .twitch-category-thumbnail { width: 5rem; border-radius: var(--border-radius); diff --git a/internal/assets/templates.go b/internal/assets/templates.go index 6328463..b349d52 100644 --- a/internal/assets/templates.go +++ b/internal/assets/templates.go @@ -26,7 +26,8 @@ var ( 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") + RSSHorizontalCardsTemplate = compileTemplate("rss-horizontal-cards.html", "widget-base.html") + RSSHorizontalCards2Template = compileTemplate("rss-horizontal-cards-2.html", "widget-base.html") MonitorTemplate = compileTemplate("monitor.html", "widget-base.html") TwitchGamesListTemplate = compileTemplate("twitch-games-list.html", "widget-base.html") TwitchChannelsTemplate = compileTemplate("twitch-channels.html", "widget-base.html") diff --git a/internal/assets/templates/rss-horizontal-cards-2.html b/internal/assets/templates/rss-horizontal-cards-2.html new file mode 100644 index 0000000..564c2f8 --- /dev/null +++ b/internal/assets/templates/rss-horizontal-cards-2.html @@ -0,0 +1,28 @@ +{{ template "widget-base.html" . }} + +{{ define "widget-content-classes" }}widget-content-frameless{{ end }} + +{{ define "widget-content" }} +
+
+ {{ range .Items }} +
+ {{ if ne "" .ImageURL }} + + {{ else }} + + + + {{ end }} +
+ {{ .Title }} +
    +
  • {{ .PublishedAt | relativeTime }}
    • +
  • {{ .ChannelName }}
    • +
+
+
+ {{ end }} +
+
+{{ end }} diff --git a/internal/assets/templates/rss-cards.html b/internal/assets/templates/rss-horizontal-cards.html similarity index 94% rename from internal/assets/templates/rss-cards.html rename to internal/assets/templates/rss-horizontal-cards.html index 94eb3d3..8a9c9b8 100644 --- a/internal/assets/templates/rss-cards.html +++ b/internal/assets/templates/rss-horizontal-cards.html @@ -4,7 +4,7 @@ {{ define "widget-content" }}
-
+
{{ range .Items }}
{{ if ne "" .ImageURL }} diff --git a/internal/widget/rss.go b/internal/widget/rss.go index 5977c1a..26d43dc 100644 --- a/internal/widget/rss.go +++ b/internal/widget/rss.go @@ -14,6 +14,7 @@ type RSS struct { FeedRequests []feed.RSSFeedRequest `yaml:"feeds"` Style string `yaml:"style"` ThumbnailHeight float64 `yaml:"thumbnail-height"` + CardHeight float64 `yaml:"card-height"` Items feed.RSSFeedItems `yaml:"-"` Limit int `yaml:"limit"` CollapseAfter int `yaml:"collapse-after"` @@ -34,6 +35,10 @@ func (widget *RSS) Initialize() error { widget.ThumbnailHeight = 0 } + if widget.CardHeight < 0 { + widget.CardHeight = 0 + } + return nil } @@ -53,7 +58,11 @@ func (widget *RSS) Update(ctx context.Context) { func (widget *RSS) Render() template.HTML { if widget.Style == "horizontal-cards" { - return widget.render(widget, assets.RSSCardsTemplate) + return widget.render(widget, assets.RSSHorizontalCardsTemplate) + } + + if widget.Style == "horizontal-cards-2" { + return widget.render(widget, assets.RSSHorizontalCards2Template) } return widget.render(widget, assets.RSSListTemplate)