From 51bafed8059ccdb86363c73f19e449afe431ab67 Mon Sep 17 00:00:00 2001 From: Timur Ismagilov Date: Thu, 15 Jul 2021 22:19:10 +0500 Subject: [PATCH] Add the hamburger --- static/default.css | 56 +++-- static/view.js | 19 ++ views/stuff.qtpl | 5 +- views/stuff.qtpl.go | 527 ++++++++++++++++++++++---------------------- 4 files changed, 320 insertions(+), 287 deletions(-) create mode 100644 static/view.js diff --git a/static/default.css b/static/default.css index 1ae2bbd..b3cfec9 100644 --- a/static/default.css +++ b/static/default.css @@ -614,6 +614,26 @@ kbd { .top-bar__highlight-link:hover { background-color: #eee; } +.auth-links__box { + display: block; + line-height: 2rem; +} +.auth-links__link { + display: block; + padding: 0 .5rem; +} +.top-bar__home-link-wrapper, +.top-bar__highlight { + display: block; + margin-right: .5rem; + line-height: 2rem; +} +.top-bar__home-link, +.auth-links__link, +.top-bar__highlight-link { + display: block; + padding: 0 .5rem; +} @media (prefers-color-scheme: dark) { .top-bar a { @@ -646,6 +666,9 @@ kbd { .top-bar__section_highlights { grid-column: 1 / span 3; } + .top-bar__section_hamburger { + display: none; + } .top-bar__search-bar { width: 100%; @@ -664,30 +687,12 @@ kbd { } } - -.auth-links__box { - display: block; - line-height: 2rem; -} -.auth-links__link { - display: block; - padding: 0 .5rem; -} -.top-bar__home-link-wrapper, -.top-bar__highlight { - display: block; - margin-right: .5rem; - line-height: 2rem; -} -.top-bar__home-link, -.auth-links__link, -.top-bar__highlight-link { - display: block; - padding: 0 .5rem; -} - @media screen and (max-width: 799px) { + header { + margin: 0; + } .top-bar__wrapper { + margin: 0; grid-template-columns: 1fr 2fr 1fr; } .top-bar__section_home { @@ -697,6 +702,10 @@ kbd { grid-column: 2 / span 1; text-align: center; } + .top-bar__section_hamburger { + grid-column: 3 / span 1; + grid-row: 1 / span 1; + } .top-bar__section_auth, .top-bar__section_highlights { grid-column: 1 / span 3; @@ -710,4 +719,7 @@ kbd { .top-bar__highlight { margin-right: 0; } + .top-bar__section_hidden-on-mobile { + display: none; + } } \ No newline at end of file diff --git a/static/view.js b/static/view.js new file mode 100644 index 0000000..ca587d8 --- /dev/null +++ b/static/view.js @@ -0,0 +1,19 @@ +let wrapper = document.getElementsByClassName("top-bar__wrapper")[0], + auth = document.getElementsByClassName("top-bar__section_auth")[0], + highlights = document.getElementsByClassName("top-bar__section_highlights")[0] + +const toggleElement = el => el.classList.toggle("top-bar__section_hidden-on-mobile") + +let hamburger = document.createElement("button") +hamburger.classList.add("top-bar__hamburger") +hamburger.onclick = _ => { + toggleElement(auth) + toggleElement(highlights) +} +hamburger.innerText = "Menu" + +let hamburgerSection = document.createElement("li") +hamburgerSection.classList.add("top-bar__section", "top-bar__section_hamburger") + +hamburgerSection.appendChild(hamburger) +wrapper.appendChild(hamburgerSection) \ No newline at end of file diff --git a/views/stuff.qtpl b/views/stuff.qtpl index 557d3b8..4964837 100644 --- a/views/stuff.qtpl +++ b/views/stuff.qtpl @@ -31,7 +31,7 @@ {% if cfg.UseAuth %} -
  • +
    • {% endif %} -
  • +