Skip to content
Snippets Groups Projects
Commit 46997ce3 authored by Jakob Severin Steffensen Hjelseth's avatar Jakob Severin Steffensen Hjelseth
Browse files

Begynne på mer avansert design og knapper

parent db7d460f
No related branches found
No related tags found
2 merge requests!4Sende 'dev' inn til 'main' :),!3Resolve "God html-struktur"
Hide whitespace changes
Inline Side-by-side
Showing
with 52 additions and 7 deletions
index.html
+ 52
− 7
View file @ 46997ce3
......@@ -3,6 +3,16 @@
<head>
<title>ProgGIS</title>
<style>
.box1 {
display: flex;
flex-grow: 6;
flex-direction: row;
}
.box2 {
display: flex;
flex-grow: 3;
flex-direction: row;
}
.button {
font-family: monospace;
font-weight: bolder;
......@@ -17,10 +27,16 @@
margin-top: 0.5vh;
margin-bottom: 0.5vh;
}
.box1 {
display: flex;
flex-grow: 6;
flex-direction: row;
.sidebar {
background-color: orangered;
color: white;
font-family: monospace;
position: fixed;
z-index: 999;
width: 0vw;
height: 80vh;
overflow-x: hidden;
transition: 0.5s;
}
</style>
</head>
......@@ -29,8 +45,7 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<body style="margin: 0;">
<div style="display: flex; flex-grow: 3; flex-direction: row;
height: 20vh; background-color: orange; color: white; font-family: monospace;">
<div class="box2" style="height: 20vh; background-color: orange; color: white; font-family: monospace;">
<div style="padding-left: 2vh; padding-top: 2vh;">
<svg xmlns="http://www.w3.org/2000/svg" width="16vh" height="16vh" fill="currentColor" class="bi bi-globe-europe-africa" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM3.668 2.501l-.288.646a.847.847 0 0 0 1.479.815l.245-.368a.809.809 0 0 1 1.034-.275.809.809 0 0 0 .724 0l.261-.13a1 1 0 0 1 .775-.05l.984.34c.078.028.16.044.243.054.784.093.855.377.694.801-.155.41-.616.617-1.035.487l-.01-.003C8.274 4.663 7.748 4.5 6 4.5 4.8 4.5 3.5 5.62 3.5 7c0 1.96.826 2.166 1.696 2.382.46.115.935.233 1.304.618.449.467.393 1.181.339 1.877C6.755 12.96 6.674 14 8.5 14c1.75 0 3-3.5 3-4.5 0-.262.208-.468.444-.7.396-.392.87-.86.556-1.8-.097-.291-.396-.568-.641-.756-.174-.133-.207-.396-.052-.551a.333.333 0 0 1 .42-.042l1.085.724c.11.072.255.058.348-.035.15-.15.415-.083.489.117.16.43.445 1.05.849 1.357L15 8A7 7 0 1 1 3.668 2.501Z"/>
......@@ -54,12 +69,23 @@
</svg>
</div>
</div>
<div id="sidebar1" class="sidebar">
<div style="display: flex; flex-grow: 2; flex-direction: row;">
<div style="width: 20vw; padding-left: 10px;">
<h1 style="font-size: 2vw;">Data layers</h1>
</div>
<svg onclick="closeNav()" style="padding-top: 1vh; padding-right: 1vw; cursor: pointer;" xmlns="http://www.w3.org/2000/svg" width="4vw" height="4vw" fill="white" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
</svg>
</div>
<p>Hei på deg</p>
</div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;">
<div style="display: flex; flex-grow: 2; flex-direction: column;">
<div style="height: 72vh;"></div>
<div style="display: flex; flex-grow: 3; flex-direction: row;">
<div style="padding-left: 2vw;">
<svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;"
<svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6vh" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
</svg>
......@@ -91,5 +117,24 @@
minZoom: 6,
zoomControl: false // Fjerner default zoom-knapper
}).setView([63.418529, 10.40284], 13)
// Legger til zoom-knapper på egnet sted
L.control.zoom({
position:'topright'
}).addTo(map);
/* Set the width of the sidebar to 25vw */
function openNav() {
document.getElementById("sidebar1").style.width = "25vw";
boolsk = true;
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar1").style.width = "0vw";
Reset()
boolsk = false;
}
</script>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment