From e24ea510232b0831a81ba0d4a2623976f79a3d9f Mon Sep 17 00:00:00 2001 From: Tom Smeding Date: Wed, 1 Apr 2026 00:21:56 +0200 Subject: Styling and layout Thanks Daniel! --- pages/index.mustache | 3 ++- pages/log.mustache | 53 ++++++++++++++++++++++------------------- pages/style.css | 67 +++++++++++++++++++++++++++++++++++++++++----------- src/Main.hs | 12 ++++++---- 4 files changed, 92 insertions(+), 43 deletions(-) diff --git a/pages/index.mustache b/pages/index.mustache index cc0a8f4..642e4ba 100644 --- a/pages/index.mustache +++ b/pages/index.mustache @@ -2,7 +2,8 @@ - Ircbrowse2 + ircbrowse2 + diff --git a/pages/log.mustache b/pages/log.mustache index 24b7b78..851288d 100644 --- a/pages/log.mustache +++ b/pages/log.mustache @@ -2,7 +2,8 @@ - Ircbrowse2: {{channel}} ({{network}}) + ircbrowse2: {{channel}} ({{network}}) + @@ -10,35 +11,39 @@
Home - {{network}}/{{channel}} - Calendar
-

Logs for {{channel}} on {{network}}

+

Logs: {{network}}/{{channel}}

{{#picker}} - Page - {{#prevpage}} - 1 - .. - <Prev - {{/prevpage}} - {{#leftnums}} - {{.}} - {{/leftnums}} - {{curnum}} - {{#rightnums}} - {{.}} - {{/rightnums}} - {{#nextpage}} - Next> - .. - {{npages}} - {{/nextpage}} + {{#prevpage}}{{/prevpage}}{{^prevpage}}{{/prevpage}}←Prev  + {{#nextpage}}{{/nextpage}}{{^nextpage}}{{/nextpage}}Next→ +
+ Page + {{#firstpage}} + 1 + {{/firstpage}} + {{#leftdots}} + .. + {{/leftdots}} + {{#leftnums}} + {{.}} + {{/leftnums}} + {{curnum}} + {{#rightnums}} + {{.}} + {{/rightnums}} + {{#rightdots}} + .. + {{/rightdots}} + {{#lastpage}} + {{npages}} + {{/lastpage}} +
{{/picker}} - — - {{totalevents}} events total. + — + {{totalevents}} events total
{{#events}} diff --git a/pages/style.css b/pages/style.css index e7c850a..551bb21 100644 --- a/pages/style.css +++ b/pages/style.css @@ -1,11 +1,48 @@ +body { + --font-color: #000; + --bg-color: #f8f8f8; + --header-bg-color: #ddd; + --footer-text-color: #333; + --footer-bg-color: #eee; + --meta-color: #777; + --nickwrap-color: #999; + --link-color: #33f; +} + +@media (prefers-color-scheme: dark) { + body { + --font-color: #ddd; + --header-bg-color: #282828; + --bg-color: #1d1d1d; + --footer-bg-color: #333; + --footer-text-color: #eee; + --meta-color: #676767; + --nickwrap-color: var(--meta-color); + --link-color: #abf; + } +} + html, body { margin: 0; } body { - font-family: sans-serif; + font-family: "Adwaita Sans", sans-serif; + font-variant-numeric: tabular-nums; + background-color: var(--bg-color); + color: var(--font-color); +} + +a { + text-decoration: none; + color: var(--link-color); +} + +a:hover { + text-decoration: underline; } +/* put footer at bottom */ #gridwrapper { min-height: 100vh; display: grid; @@ -20,7 +57,7 @@ body { } header { - background-color: #ddd; + background-color: var(--header-bg-color); padding: 10px; padding-left: 20px; } @@ -30,10 +67,10 @@ main { } footer { - background-color: #eee; + background-color: var(--footer-bg-color); padding: 20px; font-size: smaller; - color: #333; + color: var(--footer-text-color); } .hdrspacer { @@ -41,13 +78,6 @@ footer { width: 15px; } -.hdrchannel { - font-size: larger; - font-weight: bold; - vertical-align: middle; - margin-left: 15px; -} - .hdritem { margin-top: auto; margin-bottom: auto; @@ -62,12 +92,21 @@ footer { /* log page */ #pagepicker { display: inline-block; - background-color: #eee; + background-color: var(--footer-bg-color); padding: 5px; border-radius: 5px; margin-bottom: 10px; } +#pagepicker-pages { + display: inline-block; + margin-left: 10px; +} + +#pagepicker-pages a, #pagepicker-pages b { + padding: 0 6px; +} + table#events td { padding: 2px; vertical-align: top; @@ -82,8 +121,8 @@ table#events td:nth-child(-n + 2) { padding-right: 10px; } -span.nickwrap { color: #888; } -table#events tr.ev-meta > td:nth-child(n + 2) { color: #666; } +span.nickwrap { color: var(--nickwrap-color); } +table#events tr.ev-meta > td:nth-child(n + 2) { color: var(--meta-color); } table#events tr.ev-act > td:nth-child(n + 2) { font-style: italic; } table#events tr.ev-notice > td:nth-child(n + 2) { font-weight: bold; } table#events tr.ev-parseerror > td:nth-child(n + 2) { color: red; } diff --git a/src/Main.hs b/src/Main.hs index 75b9a96..818d300 100644 --- a/src/Main.hs +++ b/src/Main.hs @@ -85,10 +85,14 @@ pageLog conf pages index req alias = ,"totalevents" ~> indexNumEvents index chan ,"picker" ~> M.object ["prevpage" ~> if curpage > 1 then Just (curpage - 1) else Nothing + ,"nextpage" ~> if curpage < npages then Just (curpage + 1) else Nothing + ,"firstpage" ~> (curpage > 6) + ,"leftdots" ~> (curpage > 7) + ,"rightdots" ~> (curpage < npages - 6) + ,"lastpage" ~> (curpage < npages - 5) ,"leftnums" ~> [curpage - ntoleft .. curpage - 1] ,"curnum" ~> curpage ,"rightnums" ~> [curpage + 1 .. curpage + ntoright] - ,"nextpage" ~> if curpage < npages then Just (curpage + 1) else Nothing ,"npages" ~> npages] ,"events" ~> [M.object ["classlist" ~> classlist @@ -112,9 +116,9 @@ pageLog conf pages index req alias = renderEvent :: Event -> (Maybe Text, (Maybe Text, Text, Maybe Text), Text) renderEvent = \case - Join n addr -> (j "ev-meta", (no, n, j " →"), "Joins (" <> addr <> ")") - Part n addr reas -> (j "ev-meta", (no, n, j " ←"), "Parts (" <> addr <> ") (" <> reas <> ")") - Quit n addr reas -> (j "ev-meta", (no, n, j " ×"), "Quits (" <> addr <> ") (" <> reas <> ")") + Join n addr -> (j "ev-meta", (no, "", j "→"), n <> " joins (" <> addr <> ")") + Part n addr reas -> (j "ev-meta", (no, "", j "←"), n <> " parts (" <> addr <> ") (" <> reas <> ")") + Quit n addr reas -> (j "ev-meta", (no, "", j "×"), n <> " quits (" <> addr <> ") (" <> reas <> ")") ReNick n n' -> (j "ev-meta", (no, n, no), "is now known as " <> n') Talk n m -> (no, (j "<", n, j ">"), m) Notice n m -> (j "ev-notice", (j "-", n, j "-"), m) -- cgit v1.3