Mirrors/regenbogenkarte
2
0
Fork 0
mirror of https://github.com/Queer-Lexikon/regenbogenkarte synced 2024-11-10 06:34:21 +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

15
index.html
View file

@ -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>
@ -82,7 +91,7 @@
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
/>
</svg>
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
</button>
<button
type="submit"
@ -167,7 +176,7 @@
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
/>
</svg>
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
</button>
<button
type="submit"

3
main.ts
View file

@ -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();

1
tailwind.config.js
View file

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

8
ts/buttons.ts
View file

@ -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");
});
};