Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: Kompletten Bildschirm für Karte nutzen #38

Merged
merged 10 commits into from
Oct 26, 2022
Merged

WIP: Kompletten Bildschirm für Karte nutzen #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f7effc4
WIP: Kompletten Bildschirm für Karte nutzen
CherryKitten Oct 25, 2022
a9a70c6
Add text for header button
CherryKitten Oct 26, 2022
894cfc0
Adjust header button position to prevent overlap with text on some ol…
CherryKitten Oct 26, 2022
744de59
Change labels of info menu to distuingish from header menu
CherryKitten Oct 26, 2022
4134c0e
Run prettier format
CherryKitten Oct 26, 2022
30c239e
refactor: rename existing hamburger file
nachtjasmin Oct 26, 2022
d4c455e
feat: add second button which is better aligned
nachtjasmin Oct 26, 2022
0dd9e33
feat: use hamburger icon for both buttons
nachtjasmin Oct 26, 2022
4cc9f80
fixup! feat: add second button which is better aligned
nachtjasmin Oct 26, 2022
88f90f0
test: add hamburger button tests
nachtjasmin Oct 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
61 changes: 50 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,29 @@
</head>
<body class="bg-ql-pink">
<!-- MOBILE HEADER START -->
<header class="lg:hidden border-b border-b-ql-purple">
<button
title="Menü anzeigen/ausblenden"
id="hamburger-button"
class="md:hidden js-header-button z-headerButton fixed top-7 right-4 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">Menü anzeigen/ausblenden</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</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>
Expand All @@ -23,21 +45,38 @@ <h1 class="font-semibold text-lg mb-1">tra-la-card</h1>
aria-expanded="false"
aria-controls="menu"
>
<span class="sr-only">Menü öffnen</span>
<!-- Heroicon: menu -->
<span class="sr-only">Info öffnen</span>
<svg
class="w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
/>
</svg>
</button>

<button title="Menü anzeigen/ausblenden" class="js-header-button md:hidden">
<span class="sr-only">Menü anzeigen/ausblenden</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
></path>
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
/>
</svg>
</button>
</section>
Expand Down Expand Up @@ -82,7 +121,7 @@ <h2 id="search-for-city-header-mobile" class="sr-only">
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"
Expand Down Expand Up @@ -167,7 +206,7 @@ <h2 class="sr-only" id="search-own-city-desktop">Suche deine Stadt oder Postleit
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"
Expand Down Expand Up @@ -227,7 +266,7 @@ <h2 id="legend-header" class="font-semibold text-center mb-4 mr-8">Legende:</h2>
id="close-menu-btn"
class="mr-2 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
>
<span class="sr-only">Menü schließen</span>
<span class="sr-only">Info schließen</span>
<!-- Heroicon name: outline/x -->
<svg
class="h-6 w-6 text-white"
Expand Down
7 changes: 4 additions & 3 deletions main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
import "./main.css";
import { initializeForms } from "./ts/form";
import { setupHamburger } from "./ts/hamburger";
import { setupInfoButton } from "./ts/info-menu";
import { initializeMap } from "./ts/map";
import "@fontsource/ubuntu/latin.css";
import { setupLegend } from "./ts/legend";
import { setupEmergencyButton, setupResetButton } from "./ts/buttons";
import { setupEmergencyButton, setupResetButton, setupHamburgerButton } from "./ts/buttons";
import { addGoatCounter } from "./ts/goatcounter";

document.addEventListener("DOMContentLoaded", () => {
initializeMap();
initializeForms();
setupHamburger();
setupInfoButton();
setupLegend();
setupEmergencyButton();
setupResetButton();
setupHamburgerButton();

if (import.meta.env.VITE_QUEER_LEXIKON_PRIVATE === "true") {
addGoatCounter();
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ module.exports = {
},
zIndex: {
emergencyButton: 1000,
headerButton: 1000,
menu: 1001,
},
},
Expand Down
32 changes: 32 additions & 0 deletions tests/start.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,35 @@ test.describe("exit button", () => {
await expect(page.context().pages()).toHaveLength(2);
});
});
test.describe("hamburger button", () => {
// Use a Pixel 5 as a reference mobile device.
test.use({
viewport: { width: 393, height: 851 },
deviceScaleFactor: 2,
hasTouch: true,
});

const buttonLocator = ".js-header-button:visible";

test.beforeEach(async ({ page, baseURL }) => {
test.fail(baseURL === undefined, "baseURL should be set");
await page.goto(baseURL!);
});

test("should be visible", async ({ page }) => {
await expect(page.locator(buttonLocator)).toBeVisible();
});
test("click reveals and unreveals menu", async ({ page }) => {
page.locator(buttonLocator).click();
await expect(page.locator("#mobile-header")).toBeVisible();

page.locator(buttonLocator).click();
await expect(page.locator("#mobile-header")).toBeHidden();
});
test("info menu button is not affected", async ({ page }) => {
const headerBtn = page.locator(buttonLocator);
headerBtn.click();
await page.locator("#open-menu-btn").tap();
await expect(page.locator("#menu >> .z-menu")).toBeVisible();
});
});
14 changes: 14 additions & 0 deletions ts/buttons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,17 @@ export const setupResetButton = () => {
window.location.reload();
});
};

export const setupHamburgerButton = () => {
let isOpen = false;
const header = <HTMLElement>document.getElementById("mobile-header");
const hamburger = <HTMLButtonElement>document.getElementById("hamburger-button")!;

document.querySelectorAll<HTMLButtonElement>(".js-header-button").forEach((btn) =>
btn.addEventListener("click", () => {
header.classList.toggle("max-md:hidden", isOpen);
hamburger.classList.toggle("hidden", !isOpen);
isOpen = !isOpen;
}),
);
};
2 changes: 1 addition & 1 deletion ts/hamburger.ts → ts/info-menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const openClass = "open";

export const setupHamburger = () => {
export const setupInfoButton = () => {
const menu = document.getElementById("menu")!;
const openBtn = document.getElementById("open-menu-btn")!;
const closeBtn = document.getElementById("close-menu-btn")!;
Expand Down