restore modal animation on desktop

This commit is contained in:
marlon-erler
2026-04-01 08:46:10 +00:00
parent fd8aafed6d
commit 551d2c3aba
7 changed files with 9267 additions and 7190 deletions
+636 -564
View File
File diff suppressed because it is too large Load Diff
+28 -28
View File
@@ -1,35 +1,35 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>Comms</title>
<head>
<title>Comms</title>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"
/>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no"
/>
<meta
name="theme-color"
content="hsla(0, 0%, 100%, 100%)"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="black"
media="(prefers-color-scheme: dark)"
/>
<meta
name="theme-color"
content="hsla(0, 0%, 100%, 100%)"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="black"
media="(prefers-color-scheme: dark)"
/>
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/index.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="icon" href="/icon.png" />
<script src="/support.js" defer></script>
<link rel="stylesheet" href="/styles.css" />
<link rel="stylesheet" href="/index.css" />
<link rel="manifest" href="/manifest.json" />
<link rel="icon" href="/icon.png" />
<script src="/support.js" defer></script>
<script src="/index.js" defer></script>
</head>
<script src="/index.js" defer></script>
</head>
<body>
<main></main>
</body>
<body>
<main></main>
</body>
</html>
+8091 -6100
View File
File diff suppressed because it is too large Load Diff
+8 -8
View File
@@ -1,10 +1,10 @@
{
"name": "Comms",
"display": "fullscreen",
"icons": [
{
"src": "icon.png",
"sizes": "any"
}
]
"name": "Comms",
"display": "fullscreen",
"icons": [
{
"src": "icon.png",
"sizes": "any"
}
]
}
+462 -452
View File
File diff suppressed because it is too large Load Diff
+23 -20
View File
@@ -1,32 +1,35 @@
// TABS
document.querySelector("main").addEventListener("scroll", () => {
const links = document.querySelectorAll(".tab-link");
links.forEach((element) => element.removeAttribute("active"));
const links = document.querySelectorAll(".tab-link");
links.forEach((element) => element.removeAttribute("active"));
const pageWidth = document.querySelector("main > article").offsetWidth;
const scroll = document.querySelector("main").scrollLeft;
const currentPage = Math.round(scroll / pageWidth);
const pageWidth = document.querySelector("main > article").offsetWidth;
const scroll = document.querySelector("main").scrollLeft;
const currentPage = Math.round(scroll / pageWidth);
if (links[currentPage]) links[currentPage].setAttribute("active", "");
if (links[currentPage]) links[currentPage].setAttribute("active", "");
});
// SERVICE WORKER
async function registerServiceWorker() {
if ("serviceWorker" in navigator) {
try {
const registration = await navigator.serviceWorker.register("/sw.js", {
scope: "/",
});
if (registration.installing) {
setTimeout(() => window.location.reload(), 500);
} else if (registration.active) {
console.log("Service worker active");
registration.update();
}
} catch (error) {
console.error(`Could not install service worker: ${error}`);
if ("serviceWorker" in navigator) {
try {
const registration = await navigator.serviceWorker.register(
"/sw.js",
{
scope: "/",
},
);
if (registration.installing) {
setTimeout(() => window.location.reload(), 500);
} else if (registration.active) {
console.log("Service worker active");
registration.update();
}
} catch (error) {
console.error(`Could not install service worker: ${error}`);
}
}
}
}
registerServiceWorker();
Vendored
+19 -18
View File
@@ -1,31 +1,32 @@
const CACHE_VERSION = "v2";
self.addEventListener("fetch", (event) => {
event.respondWith(handleRequest(event));
event.respondWith(handleRequest(event));
});
async function handleRequest(event) {
const response = await getFromCache(event);
if (response) {
fetchAndCache(event); // Call this but don't await, allowing the cache to update in the background
return response;
}
return fetchAndCache(event);
const response = await getFromCache(event);
if (response) {
fetchAndCache(event); // Call this but don't await, allowing the cache to update in the background
return response;
}
return fetchAndCache(event);
}
async function getFromCache(event) {
const request = event.request;
const cache = await caches.open(CACHE_VERSION);
const response = await cache.match(request);
return response;
const request = event.request;
const cache = await caches.open(CACHE_VERSION);
const response = await cache.match(request);
return response;
}
async function fetchAndCache(event) {
const request = event.request;
const response = await fetch(request);
if (response.status === 200) { // Only cache successful responses
const cache = await caches.open(CACHE_VERSION);
cache.put(request, response.clone());
}
return response;
const request = event.request;
const response = await fetch(request);
if (response.status === 200) {
// Only cache successful responses
const cache = await caches.open(CACHE_VERSION);
cache.put(request, response.clone());
}
return response;
}