redesign + topbar
This commit is contained in:
parent
dbeb2d299d
commit
89f731a31d
@ -15,21 +15,24 @@
|
||||
<body>
|
||||
<div id="topbar">
|
||||
<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>
|
||||
<main>
|
||||
<form id="search-bar">
|
||||
<input id="search-input" type="text" placeholder="Postnummer" maxlength="4">
|
||||
<button id="search-button" type="submit">Search</button>
|
||||
</form>
|
||||
<img src="assets/map.jpg" id="map"><br>
|
||||
<img src="assets/map.jpg" id="map">
|
||||
<div id="dot"></div>
|
||||
<div id="info">
|
||||
<span id="mouse-position"></span>
|
||||
<br>
|
||||
<span id="coords"></span>
|
||||
<br>
|
||||
<span id="zip-code"></span>
|
||||
<br>
|
||||
<p id="zip-code">Postnummer ikke fundet</p>
|
||||
<p id="mouse-position"></p>
|
||||
<p id="coords"></p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@ -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();
|
||||
|
||||
15
frontend/src/topbar.ts
Normal file
15
frontend/src/topbar.ts
Normal 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");
|
||||
});
|
||||
}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user