From ad6528e1ba16ac9857dff879276834b1b5161382 Mon Sep 17 00:00:00 2001 From: SayaAndy Date: Sun, 5 Apr 2026 04:42:31 +0700 Subject: feat: redesign catalog sidebar feat: add indicators on catalog if user liked or viewed the page feat: add accent colors for each theme --- internal/router/handlers/api-v1-blog-search.go | 2 + static/input.css | 27 ++++- views/pages/blog-catalogue.html | 158 ++++++++++++++++++++----- views/partials/catalogue-blog-cards.html | 18 +-- 4 files changed, 164 insertions(+), 41 deletions(-) diff --git a/internal/router/handlers/api-v1-blog-search.go b/internal/router/handlers/api-v1-blog-search.go index a0316e2..1e8a480 100644 --- a/internal/router/handlers/api-v1-blog-search.go +++ b/internal/router/handlers/api-v1-blog-search.go @@ -91,7 +91,9 @@ func (r *BlogSearchHandler) Render(c *fiber.Ctx, supplements *router.Supplements "Thumbnail": page.Metadata.Thumbnail, "Tags": page.Metadata.Tags, "LikeCount": supplements.ClientCache.GetLikeCount(page.FileName), + "Liked": supplements.ClientCache.GetLikeStatus(c.IP(), page.FileName), "ViewCount": supplements.ClientCache.GetViewCount(page.FileName), + "Viewed": supplements.ClientCache.GetViewStatus(c.IP(), page.FileName), }) break } diff --git a/static/input.css b/static/input.css index 11de22c..375caa4 100644 --- a/static/input.css +++ b/static/input.css @@ -1,6 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Gentium+Plus:ital,wght@0,400;0,700;1,400;1,700&family=M+PLUS+Rounded+1c:wght@100;300;400;500;700;800;900&display=swap'); @import "tailwindcss"; +@plugin "@tailwindcss/forms"; @theme { --font-m-plus: "M PLUS Rounded 1c", sans-serif; @@ -13,6 +14,14 @@ --color-background-medium: var(--color-background-medium); --color-background-light: var(--color-background-light); --color-secondary: var(--color-secondary); + --color-accent-light: var(--color-accent-light); + --color-accent-deep: var(--color-accent-deep); + --color-main-light-hard: var(--color-main-light-hard); + --color-main-light-medium: var(--color-main-light-medium); + --color-main-light-soft: var(--color-main-light-soft); + --color-main-dark-hard: var(--color-main-dark-hard); + --color-main-dark-medium: var(--color-main-dark-medium); + --color-main-dark-soft: var(--color-main-dark-soft); } html { @@ -78,6 +87,8 @@ body { } [data-theme="olive"] { + --color-accent-light: var(--color-lime-300); + --color-accent-deep: var(--color-lime-600); --color-main-dark-hard: #4b513a; --color-main-dark-medium: #8a9d8a; --color-main-dark-soft: #a5b8a5; @@ -106,6 +117,8 @@ body { } [data-theme="lettuce"] { + --color-accent-light: var(--color-lime-300); + --color-accent-deep: var(--color-lime-600); --color-main-dark-hard: #384a0c; --color-main-dark-medium: #617c1f; --color-main-dark-soft: #9bb665; @@ -134,6 +147,8 @@ body { } [data-theme="night"] { + --color-accent-light: var(--color-indigo-900); + --color-accent-deep: var(--color-indigo-500); --color-main-light-hard: var(--color-sky-100); --color-main-light-medium: var(--color-sky-200); --color-main-light-soft: var(--color-sky-300); @@ -162,6 +177,8 @@ body { } [data-theme="ram"] { + --color-accent-light: var(--color-orange-800); + --color-accent-deep: var(--color-orange-300); --color-main-light-hard: #fefad8; --color-main-light-medium: #f6e4c5; --color-main-light-soft: #e8d4b8; @@ -190,6 +207,8 @@ body { } [data-theme="lilac"] { + --color-accent-light: var(--color-indigo-300); + --color-accent-deep: var(--color-indigo-800); --color-main-dark-hard: #343b58; --color-main-dark-medium: #414868; --color-main-dark-soft: #6c6e75; @@ -650,12 +669,12 @@ body[data-theme~="ram"] .leaflet-tile { min-width: fit-content; } - .ar-gt-0\.8\:min-w-\[10dvh\] { - min-width: 10dvh; + .ar-gt-0\.8\:min-w-1\/10 { + min-width: 10%; } - .ar-gt-0\.8\:max-w-\[20dvh\] { - max-width: 20dvh; + .ar-gt-0\.8\:max-w-1\/4 { + max-width: 25%; } .ar-gt-0\.8\:items-center { diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html index 2584bda..2f0b45f 100644 --- a/views/pages/blog-catalogue.html +++ b/views/pages/blog-catalogue.html @@ -1,53 +1,155 @@ {{ define "body" }}
-
+
- {{ .L.BlogSearch.TagsHeader }} -
-
- -
- {{- range .Tags }} -
- -
- {{- end }} -
-
-
{{ .L.BlogSearch.OrderByHeader }}
-
- +
+
-
- +
+
-
- +
+
-
- +
+ +
+
+
+
+ +
+
+
+
+ {{ .L.BlogSearch.TagsHeader }} +
- +
+ {{- range .Tags }}
- +
+ {{- end }}
-
- +
+
-
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html index 4333c77..7096c0d 100644 --- a/views/partials/catalogue-blog-cards.html +++ b/views/partials/catalogue-blog-cards.html @@ -4,26 +4,26 @@
-
+
Smiley Thumbs Up Streamline Icon: https://streamlinehq.com - - - - - + + + + + {{ .LikeCount }}
-
+
View Eye 1 Streamline Icon: https://streamlinehq.com - - + + {{ .ViewCount }}
-- cgit v1.3.1+13