summaryrefslogtreecommitdiff
path: root/views/layouts/general-page.html
diff refs
from: back
to: back
| flip
diff options
context:
space:
mode:
Diffstat (limited to 'views/layouts/general-page.html')
-rw-r--r--views/layouts/general-page.html60
1 files changed, 35 insertions, 25 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 98cbfcf..b435402 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -24,6 +24,18 @@
/>
<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
@@ -334,7 +346,9 @@
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 rounded-xl m-3 accent-button"
+ 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"
onclick="return changeUrl('/..', true);"
href="../"
id="sidebar-back-button"
@@ -343,7 +357,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-back"/></svg>
</a>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ 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"
onclick="return changeUrl('/{{ .Lang }}');"
href="/{{ .Lang }}"
id="sidebar-home-button"
@@ -352,7 +368,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-logo"/></svg>
</a>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ 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"
onclick="return changeUrl('/{{ .Lang }}/blog');"
href="/{{ .Lang }}/blog"
id="sidebar-blog-button"
@@ -361,7 +379,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-newspaper"/></svg>
</a>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ 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"
href="/{{ .Lang }}/map"
id="sidebar-map-button"
draggable="false"
@@ -369,7 +389,9 @@
<svg viewBox="0 0 24 24"><use href="#icon-map"/></svg>
</a>
<div
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ 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"
onclick="toggleThemeWheel()"
id="sidebar-theme-button"
draggable="false"
@@ -377,7 +399,9 @@
<svg class="sidebar-theme-button-content" viewBox="0 0 24 24"><use href="#icon-palette"/></svg>
</div>
<a
- class="w-18 h-18 rounded-xl m-3 accent-button"
+ 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"
onclick="return changeUrl('/{{ .Lang }}/user');"
href="/{{ .Lang }}/user"
id="sidebar-user-button"
@@ -410,11 +434,6 @@
);
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 == "/"
@@ -436,9 +455,6 @@
"onclick",
`return changeUrl('/${lang}', false);`,
);
- if (location.pathname == `/${lang}`) {
- sidebarHomeButton.classList.add("active");
- }
sidebarMapButton.setAttribute(
"href",
`/${lang}/map`,
@@ -451,9 +467,6 @@
"onclick",
`return changeUrl('/${lang}/blog', false);`,
);
- if (location.pathname.startsWith(`/${lang}/blog`)) {
- sidebarBlogButton.classList.add("active");
- }
sidebarUserButton.setAttribute(
"href",
`/${lang}/user`,
@@ -462,9 +475,6 @@
"onclick",
`return changeUrl('/${lang}/user', false);`,
);
- if (location.pathname.startsWith(`/${lang}/user`)) {
- sidebarUserButton.classList.add("active");
- }
}
}
window.addEventListener("popstate", updateSidebar);
@@ -475,14 +485,14 @@
</nav>
<div
- class="flex flex-1 min-h-0 z-1 bg-paper bg-background shadow-elevation-3 @container/body"
+ class="flex flex-1 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 md:pt-4 md:pr-4"
+ class="max-h-full max-w-full flex flex-col grow bg-paper bg-background-dark relative pt-4 pr-0 md:pr-4"
>
<header
id="general-page-header"
@@ -506,7 +516,7 @@
<main
id="general-page-body"
- class="relative flex-1 overflow-y-auto"
+ class="relative flex flex-col grow overflow-y-auto"
hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}"
hx-trigger="load"
hx-target="this"
@@ -612,6 +622,7 @@
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) {
@@ -640,7 +651,7 @@
const clipPath = createSliceClipPath(
startAngle,
endAngle,
- convertRemToPixels(6),
+ themeWheelRadius,
);
icon.style.clipPath = clipPath;
});
@@ -675,7 +686,6 @@
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-10-27 19:38:30 +0000