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

Ferdig med foreløpig styling og bokser / menyer

parent 46997ce3
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 130 additions and 16 deletions
index.html
+ 130
− 16
View file @ 02338609
......@@ -3,9 +3,26 @@
<head>
<title>ProgGIS</title>
<style>
.box {
font-family: monospace;
background-color: orange;
color: white;
border-color: orangered;
border-style: solid;
border-width: 0px;
border-radius: 20px;
width: 0;
height: 0;
margin-top: 15vh;
margin-left: 30vw;
position: fixed;
z-index: 999;
overflow-x: hidden;
text-align: center;
}
.box1 {
display: flex;
flex-grow: 6;
flex-grow: 5;
flex-direction: row;
}
.box2 {
......@@ -13,6 +30,11 @@
flex-grow: 3;
flex-direction: row;
}
.box3 {
display: flex;
flex-grow: 2;
flex-direction: row;
}
.button {
font-family: monospace;
font-weight: bolder;
......@@ -55,11 +77,10 @@
<h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1>
<div class="box1">
<p style="width: 17vw;"></p>
<button class="button">Buffer</button>
<button class="button">Intersection</button>
<button class="button">Union</button>
<button class="button">Difference</button>
<p></p>
<button class="button" onclick="openBox('bufferBox')">Buffer</button>
<button class="button" onclick="openBox('intersectionBox')">Intersection</button>
<button class="button" onclick="openBox('unionBox')">Union</button>
<button class="button" onclick="openBox('differenceBox')">Difference</button>
</div>
</div>
<div style="padding-right: 2vh; padding-top: 2vh;">
......@@ -69,7 +90,7 @@
</svg>
</div>
</div>
<div id="sidebar1" class="sidebar">
<div id="dataLayers" 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>
......@@ -82,7 +103,57 @@
</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="height: 72vh;">
<div id="bufferBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Buffer</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('bufferBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
<div id="intersectionBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Intersection</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('intersectionBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
<div id="unionBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Union</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('unionBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
<div id="differenceBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Difference</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('differenceBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
</div>
<div id="tutorialBox" class="box">
<div class="box3">
<h1 style="font-size: 4vh; text-align: center; width: 36vw;">Tutorial</h1>
<svg style="cursor: pointer; padding-top: 15px;" onclick="closeBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="3vw" height="3vw" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
</div>
<textarea style="margin: 2vw; padding: 5px; background-color: white; border-color: black;
border-width: 2px; color: black; height: 18vh; width: 35vw; text-align: left;">
Legg til piler på hver side av 'Tutorial' for å navigere rundt blant de ulike tutorialene.
</textarea>
</div>
</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;" onclick="openNav()"
......@@ -92,7 +163,7 @@
</div>
<div style="width: 95vw;"></div>
<div style="padding-right: 2vw;">
<svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;"
<svg style="cursor: pointer; border: none; position: relative; color: orangered; z-index: 999;" onclick="openBox('tutorialBox')"
xmlns="http://www.w3.org/2000/svg" width="6vh" height="6v" fill="currentColor" class="bi bi-question-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"/>
</svg>
......@@ -105,6 +176,10 @@
<script type="text/javascript">
var boolskNav = false; /* boolsk verdi som forteller om en sidebar er åpen foran kartet */
var boolskBox = false; /* boolsk verdi som forteller om en boks er åpen foran kartet */
var box = null; /* Streng som forteller hvilken boks-id som er åpen */
// Bestemme URL til basiskartet:
var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
......@@ -115,26 +190,65 @@
layers: [osm_map], // Default basiskart
maxZoom: 18, // Justerer zoom-nivået
minZoom: 6,
zoomControl: false // Fjerner default zoom-knapper
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);
/* Activate and deactivate interactions in the leaflet map*/
function deactivateMap() {
map._handlers.forEach(function(handler) {
handler.disable();
});
}
function activateMap() {
map._handlers.forEach(function(handler) {
handler.enable();
});
}
/* Set the width of the sidebar to 25vw */
function openNav() {
document.getElementById("sidebar1").style.width = "25vw";
boolsk = true;
if (boolskBox) {
closeBox(box);
}
document.getElementById("dataLayers").style.width = "25vw";
boolskNav = 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;
document.getElementById("dataLayers").style.width = "0vw";
boolskNav = false;
}
function openBox(id) {
if (boolskBox) {
closeBox(box)
}
if (boolskNav) {
closeNav();
}
document.getElementById(String(id)).style.width = "40vw";
document.getElementById(String(id)).style.height = "40vh";
document.getElementById(String(id)).style.borderWidth = "20px";
boolskBox = true;
box = id;
deactivateMap();
}
function closeBox(id) {
document.getElementById(String(id)).style.width = "0vw";
document.getElementById(String(id)).style.height = "0vh";
document.getElementById(String(id)).style.borderWidth = "0px";
boolskBox = false;
box = null;
activateMap();
}
</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