Diffstat (limited to 'views')
| -rw-r--r-- | views/layouts/general-page.html | 47 | ||||
| -rw-r--r-- | views/pages/global-map.html | 29 | ||||
| -rw-r--r-- | views/pages/home-page.html | 3 | ||||
| -rw-r--r-- | views/pages/language-pick.html | 16 |
4 files changed, 24 insertions, 71 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html index 49c0fae..f4fd9be 100644 --- a/views/layouts/general-page.html +++ b/views/layouts/general-page.html @@ -17,11 +17,14 @@ <script> function changeUrl(path, toAppend = false) { - const urlParams = new URLSearchParams(window.location.search); + const urlParams = new URLSearchParams(window.location.search); const newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname; const newPath = toAppend ? `${newPathname}${path}` : `${path}`; - + history.pushState({}, '', `${newPath}${urlParams.entries.length == 0 ? '' : '?' + urlParams.toString()}`); + if (location.pathname == "" || location.pathname == "/") { + return true; + } window.dispatchEvent(new Event('popstate')); return false; }; @@ -171,17 +174,17 @@ <div id="sidebar" class="bg-sidebar flex sticky flex-col z-20 w-[100dvw] xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] [@media(max-height:32rem)]:w-[5rem] h-[5rem] [@media(max-height:32rem)]:h-[100dvh] mx-auto [@media(max-height:32rem)]:mx-0 shadow-[0_0_1rem_black]"> <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-row [@media(max-height:32rem)]:flex-col gap-0 relative z-20"> - <a href="/{{ .Lang }}" id="sidebar-home-button" class="w-[5rem] h-[5rem]"> + <a href="/{{ .Lang }}" class="w-[5rem] h-[5rem]"> <i onclick="return changeUrl('/{{ .Lang }}');" class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> </a> - <a href="/{{ .Lang }}/blog" id="sidebar-blog-button" class="w-[5rem] h-[5rem]"> + <a href="/{{ .Lang }}/blog" class="w-[5rem] h-[5rem]"> <i onclick="return changeUrl('/{{ .Lang }}/blog');" class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> </a> - <a href="/{{ .Lang }}/map" id="sidebar-map-button" class="w-[5rem] h-[5rem]"> + <a href="/{{ .Lang }}/map" class="w-[5rem] h-[5rem]"> <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> </a> - <i onclick="toggleThemeWheel();" id="sidebar-theme-button" class="fas fa-swatchbook flex w-[5rem] h-[5rem] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> - <a href="./" id="sidebar-back-button" class="w-[5rem] h-[5rem]"> + <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] h-[5rem] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> + <a href="./" class="w-[5rem] h-[5rem]"> <i onclick="return changeUrl('/../', true);" class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> </a> </div> @@ -192,34 +195,6 @@ <div class="theme-icon" data-theme="ram"></div> <div class="theme-pin"></div> </div> - <script> - sidebarHomeButton = document.getElementById("sidebar-home-button"); - sidebarMapButton = document.getElementById("sidebar-map-button"); - sidebarBlogButton = document.getElementById("sidebar-blog-button"); - sidebarBackButton = document.getElementById("sidebar-back-button"); - - function updateSidebar() { - if (location.pathname == "" || location.pathname == "/") { - sidebarHomeButton.classList.add('hidden'); - sidebarMapButton.classList.add('hidden'); - sidebarBlogButton.classList.add('hidden'); - sidebarBackButton.classList.add('hidden'); - } else { - sidebarHomeButton.classList.remove('hidden'); - sidebarMapButton.classList.remove('hidden'); - sidebarBlogButton.classList.remove('hidden'); - sidebarBackButton.classList.remove('hidden'); - lang = location.pathname.split("/")[1]; - sidebarHomeButton.setAttribute('href', `/${lang}`); - sidebarHomeButton.firstElementChild.setAttribute('onclick', `return changeUrl('/${lang}', false);`); - sidebarMapButton.setAttribute('href', `/${lang}/map`); - sidebarBlogButton.setAttribute('href', `/${lang}/blog`); - sidebarBlogButton.firstElementChild.setAttribute('onclick', `return changeUrl('/${lang}/blog', false);`); - } - } - window.addEventListener("popstate", updateSidebar); - window.addEventListener("load", updateSidebar, {once: true}); - </script> </div> <div class="bg-background-dark @container/main flex z-10 w-[100dvw] xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] grow-0 h-[calc(100dvh-5rem)] [@media(max-height:32rem)]:h-[100dvh] mx-auto [@media(max-height:32rem)]:mx-0 @@ -262,7 +237,7 @@ <script> const themeWheel = document.getElementById('theme-wheel'); - const themeButton = document.getElementById('sidebar-theme-button'); + const themeButton = document.getElementById('theme-button'); const themeIcons = document.querySelectorAll('.theme-icon'); const themeWheelRadius = convertRemToPixels(6); diff --git a/views/pages/global-map.html b/views/pages/global-map.html index cd3c2d5..4b17d16 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -12,7 +12,7 @@ <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"> </head> -<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-[100dvh]"> +<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-[100dvh] flex flex-row ar-lt-0.8:flex-col"> <script> function switchTheme(theme) { @@ -41,21 +41,21 @@ } </script> - <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-[5rem] h-auto"> - <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col gap-0 relative z-1001"> - <a href="/{{ .Lang }}" class="w-[5rem] h-[5rem]"> + <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5rem] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[8dvh]"> + <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-andika font-extrabold text-center relative z-20"> + saya.today + </div> + <div class="text-[3rem] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20"> + <a href="/{{ .Lang }}" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> </a> - <a href="/{{ .Lang }}/blog" class="w-[5rem] h-[5rem]"> + <a href="/{{ .Lang }}/blog" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> </a> - <a href="/{{ .Lang }}/map" class="w-[5rem] h-[5rem]"> + <a href="/{{ .Lang }}/map" class="w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh]"> <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> </a> - <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] h-[5rem] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> - <a href="./" class="w-[5rem] h-[5rem]"> - <i class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> - </a> + <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] ar-lt-0.8:w-[8dvh] h-[5rem] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> </div> <div class="theme-wheel" id="theme-wheel"> <div class="theme-icon" data-theme="olive"></div> @@ -66,7 +66,7 @@ </div> </div> - <div id="map-container" class="bg-background-dark flex z-10 w-full h-full"></div> + <div id="map-container" class="bg-background-dark flex z-10 w-[calc(100dvw-5rem)] ar-lt-0.8:w-[100dvw] h-[100dvh] ar-lt-0.8:h-[92dvh]"></div> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script> <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script> @@ -225,12 +225,7 @@ L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, - attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', - zoomControl: false - }).addTo(map); - - L.control.zoom({ - position: 'topright' + attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); map.addLayer(markers); diff --git a/views/pages/home-page.html b/views/pages/home-page.html index 11d0f7b..33c776c 100644 --- a/views/pages/home-page.html +++ b/views/pages/home-page.html @@ -29,7 +29,6 @@ <p class="text-xl sm:text-2xl lg:text-3xl p-1 w-full font-andika italic text-left border-l-1.5 border-solid border-(--background-dark-color) bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Contacts }}</p> - <hr class="w-full border-t-2 border-dotted border-main-hard mb-1"> <a href="https://t.me/EarlInisMona"> <i class="fa-brands fa-telegram w-4 h-4 mr-1"></i> <span class="font-bold">Telegram:</span> @@ -106,7 +105,7 @@ bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.SidebarDescription }}</p> <hr class="w-full border-t-2 border-dotted border-main-hard mb-1"> <div class="w-full grid grid-cols-[1fr_4fr] content-center items-center - [&>*:nth-child(4n+2)]:bg-(--background-medium-color)/50 [&>*:nth-child(4n+3)]:bg-(--background-medium-color)/50" style="container-type: inline-size;"> + [&>*:nth-child(4n+2)]:bg-(--background-medium-color) [&>*:nth-child(4n+3)]:bg-(--background-medium-color)" style="container-type: inline-size;"> <i class="fas fa-home w-full h-full text-[10cqi] content-center text-center text-main-hard"></i> <p class="p-1">{{ .L.HomePage.HomePageDescription }}</p> <i class="fas fa-search w-full h-full text-[10cqi] content-center text-center text-main-hard"></i> diff --git a/views/pages/language-pick.html b/views/pages/language-pick.html deleted file mode 100644 index 5a9d229..0000000 --- a/views/pages/language-pick.html +++ /dev/null @@ -1,16 +0,0 @@ -{{ define "body" }} -<div class="flex flex-col justify-center text-3xl h-[100%]"> - {{- range .AvailableLanguages }} - <hr class="border-t-2 border-dotted border-main-hard"> - <div class="nth-[2n+1_of_div]:bg-(--background-medium-color)/50 nth-[2n_of_div]:bg-(--background-light-color)/50 p-2.5 flex flex-row justify-center justify-items-center"> - <a href="/{{ .Name }}" class="w-12 h-12 basis-12 shrink-0 mr-4"> - <img onclick="return changeUrl('{{ .Name }}');" class="w-full h-full aspect-square cursor-pointer object-cover rounded-md select-none" src="{{ .Flag }}"> - </a> - <a href="/{{ .Name }}" onclick="return changeUrl('{{ .Name }}');" class="cursor-pointer"> - {{ .Alt }} - </a> - </div> - {{- end }} - <hr class="border-t-2 border-dotted border-main-hard"> -</div> -{{ end }} |