Fix issues of focus theme

src/moin/templates/layout.html

@@ -52,7 +52,7 @@
         </header>
         {{ after_header }}
 
-        <div id="moin-page" role="main">
+        <div id="moin-page" role="main" lang="{{ theme_supp.content_lang }}" dir="{{ theme_supp.content_dir }}">
             {% block item -%}
                 {# If you want itemviews in your template, extend from show.html, not from here. #}
                 <div id="moin-content">

src/moin/themes/focus/static/css/theme.css

@@ -7,18 +7,12 @@
     --negative: #cc4343;
 }
 
-@font-face {
-    font-family: 'JetBrains Mono';
-    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
-    font-weight: normal;
-    font-style: normal;
-}
-
 html { background-color: white; }
 html * { box-sizing: border-box; }
 html, body { max-width: 100vw; max-height: 100vh; overflow-x: hidden;}
 h1, h2, h3, h4, h5, h6 { border-bottom: none; }
 h2 { margin-top: 1.6em; margin-bottom: 0.5em; }
+table tr td { border: none; }
 .clickable-header { cursor: pointer; }
 input[type="checkbox"] { appearance: none; border: 2pt solid #242424;
     height: 12pt; width: 12pt; transition: background-color 80ms linear; }
@@ -28,6 +22,7 @@ input[type="checkbox"]:checked { background-color: var(--accent-light); }
 .moin-logo { text-align: start; }
 .moin-sitename { display: flex; margin-top: 4pt; margin-bottom: 10pt;
     font-size: 1.4rem; font-weight: 600; white-space: normal; }
+#toggle-header { display: none; background-color: transparent; border: none; min-width: 25px; }
 #moin-username, #moin-navibar { display: flex; flex-direction: column; row-gap: 6pt; margin-bottom: 8pt; }
 #moin-username a, #moin-navibar a { width: 90%; display: block; padding: 4pt; border-radius: 2pt; }
 #moin-username a:hover, #moin-navibar a:hover,
@@ -45,7 +40,7 @@ input[type="checkbox"]:checked { background-color: var(--accent-light); }
 
 #moin-page { min-width: 0pt; }
 
-header { min-width: 140pt; min-height: 100vh; margin-right: 18pt; padding: 8pt;
+header { min-width: 140pt; width: 220px; min-height: 100vh; margin-right: 18pt; padding: 8pt;
     box-shadow: 2pt 0pt 10pt 2pt rgba(0, 0, 0, 0.1); }
 header ol, header ul { padding-left: 0pt; }
 header li::marker { display: none; }
@@ -163,7 +158,7 @@ header a, header a:link, header a:visited,
 .moin-form button, .moin-button, .moin-form input[type="submit"] { display: flex;
     align-items: center; justify-content: center; }
 
-.moin-edit-content { font-family: "JetBrains Mono", monospace; font-variant-ligatures: none;
+.moin-edit-content { font-family: monospace; font-variant-ligatures: none;
     margin-top: 6pt; }
 
 #moin-modify input[type="file"] { color: #383838; font-size: 0.9rem; cursor: pointer; }
@@ -226,7 +221,7 @@ div.warning > ul, div.warning > p { padding-left: 30pt; }
     min-width: 40pt; }
 .moin-tags a:link:hover, .moin-tags a:visited:hover { color: white; background-color: var(--accent-hover) }
 
-#moin-global-history tr td { border: none; }
+.moin-history-end-of-day { border-top: none; }
 .moin-history-day-banner { background-color: var(--accent-lighter); }
 
 #moin-content table > thead { background-color: var(--accent-lighter); }
@@ -274,22 +269,28 @@ tr > th { background-color: var(--accent-lighter); }
 
 @media (max-width: 700pt) {
     #moin-main-wrapper { flex-direction: column; }
-    header { min-height: unset; margin-right: 0pt; }
+    header { min-height: unset; margin-right: 0pt; width: 100%; }
     header a { white-space: initial; }
+    h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
+    #moin-header-top { display: flex; justify-content: space-between; margin-bottom: 10pt; }
+    #moin-logo-sitename { display: flex; gap: 3pt; }
+    #moin-logo, #moin-logo * { max-width: 26pt; height: auto; }
     .moin-sitename { font-size: 1.2rem; }
-    #moin-content { padding: 0pt 8pt; }
+    #toggle-header { display: revert; }
+    #moin-content { padding: 0pt 8pt; margin-top: 10pt; }
+    #moin-username, #moin-searchform, #moin-navibar, .moin-breadcrumb { display: none; background-color: #eeeefe; }
+    #moin-searchform input { background-color: transparent; }
+    #moin-username, #moin-navibar, #moin-searchform { margin: 0; padding: 4pt 2pt; }
+    #moin-searchform { width: 100%; }
+    .moin-breadcrumb { margin: 0; padding: 14pt 4pt; }
 
     #moin-username, #moin-navibar { flex-direction: row; flex-wrap: wrap; }
     #moin-username a, #moin-navibar a { display: flex; column-gap: 6pt; white-space: nowrap; }
     #moin-username a span{ white-space: pre; }
 
     #moin-content-data { margin-right: 0pt; }
 
-    #top-bar { height: fit-content; }
-    #top-bar .moin-itemviews.panel.mobile { display: flex; }
-    #top-bar .moin-itemviews.panel.desktop { display: none; }
-    #top-bar .fa { display: none; }
-    #top-bar, #top-bar-menu-content { position: relative; }
+    #top-bar { position: sticky; height: fit-content; padding: 0 8pt; }
     #usersettings_ui, #moin-usersettings form { width: unset; }
     #moin-usersettings dl { column-gap: 10pt; row-gap: 6pt; max-width: 100vw; }
     #moin-usersettings dt { max-width: 44vw; }

src/moin/themes/focus/static/js/main.js

@@ -47,15 +47,37 @@ window.onload = function () {
 
     // Close menu in top bar when user clicks on something else
     const topbarMenu = document.getElementById('top-bar-menu')
-
-    topbarMenu.addEventListener('click', (event) => {
-        event.stopPropagation()
-    })
+    if (topbarMenu) {
+        topbarMenu.addEventListener('click', (event) => {
+            event.stopPropagation()
+        })
+    }
 
     document.body.addEventListener('click', () => {
         const topbarMenuSwitch = document.getElementById('top-bar-menu-switch')
-        if (topbarMenuSwitch.checked) {
-            topbarMenuSwitch.click()
+        if (topbarMenuSwitch?.checked) {
+            topbarMenuSwitch?.click()
         }
     })
+
+    const toggleVisibility = (element, visibleClass) => {
+        if (element) {
+            if (element.style.display === "none" || element.style.display === "") {
+                element.style.display = visibleClass ?? "block";
+            } else {
+                element.style.display = "none";
+            }
+        }
+    }
+
+    document.querySelector("#toggle-header")?.addEventListener("click", () => {
+        const userName = document.querySelector("#moin-username")
+        const search = document.querySelector("#moin-searchform")
+        const navibar = document.querySelector("#moin-navibar")
+        const breadcrumb = document.querySelector(".moin-breadcrumb")
+        toggleVisibility(userName, "flex")
+        toggleVisibility(search, "flex")
+        toggleVisibility(navibar, "flex")
+        toggleVisibility(breadcrumb)
+    })
 }