From b98c4ce1c9a359ceed1e2f396014f42cad8f2232 Mon Sep 17 00:00:00 2001 From: arne Date: Sat, 22 Nov 2025 18:29:38 +0100 Subject: [PATCH 1/2] Improve search bar appearance --- public/index.html | 69 +++++++++++++----------- src/computersandblues/lodestone/app.cljs | 5 ++ 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/public/index.html b/public/index.html index 70ef75a..73b6904 100644 --- a/public/index.html +++ b/public/index.html @@ -20,20 +20,15 @@ line-height: 1.2; } - @media screen and (min-width: 768px) { - body { - margin: 24px; - } - } - h1, h2, h3 { font-family: serif; - margin: 16px 0; + margin: 18px 0; } h1 { font-size: 36px; line-height: 48px; + margin-top: 0; } h2 { @@ -56,19 +51,28 @@ } p { - margin: 16px 0; + margin: 18px 0; } img.illustration { width: 150px; height: auto; - float: left; margin-right: 24px; margin-bottom: 24px; mix-blend-mode: luminosity; vertical-align: middle; } + @media screen and (min-width: 640px) { + h1 { + margin-top: 18px; + } + + img.illustration { + float: left; + } + } + p.intro { font-size: 20px; } @@ -131,16 +135,12 @@ } section.posts header.controls { - margin-top: -16px; padding: 0 0 36px; - display: grid; - grid-template: - "a" - "b" - "c"; + display: block; } section.posts header.controls .search-form input { + margin: 0; width: 80%; } @@ -148,7 +148,7 @@ width: 20px; height: 20px; vertical-align: middle; - margin-left: 16px; + margin-left: 18px; overflow: visible; } @@ -171,35 +171,43 @@ section.posts header.controls .buttons { display: flex; - justify-content: end; + justify-content: start; flex-wrap: wrap; } - section.posts header.controls .post-info { + section.posts header.controls .search-form { + margin: 18px 0; + grid-area: a; + } + + section.posts header.controls .display-info { grid-area: b; } - section.posts header.controls .search-form { + section.posts header.controls .buttons { grid-area: c; } - section.posts header.controls .buttons { - grid-area: a; + section.posts header.controls .buttons .control-button { + margin: 6px 12px 6px 0; } @media screen and (min-width: 640px) { section.posts header.controls { + display: grid; grid-template: - "a a" - "b c"; + "a b" + "c c"; } - section.posts header.controls .post-info { - grid-area: a; + section.posts header.controls .display-info { + margin-top: 12px; + grid-area: c; } section.posts header.controls .search-form { - grid-area: b; + margin: 0; + grid-area: a; } section.posts header.controls .search-form input { @@ -207,7 +215,8 @@ } section.posts header.controls .buttons { - grid-area: c; + justify-content: end; + grid-area: b; } } @@ -253,7 +262,7 @@ } section.posts .post .attachments { - margin-top: 16px; + margin-top: 18px; max-height: 320px; display: flex; align-items: flex-start; @@ -264,7 +273,7 @@ section.posts .post .attachments img, section.posts .post .attachments video { max-height: 320px; - margin-left: 16px; + margin-left: 18px; } section.posts .post .attachments img:first-child, @@ -302,7 +311,7 @@ blockquote { margin-left: 0; - padding: 16px 0 16px 24px; + padding: 18px 0 18px 24px; border-left: 3px solid #f5e6ab; } diff --git a/src/computersandblues/lodestone/app.cljs b/src/computersandblues/lodestone/app.cljs index 7f53999..3d94653 100644 --- a/src/computersandblues/lodestone/app.cljs +++ b/src/computersandblues/lodestone/app.cljs @@ -508,6 +508,11 @@ [:section.posts [:h2 "Favorites"] [:header.controls + [:section.search-form + [search {:query query}] + [loading-indicator {:loading loading}] + #_(cond (= api-state :loading) " …" + (= api-state :error) " API Error!")] [:p.display-info (str "Loaded " total " posts" (when (or query (> total per-page)) From 9f7ad0c304f2184a224bad837a486baf64231efa Mon Sep 17 00:00:00 2001 From: arne Date: Sat, 22 Nov 2025 18:30:49 +0100 Subject: [PATCH 2/2] Document `body:` search prefix --- src/computersandblues/lodestone/app.cljs | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/computersandblues/lodestone/app.cljs b/src/computersandblues/lodestone/app.cljs index 3d94653..4240f3e 100644 --- a/src/computersandblues/lodestone/app.cljs +++ b/src/computersandblues/lodestone/app.cljs @@ -520,11 +520,6 @@ (if (= 1 n-displayed) " match" " matches")))))] - [:section.search-form - [search {:query query}] - [loading-indicator {:loading loading}] - #_(cond (= api-state :loading) " …" - (= api-state :error) " API Error!")] [:section.buttons [:button.control-button {:on-click fetch-more-posts! :disabled (boolean (seq loading))} "⇓ Fetch more"] [:button.control-button {:on-click disconnect-account!} "▤ Disconnect account"]]] @@ -561,6 +556,7 @@ [:li [:code "\"for (this|that)\""] " will match \"for this\" and \"for that\"."]]] [:li "Terms can be prefixed to change default behavior:" [:ul + [:li [:code "body:term"] " will return results that have a fuzzy match for \"term\" anywhere in the post body or in any image or video description."] [:li "Date prefixes can be used to restrict a date range for your results. Dates are meant to be given like " [:code "2025-11-22"] " / " [:code "YYYY-MM-DD"] ", but month and day are optional." [:ul