summaryrefslogtreecommitdiff
path: root/views/layouts
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'views/layouts')
-rw-r--r--views/layouts/general-page.html60
1 files changed, 25 insertions, 35 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index b435402..98cbfcf 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -24,18 +24,6 @@
/>
<link
rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/fontawesome.min.css"
- />
- <link
- rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/brands.min.css"
- />
- <link
- rel="stylesheet"
- href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/solid.min.css"
- />
- <link
- rel="stylesheet"
href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
/>
<link
@@ -346,9 +334,7 @@
class="flex flex-row w-full h-24 md:flex-col md:w-24 md:h-full bg-paper bg-background shadow-elevation-6 z-2 shrink-0"
>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/..', true);"
href="../"
id="sidebar-back-button"
@@ -357,9 +343,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-back"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/{{ .Lang }}');"
href="/{{ .Lang }}"
id="sidebar-home-button"
@@ -368,9 +352,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-logo"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/{{ .Lang }}/blog');"
href="/{{ .Lang }}/blog"
id="sidebar-blog-button"
@@ -379,9 +361,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-newspaper"/></svg>
</a>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
href="/{{ .Lang }}/map"
id="sidebar-map-button"
draggable="false"
@@ -389,9 +369,7 @@
<svg viewBox="0 0 24 24"><use href="#icon-map"/></svg>
</a>
<div
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="toggleThemeWheel()"
id="sidebar-theme-button"
draggable="false"
@@ -399,9 +377,7 @@
<svg class="sidebar-theme-button-content" viewBox="0 0 24 24"><use href="#icon-palette"/></svg>
</div>
<a
- class="w-18 h-18 bg-conic-225 rounded-xl m-3
- from-accent-light/10 via-transparent to-accent-light/10 transition-colors duration-1500 ease-in-out
- hover:cursor-pointer hover:from-accent-light/50 hover:via-transparent hover:to-accent-light/50"
+ class="w-18 h-18 rounded-xl m-3 accent-button"
onclick="return changeUrl('/{{ .Lang }}/user');"
href="/{{ .Lang }}/user"
id="sidebar-user-button"
@@ -434,6 +410,11 @@
);
function updateSidebar() {
+ sidebarHomeButton.classList.remove("active");
+ sidebarMapButton.classList.remove("active");
+ sidebarBlogButton.classList.remove("active");
+ sidebarBackButton.classList.remove("active");
+ sidebarUserButton.classList.remove("active");
if (
location.pathname == "" ||
location.pathname == "/"
@@ -455,6 +436,9 @@
"onclick",
`return changeUrl('/${lang}', false);`,
);
+ if (location.pathname == `/${lang}`) {
+ sidebarHomeButton.classList.add("active");
+ }
sidebarMapButton.setAttribute(
"href",
`/${lang}/map`,
@@ -467,6 +451,9 @@
"onclick",
`return changeUrl('/${lang}/blog', false);`,
);
+ if (location.pathname.startsWith(`/${lang}/blog`)) {
+ sidebarBlogButton.classList.add("active");
+ }
sidebarUserButton.setAttribute(
"href",
`/${lang}/user`,
@@ -475,6 +462,9 @@
"onclick",
`return changeUrl('/${lang}/user', false);`,
);
+ if (location.pathname.startsWith(`/${lang}/user`)) {
+ sidebarUserButton.classList.add("active");
+ }
}
}
window.addEventListener("popstate", updateSidebar);
@@ -485,14 +475,14 @@
</nav>
<div
- class="flex flex-1 z-1 bg-paper bg-background shadow-elevation-3 @container/body"
+ class="flex flex-1 min-h-0 z-1 bg-paper bg-background shadow-elevation-3 @container/body"
>
<div
class="bg-paper bg-background-dark border-r-2 border-dashed border-main-hard"
></div>
<div
- class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative pt-4 pr-0 md:pr-4"
+ class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative md:pt-4 md:pr-4"
>
<header
id="general-page-header"
@@ -516,7 +506,7 @@
<main
id="general-page-body"
- class="relative flex flex-col grow overflow-y-auto"
+ class="relative flex-1 overflow-y-auto"
hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
hx-trigger="load"
hx-target="this"
@@ -622,7 +612,6 @@
const themeWheel = document.getElementById("theme-wheel");
const themeButton = document.getElementById("sidebar-theme-button");
const themeIcons = document.querySelectorAll(".theme-icon");
- const themeWheelRadius = convertRemToPixels(6);
themeIcons.forEach((icon) => {
if (icon.getAttribute("data-theme") == savedTheme) {
@@ -651,7 +640,7 @@
const clipPath = createSliceClipPath(
startAngle,
endAngle,
- themeWheelRadius,
+ convertRemToPixels(6),
);
icon.style.clipPath = clipPath;
});
@@ -686,6 +675,7 @@
const buttonRect = themeButton.getBoundingClientRect();
const buttonCenterX = buttonRect.left + buttonRect.width / 2;
const buttonCenterY = buttonRect.top + buttonRect.height / 2;
+ const themeWheelRadius = convertRemToPixels(6);
const margin = 0;
generated by cgitext v1.3.1+17 (git 2.54.0) at 2026-09-21 09:52:31 +0000