diff --git a/public/lp.svg b/public/lp.svg index bdae6cc..6400dc9 100644 --- a/public/lp.svg +++ b/public/lp.svg @@ -1,4 +1,4 @@ - + diff --git a/src/nitter.nim b/src/nitter.nim index 25a569d..c13adc4 100644 --- a/src/nitter.nim +++ b/src/nitter.nim @@ -63,7 +63,7 @@ routes: resp renderMain(renderSearch(), request, cfg, themePrefs()) get "/about": - resp renderMain(renderAbout(), request, cfg, themePrefs()) + resp renderMain(renderAbout(), request, cfg, themePrefs(), "About") get "/explore": redirect("/about") diff --git a/src/sass/index.scss b/src/sass/index.scss index 9e2e347..a4dcb99 100644 --- a/src/sass/index.scss +++ b/src/sass/index.scss @@ -83,7 +83,6 @@ a { fieldset { border: 0; padding: 0; - margin-top: -0.6em; } legend { @@ -96,6 +95,10 @@ legend { margin-bottom: 8px; } +.preferences > form:first-of-type { + margin-top: -.6em; +} + .preferences .note { border-top: 1px solid var(--border_grey); border-bottom: 1px solid var(--border_grey); diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss index 17c2a22..3b7bbd2 100644 --- a/src/sass/inputs.scss +++ b/src/sass/inputs.scss @@ -88,22 +88,6 @@ input::-webkit-datetime-edit-year-field:focus { } } -.checkbox { - position: absolute; - top: 1px; - right: 0; - height: 17px; - width: 17px; - background-color: var(--bg_elements); - border: 1px solid var(--accent_border); - - &:after { - content: ""; - position: absolute; - display: none; - } -} - .checkbox-container { display: block; position: relative; @@ -114,31 +98,38 @@ input::-webkit-datetime-edit-year-field:focus { input { position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; + right: 0; + height: 19px; + width: 19px; + background-color: var(--bg_elements); + border: 1px solid var(--accent_border); + appearance: none; + box-sizing: border-box; + cursor: inherit; - &:checked ~ .checkbox:after { + &:after { + left: 2px; + bottom: 0; + font-size: 13px; + font-family: $font_4; + content: '\e803'; + position: absolute; + display: none; + bottom: 2px; + } + + &:checked:after { display: block; } } - &:hover input ~ .checkbox { + &:hover input { border-color: var(--accent); } - &:active input ~ .checkbox { + &:active input { border-color: var(--accent_light); } - - .checkbox:after { - left: 2px; - bottom: 0; - font-size: 13px; - font-family: $font_4; - content: '\e803'; - } } .pref-group { diff --git a/src/sass/search.scss b/src/sass/search.scss index 0311fb0..40a14b3 100644 --- a/src/sass/search.scss +++ b/src/sass/search.scss @@ -64,13 +64,14 @@ margin-left: 23px; } - .checkbox { + input[type=checkbox] { right: unset; left: -22px; + top: 1px; } - .checkbox-container .checkbox:after { - top: -4px; + .checkbox-container input[type=checkbox]:after { + top: 1px; } } diff --git a/src/views/general.nim b/src/views/general.nim index 5e96d02..0bc287e 100644 --- a/src/views/general.nim +++ b/src/views/general.nim @@ -32,7 +32,7 @@ proc renderNavbar(cfg: Config; req: Request; rss, canonical: string): VNode = if cfg.enableRss and rss.len > 0: icon "rss-feed", title="RSS Feed", href=rss icon "bird", title="Open in Twitter", href=canonical - a(href="https://liberapay.com/zedeus"): verbatim lp + a(href="https://liberapay.com/zedeus", title="Liberapay — zedeus"): verbatim lp icon "info", title="About", href="/about" icon "cog", title="Preferences", href=("/settings?referer=" & encodeUrl(path)) @@ -42,7 +42,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc=""; var theme = prefs.theme.toTheme if "theme" in req.params: theme = req.params["theme"].toTheme - + let ogType = if video.len > 0: "video" elif rss.len > 0: "object" @@ -134,7 +134,7 @@ proc renderMain*(body: VNode; req: Request; cfg: Config; prefs=defaultPrefs; body: renderNavbar(cfg, req, rss, canonical) - tdiv(class="container"): + main(class="container"): body result = doctype & $node diff --git a/src/views/preferences.nim b/src/views/preferences.nim index 1787704..8bd25bb 100644 --- a/src/views/preferences.nim +++ b/src/views/preferences.nim @@ -10,7 +10,8 @@ macro renderPrefs*(): untyped = ident("buildHtml"), ident("tdiv"), nnkStmtList.newTree()) for header, options in prefList: - result[2].add nnkCall.newTree( + var prefGroup = nnkCall.newTree(ident("fieldset"), nnkStmtList.newTree()) + prefGroup[1].add nnkCall.newTree( ident("legend"), nnkStmtList.newTree( nnkCommand.newTree(ident("text"), newLit(header)))) @@ -30,20 +31,21 @@ macro renderPrefs*(): untyped = else: stmt[0].add newLit(pref.options) - result[2].add stmt + prefGroup[1].add stmt + + result[2].add prefGroup proc renderPreferences*(prefs: Prefs; path: string; themes: seq[string]): VNode = - buildHtml(tdiv(class="overlay-panel")): - fieldset(class="preferences"): - form(`method`="post", action="/saveprefs", autocomplete="off"): - refererField path + buildHtml(tdiv(class="overlay-panel preferences")): + form(`method`="post", action="/saveprefs", autocomplete="off"): + refererField path - renderPrefs() + renderPrefs() - h4(class="note"): - text "Preferences are stored client-side using cookies without any personal information." + h4(class="note"): + text "Preferences are stored client-side using cookies without any personal information." - button(`type`="submit", class="pref-submit"): - text "Save preferences" + button(`type`="submit", class="pref-submit"): + text "Save preferences" - buttonReferer "/resetprefs", "Reset preferences", path, class="pref-reset" + buttonReferer "/resetprefs", "Reset preferences", path, class="pref-reset" diff --git a/src/views/renderutils.nim b/src/views/renderutils.nim index 9dffdcb..1bb4140 100644 --- a/src/views/renderutils.nim +++ b/src/views/renderutils.nim @@ -57,22 +57,21 @@ proc buttonReferer*(action, text, path: string; class=""; `method`="post"): VNod text text proc genCheckbox*(pref, label: string; state: bool): VNode = - buildHtml(label(class="pref-group checkbox-container")): - text label - input(name=pref, `type`="checkbox", checked=state) - span(class="checkbox") + buildHtml(tdiv(class="pref-group checkbox-container")): + label(`for`=pref): text label + input(id=pref, name=pref, `type`="checkbox", checked=state) proc genInput*(pref, label, state, placeholder: string; class=""; autofocus=true): VNode = let p = placeholder buildHtml(tdiv(class=("pref-group pref-input " & class))): if label.len > 0: label(`for`=pref): text label - input(name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0)) + input(id=pref, name=pref, `type`="text", placeholder=p, value=state, autofocus=(autofocus and state.len == 0)) proc genSelect*(pref, label, state: string; options: seq[string]): VNode = buildHtml(tdiv(class="pref-group pref-input")): label(`for`=pref): text label - select(name=pref): + select(id=pref, name=pref): for opt in options: option(value=opt, selected=(opt == state)): text opt