rickub
nandi/gleanpublic⑂ Fork 0
⑂ df519dd
Branches
main View all branches → View all tags →
Commits
⬇ Clone ▾
git clone https://git.rickub.com/nandi/glean.git
git clone ssh://git@rickub.com/nandi/glean.git

Host key fingerprint (ed25519): SHA256:iycHnxEyq0Q7uyVpB7JlznP0G7JrTPXLYRcAU5CSLhc — verify it before your first connect.

refactor: improve responsive designUnverified

Julien Robert committed 2026-06-08T18:09:03+02:00 Browse files
df519dd parent: 9ed5b26
modified internal/tmpl/article_detail.html +1 -1
@@ -32,7 +32,7 @@
3232 {{end}}
3333 </div>
3434
35- <div class="flex items-center gap-2 mt-6">
35+ <div class="flex items-center gap-2 mt-6 flex-wrap">
3636 <button hx-post="/articles/{{.Article.ID}}/like?bordered=true" hx-target="this" hx-swap="outerHTML"
3737 title="{{if .HasLiked}}Unlike{{else}}Like{{end}}"
3838 class="group inline-flex items-center gap-1.5 text-[10px] uppercase tracking-button px-2.5 py-1 rounded-pill transition {{if .HasLiked}}text-spot-red bg-spot-red/15 hover:bg-spot-red/25{{else}}text-spot-text bg-spot-hover hover:text-spot-red hover:bg-spot-red/15{{end}}">
@@ -32,7 +32,7 @@
32 {{end}}32 {{end}}
33 </div>33 </div>
34 34
35- <div class="flex items-center gap-2 mt-6">35+ <div class="flex items-center gap-2 mt-6 flex-wrap">
36 <button hx-post="/articles/{{.Article.ID}}/like?bordered=true" hx-target="this" hx-swap="outerHTML"36 <button hx-post="/articles/{{.Article.ID}}/like?bordered=true" hx-target="this" hx-swap="outerHTML"
37 title="{{if .HasLiked}}Unlike{{else}}Like{{end}}"37 title="{{if .HasLiked}}Unlike{{else}}Like{{end}}"
38 class="group inline-flex items-center gap-1.5 text-[10px] uppercase tracking-button px-2.5 py-1 rounded-pill transition {{if .HasLiked}}text-spot-red bg-spot-red/15 hover:bg-spot-red/25{{else}}text-spot-text bg-spot-hover hover:text-spot-red hover:bg-spot-red/15{{end}}">38 class="group inline-flex items-center gap-1.5 text-[10px] uppercase tracking-button px-2.5 py-1 rounded-pill transition {{if .HasLiked}}text-spot-red bg-spot-red/15 hover:bg-spot-red/25{{else}}text-spot-text bg-spot-hover hover:text-spot-red hover:bg-spot-red/15{{end}}">
modified internal/tmpl/articles.html +9 -9
@@ -6,15 +6,15 @@
66 <div class="flex items-center gap-2 mb-4">
77 <a href="/articles" class="text-xs text-spot-secondary hover:text-spot-text transition">&larr; All articles</a>
88 </div>
9- <div class="flex items-center justify-between">
10- <div class="flex items-center gap-3.5">
9+ <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
10+ <div class="flex items-center gap-3.5 min-w-0">
1111 {{template "favicon" dict "src" .Feed.FaviconURL.String "size" "w-10 h-10"}}
12- <div>
12+ <div class="min-w-0">
1313 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">{{if .Feed.SiteURL.Valid}}<a href="{{.Feed.SiteURL.String}}" target="_blank" rel="noopener noreferrer" class="hover:text-spot-green transition">{{end}}{{if .Feed.Title.Valid}}{{.Feed.Title.String}}{{else}}{{.Feed.FeedURL}}{{end}}{{if .Feed.SiteURL.Valid}}</a>{{end}}</h1>
1414 {{if .Feed.SiteURL.Valid}}<a href="{{.Feed.SiteURL.String}}" target="_blank" rel="noopener noreferrer" class="text-xs text-spot-secondary hover:text-spot-green transition">{{.Feed.SiteURL.String}}</a>{{end}}
1515 </div>
1616 </div>
17- <div class="flex items-center gap-3">
17+ <div class="flex items-center gap-3 shrink-0">
1818 {{if not .IsSubscribed}}
1919 <form hx-post="/feeds/add" hx-swap="none" hx-on::after-request="if(event.detail.successful) window.location.reload()">
2020 {{csrfInput .CSRFToken}}
@@ -33,8 +33,8 @@
3333 {{if .Feed.Description.Valid}}<p class="text-sm text-spot-secondary mt-3 leading-relaxed">{{.Feed.Description.String}}</p>{{end}}
3434 </div>
3535
36- <div class="flex items-center gap-3 mb-6 flex-wrap">
37- <form method="GET" action="/articles" class="relative flex-1 min-w-[200px]">
36+ <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-6">
37+ <form method="GET" action="/articles" class="relative w-full sm:flex-1 sm:min-w-[200px]">
3838 <input type="text" name="q" value="{{.SearchQuery}}" placeholder="Search articles..."
3939 class="w-full bg-spot-hover text-spot-text rounded-pill pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-secondary"
4040 hx-get="/articles" hx-trigger="keyup changed delay:300ms, search" hx-target="#article-list" hx-swap="innerHTML" hx-include="[name='q']">
@@ -96,8 +96,8 @@
9696 </div>
9797 <p class="text-sm text-spot-secondary mb-6">All your subscribed articles, {{if .SortOldest}}oldest first{{else}}newest first{{end}}.</p>
9898
99- <div class="flex items-center gap-3 mb-6 flex-wrap">
100- <div class="flex items-center gap-1.5">
99+ <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-6">
100+ <div class="flex items-center gap-1.5 flex-wrap">
101101 <a href="/articles?{{if not .SortOldest}}sort=oldest{{end}}{{if .Status}}&status={{.Status}}{{end}}"
102102 class="px-2.5 py-1.5 rounded-pill text-xs transition
103103 {{if .SortOldest}}bg-spot-active-pill-bg text-spot-active-pill-text font-bold{{else}}bg-spot-hover text-spot-secondary hover:text-spot-text{{end}}"
@@ -113,7 +113,7 @@
113113 <a href="/articles?{{if .Status}}status={{.Status}}&{{end}}category=__none__{{if .SortOldest}}&sort=oldest{{end}}" class="text-sm px-3 py-1 rounded-pill font-bold {{if eq .Category "__none__"}}bg-spot-active-pill-bg text-spot-active-pill-text{{else}}bg-spot-hover text-spot-secondary hover:text-spot-text{{end}} transition">Uncategorized</a>
114114 {{end}}
115115 </div>
116- <form method="GET" action="/articles" class="relative flex-1 min-w-[180px]">
116+ <form method="GET" action="/articles" class="relative w-full sm:flex-1 sm:min-w-[180px]">
117117 <input type="text" name="q" value="{{.SearchQuery}}" placeholder="Search articles..."
118118 class="w-full bg-spot-hover text-spot-text rounded-pill pl-8 pr-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-secondary"
119119 hx-get="/articles" hx-trigger="keyup changed delay:300ms, search" hx-target="#article-list" hx-swap="innerHTML" hx-include="[name='q']">
@@ -6,15 +6,15 @@
6 <div class="flex items-center gap-2 mb-4">6 <div class="flex items-center gap-2 mb-4">
7 <a href="/articles" class="text-xs text-spot-secondary hover:text-spot-text transition">&larr; All articles</a>7 <a href="/articles" class="text-xs text-spot-secondary hover:text-spot-text transition">&larr; All articles</a>
8 </div>8 </div>
9- <div class="flex items-center justify-between">9+ <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
10- <div class="flex items-center gap-3.5">10+ <div class="flex items-center gap-3.5 min-w-0">
11 {{template "favicon" dict "src" .Feed.FaviconURL.String "size" "w-10 h-10"}}11 {{template "favicon" dict "src" .Feed.FaviconURL.String "size" "w-10 h-10"}}
12- <div>12+ <div class="min-w-0">
13 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">{{if .Feed.SiteURL.Valid}}<a href="{{.Feed.SiteURL.String}}" target="_blank" rel="noopener noreferrer" class="hover:text-spot-green transition">{{end}}{{if .Feed.Title.Valid}}{{.Feed.Title.String}}{{else}}{{.Feed.FeedURL}}{{end}}{{if .Feed.SiteURL.Valid}}</a>{{end}}</h1>13 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">{{if .Feed.SiteURL.Valid}}<a href="{{.Feed.SiteURL.String}}" target="_blank" rel="noopener noreferrer" class="hover:text-spot-green transition">{{end}}{{if .Feed.Title.Valid}}{{.Feed.Title.String}}{{else}}{{.Feed.FeedURL}}{{end}}{{if .Feed.SiteURL.Valid}}</a>{{end}}</h1>
14 {{if .Feed.SiteURL.Valid}}<a href="{{.Feed.SiteURL.String}}" target="_blank" rel="noopener noreferrer" class="text-xs text-spot-secondary hover:text-spot-green transition">{{.Feed.SiteURL.String}}</a>{{end}}14 {{if .Feed.SiteURL.Valid}}<a href="{{.Feed.SiteURL.String}}" target="_blank" rel="noopener noreferrer" class="text-xs text-spot-secondary hover:text-spot-green transition">{{.Feed.SiteURL.String}}</a>{{end}}
15 </div>15 </div>
16 </div>16 </div>
17- <div class="flex items-center gap-3">17+ <div class="flex items-center gap-3 shrink-0">
18 {{if not .IsSubscribed}}18 {{if not .IsSubscribed}}
19 <form hx-post="/feeds/add" hx-swap="none" hx-on::after-request="if(event.detail.successful) window.location.reload()">19 <form hx-post="/feeds/add" hx-swap="none" hx-on::after-request="if(event.detail.successful) window.location.reload()">
20 {{csrfInput .CSRFToken}}20 {{csrfInput .CSRFToken}}
@@ -33,8 +33,8 @@
33 {{if .Feed.Description.Valid}}<p class="text-sm text-spot-secondary mt-3 leading-relaxed">{{.Feed.Description.String}}</p>{{end}}33 {{if .Feed.Description.Valid}}<p class="text-sm text-spot-secondary mt-3 leading-relaxed">{{.Feed.Description.String}}</p>{{end}}
34 </div>34 </div>
35 35
36- <div class="flex items-center gap-3 mb-6 flex-wrap">36+ <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-6">
37- <form method="GET" action="/articles" class="relative flex-1 min-w-[200px]">37+ <form method="GET" action="/articles" class="relative w-full sm:flex-1 sm:min-w-[200px]">
38 <input type="text" name="q" value="{{.SearchQuery}}" placeholder="Search articles..."38 <input type="text" name="q" value="{{.SearchQuery}}" placeholder="Search articles..."
39 class="w-full bg-spot-hover text-spot-text rounded-pill pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-secondary"39 class="w-full bg-spot-hover text-spot-text rounded-pill pl-10 pr-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-secondary"
40 hx-get="/articles" hx-trigger="keyup changed delay:300ms, search" hx-target="#article-list" hx-swap="innerHTML" hx-include="[name='q']">40 hx-get="/articles" hx-trigger="keyup changed delay:300ms, search" hx-target="#article-list" hx-swap="innerHTML" hx-include="[name='q']">
@@ -96,8 +96,8 @@
96 </div>96 </div>
97 <p class="text-sm text-spot-secondary mb-6">All your subscribed articles, {{if .SortOldest}}oldest first{{else}}newest first{{end}}.</p>97 <p class="text-sm text-spot-secondary mb-6">All your subscribed articles, {{if .SortOldest}}oldest first{{else}}newest first{{end}}.</p>
98 98
99- <div class="flex items-center gap-3 mb-6 flex-wrap">99+ <div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-6">
100- <div class="flex items-center gap-1.5">100+ <div class="flex items-center gap-1.5 flex-wrap">
101 <a href="/articles?{{if not .SortOldest}}sort=oldest{{end}}{{if .Status}}&status={{.Status}}{{end}}"101 <a href="/articles?{{if not .SortOldest}}sort=oldest{{end}}{{if .Status}}&status={{.Status}}{{end}}"
102 class="px-2.5 py-1.5 rounded-pill text-xs transition102 class="px-2.5 py-1.5 rounded-pill text-xs transition
103 {{if .SortOldest}}bg-spot-active-pill-bg text-spot-active-pill-text font-bold{{else}}bg-spot-hover text-spot-secondary hover:text-spot-text{{end}}"103 {{if .SortOldest}}bg-spot-active-pill-bg text-spot-active-pill-text font-bold{{else}}bg-spot-hover text-spot-secondary hover:text-spot-text{{end}}"
@@ -113,7 +113,7 @@
113 <a href="/articles?{{if .Status}}status={{.Status}}&{{end}}category=__none__{{if .SortOldest}}&sort=oldest{{end}}" class="text-sm px-3 py-1 rounded-pill font-bold {{if eq .Category "__none__"}}bg-spot-active-pill-bg text-spot-active-pill-text{{else}}bg-spot-hover text-spot-secondary hover:text-spot-text{{end}} transition">Uncategorized</a>113 <a href="/articles?{{if .Status}}status={{.Status}}&{{end}}category=__none__{{if .SortOldest}}&sort=oldest{{end}}" class="text-sm px-3 py-1 rounded-pill font-bold {{if eq .Category "__none__"}}bg-spot-active-pill-bg text-spot-active-pill-text{{else}}bg-spot-hover text-spot-secondary hover:text-spot-text{{end}} transition">Uncategorized</a>
114 {{end}}114 {{end}}
115 </div>115 </div>
116- <form method="GET" action="/articles" class="relative flex-1 min-w-[180px]">116+ <form method="GET" action="/articles" class="relative w-full sm:flex-1 sm:min-w-[180px]">
117 <input type="text" name="q" value="{{.SearchQuery}}" placeholder="Search articles..."117 <input type="text" name="q" value="{{.SearchQuery}}" placeholder="Search articles..."
118 class="w-full bg-spot-hover text-spot-text rounded-pill pl-8 pr-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-secondary"118 class="w-full bg-spot-hover text-spot-text rounded-pill pl-8 pr-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-spot-green placeholder:text-spot-secondary"
119 hx-get="/articles" hx-trigger="keyup changed delay:300ms, search" hx-target="#article-list" hx-swap="innerHTML" hx-include="[name='q']">119 hx-get="/articles" hx-trigger="keyup changed delay:300ms, search" hx-target="#article-list" hx-swap="innerHTML" hx-include="[name='q']">
modified internal/tmpl/dashboard.html +1 -1
@@ -1,5 +1,5 @@
11 {{define "dashboard.html"}}
2-<div class="flex items-center justify-between mb-2">
2+<div class="flex items-center justify-between mb-2 flex-wrap gap-2">
33 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">Dashboard</h1>
44 {{if gt .SubscriptionCount 0}}
55 <div class="flex gap-4 text-sm">
@@ -1,5 +1,5 @@
1 {{define "dashboard.html"}}1 {{define "dashboard.html"}}
2-<div class="flex items-center justify-between mb-2">2+<div class="flex items-center justify-between mb-2 flex-wrap gap-2">
3 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">Dashboard</h1>3 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">Dashboard</h1>
4 {{if gt .SubscriptionCount 0}}4 {{if gt .SubscriptionCount 0}}
5 <div class="flex gap-4 text-sm">5 <div class="flex gap-4 text-sm">
modified internal/tmpl/feeds.html +1 -1
@@ -1,7 +1,7 @@
11 {{define "feeds.html"}}
22 <div class="flex items-center justify-between gap-3 mb-2 flex-wrap">
33 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">Feeds <span class="text-base font-normal text-spot-secondary">({{.SubscriptionCount}})</span></h1>
4- <div class="flex items-center gap-3">
4+ <div class="flex items-center gap-3 flex-wrap">
55 <button id="refresh-btn"
66 hx-post="/feeds/refresh" hx-target="#feed-list" hx-swap="innerHTML"
77 hx-on::before-request="gleanRefreshStart()"
@@ -1,7 +1,7 @@
1 {{define "feeds.html"}}1 {{define "feeds.html"}}
2 <div class="flex items-center justify-between gap-3 mb-2 flex-wrap">2 <div class="flex items-center justify-between gap-3 mb-2 flex-wrap">
3 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">Feeds <span class="text-base font-normal text-spot-secondary">({{.SubscriptionCount}})</span></h1>3 <h1 class="text-2xl font-bold text-spot-text" style="letter-spacing: -0.02em;">Feeds <span class="text-base font-normal text-spot-secondary">({{.SubscriptionCount}})</span></h1>
4- <div class="flex items-center gap-3">4+ <div class="flex items-center gap-3 flex-wrap">
5 <button id="refresh-btn"5 <button id="refresh-btn"
6 hx-post="/feeds/refresh" hx-target="#feed-list" hx-swap="innerHTML"6 hx-post="/feeds/refresh" hx-target="#feed-list" hx-swap="innerHTML"
7 hx-on::before-request="gleanRefreshStart()"7 hx-on::before-request="gleanRefreshStart()"
modified internal/tmpl/partials/annotation-card.html +1 -1
@@ -1,5 +1,5 @@
11 {{define "annotation-card.html"}}
2-<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-5 border border-spot-divider">
2+<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-4 sm:p-5 border border-spot-divider">
33 {{if .annotation.ArticleURL}}
44 <div class="text-xs mb-3 flex items-center gap-2">
55 {{if .annotation.ArticleID.Valid}}<a href="/articles/{{.annotation.ArticleID.Int64}}" class="text-spot-green hover:text-spot-text transition truncate inline-flex items-center gap-1">
@@ -1,5 +1,5 @@
1 {{define "annotation-card.html"}}1 {{define "annotation-card.html"}}
2-<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-5 border border-spot-divider">2+<div id="annotation-{{.annotation.ID}}" class="bg-spot-surface rounded-xl p-4 sm:p-5 border border-spot-divider">
3 {{if .annotation.ArticleURL}}3 {{if .annotation.ArticleURL}}
4 <div class="text-xs mb-3 flex items-center gap-2">4 <div class="text-xs mb-3 flex items-center gap-2">
5 {{if .annotation.ArticleID.Valid}}<a href="/articles/{{.annotation.ArticleID.Int64}}" class="text-spot-green hover:text-spot-text transition truncate inline-flex items-center gap-1">5 {{if .annotation.ArticleID.Valid}}<a href="/articles/{{.annotation.ArticleID.Int64}}" class="text-spot-green hover:text-spot-text transition truncate inline-flex items-center gap-1">
modified internal/tmpl/partials/article-card-expanded.html +1 -1
@@ -1,5 +1,5 @@
11 {{define "article-card-expanded.html"}}
2-<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" data-expanded="true" class="bg-spot-surface rounded-xl px-5 py-4 shadow-spot relative {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">
2+<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" data-expanded="true" class="bg-spot-surface rounded-xl px-4 sm:px-5 py-4 shadow-spot relative {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">
33 <div class="flex items-start justify-between gap-4">
44 <div class="min-w-0 flex-1">
55 <div class="flex items-start gap-2.5">
@@ -1,5 +1,5 @@
1 {{define "article-card-expanded.html"}}1 {{define "article-card-expanded.html"}}
2-<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" data-expanded="true" class="bg-spot-surface rounded-xl px-5 py-4 shadow-spot relative {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">2+<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" data-expanded="true" class="bg-spot-surface rounded-xl px-4 sm:px-5 py-4 shadow-spot relative {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">
3 <div class="flex items-start justify-between gap-4">3 <div class="flex items-start justify-between gap-4">
4 <div class="min-w-0 flex-1">4 <div class="min-w-0 flex-1">
5 <div class="flex items-start gap-2.5">5 <div class="flex items-start gap-2.5">
modified internal/tmpl/partials/article-card.html +3 -3
@@ -1,5 +1,5 @@
11 {{define "article-card.html"}}
2-<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" class="bg-spot-surface rounded-xl px-5 py-4 hover:bg-spot-hover-50 transition shadow-spot relative group {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">
2+<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" class="bg-spot-surface rounded-xl px-4 sm:px-5 py-4 hover:bg-spot-hover-50 transition shadow-spot relative group {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">
33 <div class="flex items-start justify-between gap-4">
44 <div class="min-w-0 flex-1">
55 <div class="flex items-start gap-2.5">
@@ -17,13 +17,13 @@
1717 </div>
1818 <div class="grid grid-cols-1 gap-2 shrink-0 pt-0.5">
1919 {{template "like-button.html" .}}
20- <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full">
20+ <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition">
2121 <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
2222 <span>{{if .IsRead.Bool}}Unread{{else}}Read{{end}}</span>
2323 </button>
2424 {{if .DismissURL}}
2525 <button hx-post="{{.DismissURL}}" hx-target="closest article" hx-swap="delete" hx-vals='{"{{.DismissField}}": "{{.DismissValue}}"}' title="Remove from recommendations"
26- class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full">
26+ class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition">
2727 <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
2828 <span>Hide</span>
2929 </button>
@@ -1,5 +1,5 @@
1 {{define "article-card.html"}}1 {{define "article-card.html"}}
2-<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" class="bg-spot-surface rounded-xl px-5 py-4 hover:bg-spot-hover-50 transition shadow-spot relative group {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">2+<article data-article-id="{{.ID}}" data-feed-url="{{.FeedURL}}" data-article-url="{{if .URL.Valid}}{{.URL.String}}{{end}}" class="bg-spot-surface rounded-xl px-4 sm:px-5 py-4 hover:bg-spot-hover-50 transition shadow-spot relative group {{if not .IsRead.Bool}}border-l border-spot-green/80{{end}}">
3 <div class="flex items-start justify-between gap-4">3 <div class="flex items-start justify-between gap-4">
4 <div class="min-w-0 flex-1">4 <div class="min-w-0 flex-1">
5 <div class="flex items-start gap-2.5">5 <div class="flex items-start gap-2.5">
@@ -17,13 +17,13 @@
17 </div>17 </div>
18 <div class="grid grid-cols-1 gap-2 shrink-0 pt-0.5">18 <div class="grid grid-cols-1 gap-2 shrink-0 pt-0.5">
19 {{template "like-button.html" .}}19 {{template "like-button.html" .}}
20- <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full">20+ <button id="read-btn-{{.ID}}" hx-post="/articles/{{.ID}}/{{if .IsRead.Bool}}unread{{else}}read{{end}}" hx-target="#read-btn-{{.ID}}" hx-swap="outerHTML" title="{{if .IsRead.Bool}}Mark as unread{{else}}Mark as read{{end}}" class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-green hover:bg-spot-green/10 hover:border-spot-green/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition">
21 <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>21 <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
22 <span>{{if .IsRead.Bool}}Unread{{else}}Read{{end}}</span>22 <span>{{if .IsRead.Bool}}Unread{{else}}Read{{end}}</span>
23 </button>23 </button>
24 {{if .DismissURL}}24 {{if .DismissURL}}
25 <button hx-post="{{.DismissURL}}" hx-target="closest article" hx-swap="delete" hx-vals='{"{{.DismissField}}": "{{.DismissValue}}"}' title="Remove from recommendations"25 <button hx-post="{{.DismissURL}}" hx-target="closest article" hx-swap="delete" hx-vals='{"{{.DismissField}}": "{{.DismissValue}}"}' title="Remove from recommendations"
26- class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition w-full">26+ class="group inline-flex items-center justify-center gap-1 text-[10px] text-spot-text hover:text-spot-red hover:bg-spot-red/10 hover:border-spot-red/20 uppercase tracking-button px-2 py-0.5 rounded-pill bg-spot-surface border border-spot-divider transition">
27 <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>27 <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
28 <span>Hide</span>28 <span>Hide</span>
29 </button>29 </button>
modified internal/tmpl/partials/feed-item.html +3 -3
@@ -1,6 +1,6 @@
11 {{define "feed-item.html"}}
22 <div id="feed-{{.ID}}" class="contents">
3-<div class="feed-item px-5 py-4 flex items-center justify-between gap-3 hover:bg-spot-hover-50 transition">
3+<div class="feed-item px-4 sm:px-5 py-4 flex items-center justify-between gap-3 hover:bg-spot-hover-50 transition">
44 <a href="/articles?feed={{.FeedURL}}" class="min-w-0 flex-1 flex items-center gap-3">
55 {{template "favicon" dict "src" .FaviconURL.String "size" "w-5 h-5"}}
66 <div class="min-w-0 flex-1">
@@ -29,9 +29,9 @@
2929 </form>
3030 </div>
3131 </div>
32-<div id="feed-edit-{{.ID}}" class="px-5 py-4 bg-spot-hover/50 hidden">
32+<div id="feed-edit-{{.ID}}" class="px-4 sm:px-5 py-4 bg-spot-hover/50 hidden">
3333 <form hx-post="/feeds/edit" hx-target="#feed-{{.ID}}" hx-swap="outerHTML"
34- class="flex items-center gap-2">
34+ class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
3535 {{csrfInput .CSRFToken}}
3636 <input type="hidden" name="feed_url" value="{{.FeedURL}}">
3737 <input type="text" name="category" value="{{if .Category.Valid}}{{.Category.String}}{{end}}"
@@ -1,6 +1,6 @@
1 {{define "feed-item.html"}}1 {{define "feed-item.html"}}
2 <div id="feed-{{.ID}}" class="contents">2 <div id="feed-{{.ID}}" class="contents">
3-<div class="feed-item px-5 py-4 flex items-center justify-between gap-3 hover:bg-spot-hover-50 transition">3+<div class="feed-item px-4 sm:px-5 py-4 flex items-center justify-between gap-3 hover:bg-spot-hover-50 transition">
4 <a href="/articles?feed={{.FeedURL}}" class="min-w-0 flex-1 flex items-center gap-3">4 <a href="/articles?feed={{.FeedURL}}" class="min-w-0 flex-1 flex items-center gap-3">
5 {{template "favicon" dict "src" .FaviconURL.String "size" "w-5 h-5"}}5 {{template "favicon" dict "src" .FaviconURL.String "size" "w-5 h-5"}}
6 <div class="min-w-0 flex-1">6 <div class="min-w-0 flex-1">
@@ -29,9 +29,9 @@
29 </form>29 </form>
30 </div>30 </div>
31 </div>31 </div>
32-<div id="feed-edit-{{.ID}}" class="px-5 py-4 bg-spot-hover/50 hidden">32+<div id="feed-edit-{{.ID}}" class="px-4 sm:px-5 py-4 bg-spot-hover/50 hidden">
33 <form hx-post="/feeds/edit" hx-target="#feed-{{.ID}}" hx-swap="outerHTML"33 <form hx-post="/feeds/edit" hx-target="#feed-{{.ID}}" hx-swap="outerHTML"
34- class="flex items-center gap-2">34+ class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
35 {{csrfInput .CSRFToken}}35 {{csrfInput .CSRFToken}}
36 <input type="hidden" name="feed_url" value="{{.FeedURL}}">36 <input type="hidden" name="feed_url" value="{{.FeedURL}}">
37 <input type="text" name="category" value="{{if .Category.Valid}}{{.Category.String}}{{end}}"37 <input type="text" name="category" value="{{if .Category.Valid}}{{.Category.String}}{{end}}"
modified internal/tmpl/profile.html +3 -3
@@ -1,14 +1,14 @@
11 {{define "profile.html"}}
22 <div class="max-w-2xl mx-auto">
3- <div class="bg-spot-surface rounded-2xl p-6 mb-6">
4- <div class="flex items-center gap-5">
3+ <div class="bg-spot-surface rounded-2xl p-4 sm:p-6 mb-6">
4+ <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-5 text-center sm:text-left">
55 {{if .ProfileUser.AvatarURL}}<img src="{{.ProfileUser.AvatarURL}}" class="w-20 h-20 rounded-full ring-2 ring-spot-divider">{{else}}<div class="w-20 h-20 rounded-full bg-spot-hover flex items-center justify-center text-spot-muted"><svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg></div>{{end}}
66 <div class="min-w-0 flex-1">
77 <h1 class="text-2xl font-bold text-spot-text truncate" style="letter-spacing: -0.02em;">
88 {{if .ProfileUser.DisplayName}}{{.ProfileUser.DisplayName}}{{end}}
99 </h1>
1010 <p class="flex items-center gap-1.5 text-spot-secondary mt-1">@{{.ProfileUser.Handle}}<a href="https://bsky.app/profile/{{.ProfileUser.Handle}}" target="_blank" rel="noopener" class="text-spot-secondary hover:text-spot-green transition"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">{{template "icon-bluesky"}}</svg></a></p>
11- <div class="flex gap-4 mt-3">
11+ <div class="flex gap-4 mt-3 justify-center sm:justify-start">
1212 <a href="/feeds" class="group">
1313 <span class="text-xl font-bold text-spot-text">{{.SubscriptionCount}}</span>
1414 <span class="text-sm text-spot-secondary ml-1 group-hover:text-spot-text transition">feeds</span>
@@ -1,14 +1,14 @@
1 {{define "profile.html"}}1 {{define "profile.html"}}
2 <div class="max-w-2xl mx-auto">2 <div class="max-w-2xl mx-auto">
3- <div class="bg-spot-surface rounded-2xl p-6 mb-6">3+ <div class="bg-spot-surface rounded-2xl p-4 sm:p-6 mb-6">
4- <div class="flex items-center gap-5">4+ <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-5 text-center sm:text-left">
5 {{if .ProfileUser.AvatarURL}}<img src="{{.ProfileUser.AvatarURL}}" class="w-20 h-20 rounded-full ring-2 ring-spot-divider">{{else}}<div class="w-20 h-20 rounded-full bg-spot-hover flex items-center justify-center text-spot-muted"><svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg></div>{{end}}5 {{if .ProfileUser.AvatarURL}}<img src="{{.ProfileUser.AvatarURL}}" class="w-20 h-20 rounded-full ring-2 ring-spot-divider">{{else}}<div class="w-20 h-20 rounded-full bg-spot-hover flex items-center justify-center text-spot-muted"><svg class="w-10 h-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 4-7 8-7s8 3 8 7"/></svg></div>{{end}}
6 <div class="min-w-0 flex-1">6 <div class="min-w-0 flex-1">
7 <h1 class="text-2xl font-bold text-spot-text truncate" style="letter-spacing: -0.02em;">7 <h1 class="text-2xl font-bold text-spot-text truncate" style="letter-spacing: -0.02em;">
8 {{if .ProfileUser.DisplayName}}{{.ProfileUser.DisplayName}}{{end}}8 {{if .ProfileUser.DisplayName}}{{.ProfileUser.DisplayName}}{{end}}
9 </h1>9 </h1>
10 <p class="flex items-center gap-1.5 text-spot-secondary mt-1">@{{.ProfileUser.Handle}}<a href="https://bsky.app/profile/{{.ProfileUser.Handle}}" target="_blank" rel="noopener" class="text-spot-secondary hover:text-spot-green transition"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">{{template "icon-bluesky"}}</svg></a></p>10 <p class="flex items-center gap-1.5 text-spot-secondary mt-1">@{{.ProfileUser.Handle}}<a href="https://bsky.app/profile/{{.ProfileUser.Handle}}" target="_blank" rel="noopener" class="text-spot-secondary hover:text-spot-green transition"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">{{template "icon-bluesky"}}</svg></a></p>
11- <div class="flex gap-4 mt-3">11+ <div class="flex gap-4 mt-3 justify-center sm:justify-start">
12 <a href="/feeds" class="group">12 <a href="/feeds" class="group">
13 <span class="text-xl font-bold text-spot-text">{{.SubscriptionCount}}</span>13 <span class="text-xl font-bold text-spot-text">{{.SubscriptionCount}}</span>
14 <span class="text-sm text-spot-secondary ml-1 group-hover:text-spot-text transition">feeds</span>14 <span class="text-sm text-spot-secondary ml-1 group-hover:text-spot-text transition">feeds</span>
modified internal/tmpl/stats.html +1 -1
@@ -16,7 +16,7 @@
1616 </div>
1717 <div class="divide-y divide-spot-divider">
1818 {{range $metrics}}
19- <div class="px-5 py-3.5 flex items-start justify-between hover:bg-spot-hover transition">
19+ <div class="px-4 sm:px-5 py-3.5 flex flex-col sm:flex-row sm:items-start justify-between hover:bg-spot-hover transition gap-1 sm:gap-0">
2020 <div class="flex-1 min-w-0">
2121 <div class="flex items-center gap-2">
2222 <span class="text-sm font-medium text-spot-text">{{.Name}}</span>
@@ -16,7 +16,7 @@
16 </div>16 </div>
17 <div class="divide-y divide-spot-divider">17 <div class="divide-y divide-spot-divider">
18 {{range $metrics}}18 {{range $metrics}}
19- <div class="px-5 py-3.5 flex items-start justify-between hover:bg-spot-hover transition">19+ <div class="px-4 sm:px-5 py-3.5 flex flex-col sm:flex-row sm:items-start justify-between hover:bg-spot-hover transition gap-1 sm:gap-0">
20 <div class="flex-1 min-w-0">20 <div class="flex-1 min-w-0">
21 <div class="flex items-center gap-2">21 <div class="flex items-center gap-2">
22 <span class="text-sm font-medium text-spot-text">{{.Name}}</span>22 <span class="text-sm font-medium text-spot-text">{{.Name}}</span>