diff --git a/frontend/index.html b/frontend/index.html index 297be81..80eec51 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -15,21 +15,24 @@

Postnummer App

+
+ +
-
+
- -
- -
- -
+

Postnummer ikke fundet

+

+

diff --git a/frontend/src/main.ts b/frontend/src/main.ts index 6c692b1..ab97d06 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -1,4 +1,5 @@ import { Throttler } from "./Throttler"; +import { setTopbarOffset, addToggleDropdownListener } from "./topbar"; import { Coordinate, Position, convertPixelsToCoordinate, convertCoordinateToPixels } from "./coordinates"; import { Size } from "./size"; @@ -120,9 +121,10 @@ function setupMap( mapImg.onmouseleave = (_event: MouseEvent) => { document.getElementById("dot")!.style.display = "none"; - [mousePositionElement, coordsElement, zipCodeElement].forEach( + [mousePositionElement, coordsElement].forEach( (e) => (e.innerHTML = ""), ); + zipCodeElement.innerHTML = "Postnummer ikke fundet"; }; } @@ -167,6 +169,8 @@ function main() { setupSearchBar(zipCodeElement); setupMap(mousePositionElement, coordsElement, zipCodeElement); + setTopbarOffset(); + addToggleDropdownListener(); } main(); diff --git a/frontend/src/topbar.ts b/frontend/src/topbar.ts new file mode 100644 index 0000000..90a60f7 --- /dev/null +++ b/frontend/src/topbar.ts @@ -0,0 +1,15 @@ +// handles automatically sizing the topbar + +export function setTopbarOffset() { + const height = document.getElementById("topbar").getBoundingClientRect().height; + document.querySelector(":root").style = `--topbar-offset: ${height}px;` +} + +export function addToggleDropdownListener() { + const element = document.getElementById("dropdown-button"); + const dropdown = document.getElementById("dropdown"); + console.log("?"); + element.addEventListener("click", () => { + dropdown.classList.toggle("enabled"); + }); +} diff --git a/frontend/style.css b/frontend/style.css index f7bc917..4133592 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -8,40 +8,108 @@ src: url("assets/JetBrainsMono-Bold.woff2"); } -* { +*, *::before, *::after { box-sizing: border-box; } +:root { + --brand-200: #D55D91; + --brand-300: #D14D86; + --brand: #C33271; + --brand-700: #0D3B45; + --brand-800: #0A2E36; + --brand-900: #061D22; + --light: #FFF; + --topbar-offset: 4rem; +} + body { margin: 0; height: 100vh; font-family: "Open Sans", sans-serif; - background-color: #E1F5FE; + background-color: var(--brand-900); + color: var(--light); } #topbar { - background-color: #03A9F4; - color: white; + display: flex; + background-color: var(--brand); + color: var(--light); text-align: center; - margin: 0; - padding: 0.5rem; - box-shadow: 0px 3px 3px #01579B; + padding: 1rem 2rem; + box-shadow: 0px 5px 1px RGBA(127, 127, 127, 0.2); } -#topbar > h1 { +#topbar h1 { + align-self: center; margin: 0; - font-size: 2rem; + font-size: 1.5rem; } +#dropdown-button { + border: none; + background-color: transparent; + font-size: 2rem; + transform: scale(1.5); + color: inherit; + margin-left: auto; + padding: 0 0.5rem; + transition: transform 0.2s; + cursor: pointer; +} + +#dropdown-button:hover, #dropdown-button:focus { + transform: scale(1.7); +} + +#dropdown-button:focus { + outline: none; + background-color: var(--brand-300); +} + +#dropdown-button:active { + transform: scale(2); +} + +#dropdown { + position: absolute; + display: flex; + flex-direction: column; + top: var(--topbar-offset); + right: 0; + background-color: var(--brand); + box-shadow: 0px 5px 1px RGBA(127, 127, 127, 0.2); + transform: scaleY(0); + transition: transform 0.2s; + transform-origin: 0% 0%; +} + +#dropdown.enabled, #dropdown:focus-within { + transform: scaleY(1); +} + +#dropdown a { + color: var(--light); + padding: 1rem 1rem; + font-weight: bold; + text-decoration: none; + outline: none; +} + +#dropdown a:hover, a:focus { + background-color: var(--brand-300); +} + + main { text-align: center; padding: 1rem; margin: auto; - width: 50%; + max-width: 1000px; } main > * { - margin: 2px; + margin-block: 2px; } code { @@ -53,59 +121,52 @@ code { display: flex; flex-direction: row; margin-bottom: 15px; - filter: drop-shadow(0 2px 2px #9E9E9E); } #search-input { - background-color: white; - padding: 5px; + transition: background-color 0.2s; + background-color: var(--brand-800); flex: 1; - border: 1px solid #666; + color: var(--light); border-radius: 5px 0 0 5px; + border: none; + padding: 1rem; } #search-input:focus { - background-color: #FAFAFA; + background-color: var(--brand-700); outline: none; } #search-button { cursor: pointer; width: 5rem; - background-color: #03A9F4; - color: white; + background-color: var(--brand); + color: var(--light); border: none; border-radius: 0 5px 5px 0; transition-duration: 0.2s; } #search-button:hover, #search-button:focus { - background-color: #039BE5; + background-color: var(--brand-300); outline: none; } #search-button:active { - background-color: #0288D1; + background-color: var(--brand-200); } #map { width: 100%; border-radius: 5px; - box-shadow: 0 2px 4px #9E9E9E; - border: 1px solid #7E7E7E; } #info { - background-color: white; - padding: 5px; + background-color: var(--brand-800); + padding: 1rem; border-radius: 5px; - border: 1px solid #7E7E7E; - box-shadow: 0 2px 2px #9E9E9E; -} - -#info { font-size: 1.1em; - width: 100%; } #mouse-position, #coords { @@ -118,15 +179,7 @@ code { height: 15px; border-radius: 50%; border: 2px solid black; - filter: drop-shadow(1px 1px 2px black); - background-color: red; + background-color: var(--brand); position: absolute; display: none; } - -@media screen and (max-width: 1000px) { - main { - width: 100%; - } -} -