diff --git a/public/index.html b/public/index.html
index bfbf77f..70ef75a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,26 +28,23 @@
h1, h2, h3 {
font-family: serif;
- margin: 0;
+ margin: 16px 0;
}
h1 {
font-size: 36px;
line-height: 48px;
- margin-bottom: 12px;
}
h2 {
font-size: 24px;
line-height: 30px;
- margin-bottom: 6px;
}
h3 {
clear: both;
font-size: 20px;
line-height: 24px;
- margin-bottom: 6px;
}
img,
@@ -80,6 +77,33 @@
clear: both;
}
+ nav.tabs .tab-list {
+ display: flex;
+ justify-content: end;
+ list-style-type: none;
+ margin: 0 0 12px 0;
+ padding: 0;
+ }
+
+ nav.tabs .tab-list .tab {
+ margin-left: 12px;
+ }
+
+ nav.tabs .tab-list .tab:first-child {
+ margin-left: 0;
+ }
+
+ nav.tabs .tab-list .tab a {
+ padding: 12px;
+ color: #444;
+ display: inline-block;
+ text-decoration: none;
+ }
+
+ nav.tabs .tab-list .tab.active a {
+ border-bottom: 3px solid #f5e6ab;
+ }
+
input,
button {
margin: 6px 0;
@@ -106,7 +130,8 @@
margin: 6px 0;
}
- section.posts .controls {
+ section.posts header.controls {
+ margin-top: -16px;
padding: 0 0 36px;
display: grid;
grid-template:
@@ -115,11 +140,11 @@
"c";
}
- section.posts .controls .search-form input {
+ section.posts header.controls .search-form input {
width: 80%;
}
- section.posts .controls .loading-indicator {
+ section.posts header.controls .loading-indicator {
width: 20px;
height: 20px;
vertical-align: middle;
@@ -127,7 +152,7 @@
overflow: visible;
}
- section.posts .controls .loading-indicator .arc {
+ section.posts header.controls .loading-indicator .arc {
/* svg */
fill: transparent;
stroke-width: 20;
@@ -144,49 +169,50 @@
}
}
- section.posts .controls .buttons {
+ section.posts header.controls .buttons {
display: flex;
justify-content: end;
flex-wrap: wrap;
}
- section.posts .controls .post-info {
+ section.posts header.controls .post-info {
grid-area: b;
}
- section.posts .controls .search-form {
+ section.posts header.controls .search-form {
grid-area: c;
}
- section.posts .controls .buttons {
+ section.posts header.controls .buttons {
grid-area: a;
}
@media screen and (min-width: 640px) {
- section.posts .controls {
+ section.posts header.controls {
grid-template:
"a a"
"b c";
}
- section.posts .controls .post-info {
+ section.posts header.controls .post-info {
grid-area: a;
}
- section.posts .controls .search-form {
+ section.posts header.controls .search-form {
grid-area: b;
}
- section.posts .controls .search-form input {
+ section.posts header.controls .search-form input {
width: auto;
}
- section.posts .controls .buttons {
+ section.posts header.controls .buttons {
grid-area: c;
}
}
section.posts .controls .control-button {
+ /* used for both header and post controls */
padding: 6px;
margin: 6px 0 6px 12px;
background: #f5e6ab;
@@ -261,6 +287,10 @@
}
}
+ section.help ul {
+ line-height: 1.8;
+ }
+
code {
font-family: monospace;
padding: .16rem .24rem;
diff --git a/src/computersandblues/lodestone/app.cljs b/src/computersandblues/lodestone/app.cljs
index 6950f76..7f53999 100644
--- a/src/computersandblues/lodestone/app.cljs
+++ b/src/computersandblues/lodestone/app.cljs
@@ -534,17 +534,56 @@
(defn help-section []
[:section.help
[:h2 "Help"]
- [:h3 "Search Syntax"]
- [:ul.search-syntax
- [:li "Three are several places that we take into account when looking for query results"
+ [:h3 "Search"]
+ [:ul
+ [:li "Type into the input field at the top of the list of posts. Results are updated in real time."]
+ [:li "Search is case-insensitive, differences in upper- and lower-case are ignored"]
+ [:li "The search is split into terms whenever there is a space. Each term needs to match, but order does not matter."
+ [:ul
+ [:li "For example " [:code "hello world"] " will search for both" [:code "hello"] " and "
+ [:code "world"] ", but will match " [:code "hello world!"] " as well as " [:code "world, did you say hello today?"]]
+ [:li "To search for a longer phrase that contains spaces, " [:code "\"quote it like this\""]]]]
+ [:li "By default terms are fuzzy and can match in any of the following places:"
[:ul
[:li "Post content"]
+ [:li "Description of any attachment"]
[:li "Creator of the post"]
[:li "Any mentioned account"]]]
- [:li "Upper- and lowercase does not make a difference."]
- [:li "All words are matched separately. They do not have to appear in the post in the same order, but they all have to appear."]
- [:li "If you want to search verbatim for a phrase, \"quote it like this\""]
- [:li "Lodestone tries to turn words into regular expressions. " [:code "fossi.*ergy"] " will match \"fossile energy\"." [:code "bo?ar"] " will match both boar and bar."]]])
+ [:li "By default Lodestone tries to turn terms into regular expressions."
+ [:ul
+ [:li [:code "fossi.*ergy"] " will match \"fossile energy\"."]
+ [:li [:code "bo?ar"] " will match both boar and bar."]
+ [:li [:code "\"for (this|that)\""] " will match \"for this\" and \"for that\"."]]]
+ [:li "Terms can be prefixed to change default behavior:"
+ [:ul
+ [: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
+ [:li [:code "date:2023"] " will match posts created after 2023-01-01 and before 2023-12-31."]
+ [:li [:code "before:2024-10-31"] " will match posts created before 2024-10-31."]
+ [:li [:code "after:2025-02"] " will match any post created on or after 2025-02-01."]]]
+ [:li "User prefixes restrict results based on who posted or who was addressed. "
+ [:ul
+ [:li [:code "from:xy"] " matches all posts by all users whose name starts with " [:code "xy"]]
+ [:li [:code "to:xy"] " matches all posts where any mentioned user has a name that starts with " [:code "xy"]]]]]]]])
+
+;; tab bar
+
+(defn- switch-section! [section]
+ (fn [e]
+ (.preventDefault e)
+ (swap! state assoc :section section)))
+
+(defn tabs [{:keys [section]}]
+ (when-not (= section :login)
+ [:nav.tabs
+ (into [:ul.tab-list]
+ (map
+ (fn [[sec label]]
+ [:li.tab
+ {:class [(when (= section sec) "active")]}
+ [:a {:href "#" :on-click (switch-section! sec)} label]]))
+ [[:posts "Posts"] [:help "Help"]])]))
;; the component tying it all together
@@ -552,6 +591,7 @@
(let [section (:section @state)
posts (:section/posts @state)]
[:main#app
+ [tabs {:section section}]
(case section
:login [login-section]
:posts [posts-section {:posts posts}]