h2/postnummer-app
h2/postnummer-app
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redesign + topbar

Browse Source
This commit is contained in:
Theis Pieter Hollebeek 2023-02-08 11:40:31 +01:00
parent dbeb2d299d
commit 89f731a31d
4 changed files with 122 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/index.html
View File

@ -15,21 +15,24 @@
<body> <body>
<div id="topbar"> <div id="topbar">
<h1>Postnummer App</h1> <h1>Postnummer App</h1>
<div class="spacer"></div>
<button id="dropdown-button">≡</button>
<div id="dropdown">
<a href="https://tpho.dk">based site</a>
<a href="https://tpho.dk">based site</a>
</div>
</div> </div>
<main> <main>
<form id="search-bar"> <form id="search-bar">
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4"> <input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
<button id="search-button" type="submit">Search</button> <button id="search-button" type="submit">Search</button>
</form> </form>
<img src="assets/map.jpg" id="map"><br> <img src="assets/map.jpg" id="map">
<div id="dot"></div> <div id="dot"></div>
<div id="info"> <div id="info">
<span id="mouse-position"></span> <p id="zip-code">Postnummer ikke fundet</p>
<br> <p id="mouse-position"></p>
<span id="coords"></span> <p id="coords"></p>
<br>
<span id="zip-code"></span>
<br>
</div> </div>
</main> </main>
</body> </body>

6
frontend/src/main.ts
View File

@ -1,4 +1,5 @@
import { Throttler } from "./Throttler"; import { Throttler } from "./Throttler";
import { setTopbarOffset, addToggleDropdownListener } from "./topbar";
import { Coordinate, Position, convertPixelsToCoordinate, convertCoordinateToPixels } from "./coordinates"; import { Coordinate, Position, convertPixelsToCoordinate, convertCoordinateToPixels } from "./coordinates";
import { Size } from "./size"; import { Size } from "./size";
@ -120,9 +121,10 @@ function setupMap(
mapImg.onmouseleave = (_event: MouseEvent) => { mapImg.onmouseleave = (_event: MouseEvent) => {
document.getElementById("dot")!.style.display = "none"; document.getElementById("dot")!.style.display = "none";
[mousePositionElement, coordsElement, zipCodeElement].forEach( [mousePositionElement, coordsElement].forEach(
(e) => (e.innerHTML = ""), (e) => (e.innerHTML = ""),
); );
zipCodeElement.innerHTML = "Postnummer ikke fundet";
}; };
} }
@ -167,6 +169,8 @@ function main() {
setupSearchBar(zipCodeElement); setupSearchBar(zipCodeElement);
setupMap(mousePositionElement, coordsElement, zipCodeElement); setupMap(mousePositionElement, coordsElement, zipCodeElement);
setTopbarOffset();
addToggleDropdownListener();
} }
main(); main();

15
frontend/src/topbar.ts Normal file
View File

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

131
frontend/style.css
View File

@ -8,40 +8,108 @@
src: url("assets/JetBrainsMono-Bold.woff2"); src: url("assets/JetBrainsMono-Bold.woff2");
} }
* { *, *::before, *::after {
box-sizing: border-box; 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 { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
background-color: #E1F5FE; background-color: var(--brand-900);
color: var(--light);
} }
#topbar { #topbar {
background-color: #03A9F4; display: flex;
color: white; background-color: var(--brand);
color: var(--light);
text-align: center; text-align: center;
margin: 0; padding: 1rem 2rem;
padding: 0.5rem; box-shadow: 0px 5px 1px RGBA(127, 127, 127, 0.2);
box-shadow: 0px 3px 3px #01579B;
} }
#topbar > h1 { #topbar h1 {
align-self: center;
margin: 0; 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 { main {
text-align: center; text-align: center;
padding: 1rem; padding: 1rem;
margin: auto; margin: auto;
width: 50%; max-width: 1000px;
} }
main > * { main > * {
margin: 2px; margin-block: 2px;
} }
code { code {
@ -53,59 +121,52 @@ code {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-bottom: 15px; margin-bottom: 15px;
filter: drop-shadow(0 2px 2px #9E9E9E);
} }
#search-input { #search-input {
background-color: white; transition: background-color 0.2s;
padding: 5px; background-color: var(--brand-800);
flex: 1; flex: 1;
border: 1px solid #666; color: var(--light);
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
border: none;
padding: 1rem;
} }
#search-input:focus { #search-input:focus {
background-color: #FAFAFA; background-color: var(--brand-700);
outline: none; outline: none;
} }
#search-button { #search-button {
cursor: pointer; cursor: pointer;
width: 5rem; width: 5rem;
background-color: #03A9F4; background-color: var(--brand);
color: white; color: var(--light);
border: none; border: none;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
transition-duration: 0.2s; transition-duration: 0.2s;
} }
#search-button:hover, #search-button:focus { #search-button:hover, #search-button:focus {
background-color: #039BE5; background-color: var(--brand-300);
outline: none; outline: none;
} }
#search-button:active { #search-button:active {
background-color: #0288D1; background-color: var(--brand-200);
} }
#map { #map {
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 4px #9E9E9E;
border: 1px solid #7E7E7E;
} }
#info { #info {
background-color: white; background-color: var(--brand-800);
padding: 5px; padding: 1rem;
border-radius: 5px; border-radius: 5px;
border: 1px solid #7E7E7E;
box-shadow: 0 2px 2px #9E9E9E;
}
#info {
font-size: 1.1em; font-size: 1.1em;
width: 100%;
} }
#mouse-position, #coords { #mouse-position, #coords {
@ -118,15 +179,7 @@ code {
height: 15px; height: 15px;
border-radius: 50%; border-radius: 50%;
border: 2px solid black; border: 2px solid black;
filter: drop-shadow(1px 1px 2px black); background-color: var(--brand);
background-color: red;
position: absolute; position: absolute;
display: none; display: none;
} }
@media screen and (max-width: 1000px) {
main {
width: 100%;
}
}