Mirrors/regenbogenkarte
2
0
Fork 0
mirror of https://github.com/Queer-Lexikon/regenbogenkarte synced 2024-11-23 20:53:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

WIP: Kompletten Bildschirm für Karte nutzen

Browse source
This commit is contained in:
CherryKitten 2022-10-25 13:36:49 +02:00 committed by Jasmin
parent 78fea7c6bd
commit 6a378a5cb9
4 changed files with 23 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -10,7 +10,16 @@
</head> </head>
<body class="bg-ql-pink"> <body class="bg-ql-pink">
<!-- MOBILE HEADER START --> <!-- MOBILE HEADER START -->
<header class="lg:hidden border-b border-b-ql-purple"> <button
title="Menü anzeigen"
id="header-button"
class="md:hidden z-headerButton fixed top-10 right-14 bg-ql-purple w-10 h-10 rounded-full drop-shadow-lg flex justify-center items-center text-white text-sm hover:drop-shadow-2xl"
>
<span class="sr-only">PLATZHALTER TEXT</span> <!-- TODO: Platzhalter durch sinnvolen Text ersetzen-->
FOO
</button>
<header id="mobile-header" class="max-md:hidden lg:hidden border-b border-b-ql-purple">
<section class="p-4 pt-6 text-neutral-700 flex flex-row"> <section class="p-4 pt-6 text-neutral-700 flex flex-row">
<div class="flex-grow"> <div class="flex-grow">
<h1 class="font-semibold text-lg mb-1">tra-la-card</h1> <h1 class="font-semibold text-lg mb-1">tra-la-card</h1>

3
main.ts
View file

@ -4,7 +4,7 @@ import { setupHamburger } from "./ts/hamburger";
import { initializeMap } from "./ts/map"; import { initializeMap } from "./ts/map";
import "@fontsource/ubuntu/latin.css"; import "@fontsource/ubuntu/latin.css";
import { setupLegend } from "./ts/legend"; import { setupLegend } from "./ts/legend";
import { setupEmergencyButton, setupResetButton } from "./ts/buttons"; import { setupEmergencyButton, setupResetButton, setupHeaderButton } from "./ts/buttons";
import { addGoatCounter } from "./ts/goatcounter"; import { addGoatCounter } from "./ts/goatcounter";
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
@ -14,6 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
setupLegend(); setupLegend();
setupEmergencyButton(); setupEmergencyButton();
setupResetButton(); setupResetButton();
setupHeaderButton();
if (import.meta.env.VITE_QUEER_LEXIKON_PRIVATE === "true") { if (import.meta.env.VITE_QUEER_LEXIKON_PRIVATE === "true") {
addGoatCounter(); addGoatCounter();

1
tailwind.config.js
View file

@ -20,6 +20,7 @@ module.exports = {
}, },
zIndex: { zIndex: {
emergencyButton: 1000, emergencyButton: 1000,
headerButton: 1000,
menu: 1001, menu: 1001,
}, },
}, },

8
ts/buttons.ts
View file

@ -16,3 +16,11 @@ export const setupResetButton = () => {
window.location.reload(); window.location.reload();
}); });
}; };
export const setupHeaderButton = () => {
const btn = <HTMLButtonElement>document.getElementById("header-button");
const header = <HTMLElement>document.getElementById("mobile-header");
btn?.addEventListener("click", () => {
header.classList.toggle("max-md:hidden");
});
};