mirror of
https://github.com/Queer-Lexikon/regenbogenkarte
synced 2024-11-23 20:53:10 +00:00
WIP: Kompletten Bildschirm für Karte nutzen
This commit is contained in:
parent
78fea7c6bd
commit
6a378a5cb9
4 changed files with 23 additions and 4 deletions
11
index.html
11
index.html
|
@ -10,7 +10,16 @@
|
|||
</head>
|
||||
<body class="bg-ql-pink">
|
||||
<!-- 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">
|
||||
<div class="flex-grow">
|
||||
<h1 class="font-semibold text-lg mb-1">tra-la-card</h1>
|
||||
|
|
3
main.ts
3
main.ts
|
@ -4,7 +4,7 @@ import { setupHamburger } from "./ts/hamburger";
|
|||
import { initializeMap } from "./ts/map";
|
||||
import "@fontsource/ubuntu/latin.css";
|
||||
import { setupLegend } from "./ts/legend";
|
||||
import { setupEmergencyButton, setupResetButton } from "./ts/buttons";
|
||||
import { setupEmergencyButton, setupResetButton, setupHeaderButton } from "./ts/buttons";
|
||||
import { addGoatCounter } from "./ts/goatcounter";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
@ -14,6 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
setupLegend();
|
||||
setupEmergencyButton();
|
||||
setupResetButton();
|
||||
setupHeaderButton();
|
||||
|
||||
if (import.meta.env.VITE_QUEER_LEXIKON_PRIVATE === "true") {
|
||||
addGoatCounter();
|
||||
|
|
|
@ -20,6 +20,7 @@ module.exports = {
|
|||
},
|
||||
zIndex: {
|
||||
emergencyButton: 1000,
|
||||
headerButton: 1000,
|
||||
menu: 1001,
|
||||
},
|
||||
},
|
||||
|
|
|
@ -16,3 +16,11 @@ export const setupResetButton = () => {
|
|||
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");
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue