From f9472dc426cad3870007550a0e86744ef1aace53 Mon Sep 17 00:00:00 2001 From: Mikkel Date: Thu, 9 Feb 2023 14:54:42 +0100 Subject: [PATCH] dropdown buttons changing page --- frontend/index.html | 7 +++---- frontend/reviews.html | 33 --------------------------------- frontend/src/main.ts | 42 ++++++++++++++++++++++++++++++++++++++++++ frontend/src/review.ts | 11 +++++++++-- frontend/style.css | 8 +++++--- 5 files changed, 59 insertions(+), 42 deletions(-) delete mode 100644 frontend/reviews.html diff --git a/frontend/index.html b/frontend/index.html index 5c2b694..7ad0cc3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -18,11 +18,11 @@
-
+
diff --git a/frontend/reviews.html b/frontend/reviews.html deleted file mode 100644 index 4d527ce..0000000 --- a/frontend/reviews.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - - - - Postnummer App - - - - - - - -
-

Postnummer App

-
- - -
-

Anmeldelser

-
- - - \ No newline at end of file diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 7e61020..bbcd96e 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -188,6 +188,47 @@ function setupSearchBar(zipCodeElement: HTMLParagraphElement) { }); } +function pageRedirects() { + const reviewRedirect = document.getElementById("reviews-redirect")! + const mapRedirect = document.getElementById("map-redirect")! + const mainElement = document.getElementById("main")! + + + reviewRedirect.addEventListener("click", () => { + mainElement.innerHTML = `

Anmeldelser

+
` + const dropdown = document.getElementById("dropdown")!; + dropdown.classList.remove("enabled"); + + }); + + mapRedirect.addEventListener("click", () => { + mainElement.innerHTML = + ` + + + + +
+
+
+

Postnummer ikke fundet

+

+

+
` + const [mousePositionElement, coordsElement, zipCodeElement] = [ + "#mouse-position", + "#coords", + "#zip-code", + ].map((id) => document.querySelector(id)!); + setupSearchBar(zipCodeElement); + setupMap(mousePositionElement, coordsElement, zipCodeElement); + const dropdown = document.getElementById("dropdown")!; + dropdown.classList.remove("enabled"); + + }) +} + function main() { if (navigator.userAgent.match("Chrome")) { location.href = "https://mozilla.org/firefox"; @@ -203,6 +244,7 @@ function main() { setupMap(mousePositionElement, coordsElement, zipCodeElement); setTopbarOffset(); addToggleDropdownListener(); + pageRedirects(); } main(); diff --git a/frontend/src/review.ts b/frontend/src/review.ts index 3a23393..eb36788 100644 --- a/frontend/src/review.ts +++ b/frontend/src/review.ts @@ -1,6 +1,14 @@ const reviewContainer = document.getElementById("reviews-container")! +const reviewRedirect = document.getElementById("review-redirect")! +const main = document.getElementById("main")! -function addReview(location: string, title: string, content: string, stars: number, ) { +reviewRedirect.addEventListener("click", () => { + main.innerHTML = `

Anmeldelser

+
` + +}); + +export function addReview(location: string, title: string, content: string, stars: number) { const id = Math.random() * 1000000 reviewContainer.innerHTML += `
@@ -11,4 +19,3 @@ function addReview(location: string, title: string, content: string, stars: numb
` } -addReview("Odense", "meget fint pitstop af motorvejen", "en lille sidevej fra motorvejen hvor det bliver serveret god brunsviger, meget fint sted :)", 5) diff --git a/frontend/style.css b/frontend/style.css index 279e43b..03573b3 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -89,20 +89,22 @@ body { transform: scaleY(1); } -#dropdown a { +#dropdown button { + border: none; background-color: var(--brand); color: var(--light); padding: 1rem 1rem; font-weight: bold; text-decoration: none; outline: none; + cursor: pointer; } -#dropdown a:hover, #dropdown a:focus { +#dropdown button:hover, #dropdown button:focus { background-color: var(--brand-300); } -#dropdown a:last-child { +#dropdown button:last-child { border-radius: 0 0 0 5px; }