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 @@ ...@@ -3,9 +3,26 @@
<head> <head>
<title>ProgGIS</title> <title>ProgGIS</title>
<style> <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 { .box1 {
display: flex; display: flex;
flex-grow: 6; flex-grow: 5;
flex-direction: row; flex-direction: row;
} }
.box2 { .box2 {
...@@ -13,6 +30,11 @@ ...@@ -13,6 +30,11 @@
flex-grow: 3; flex-grow: 3;
flex-direction: row; flex-direction: row;
} }
.box3 {
display: flex;
flex-grow: 2;
flex-direction: row;
}
.button { .button {
font-family: monospace; font-family: monospace;
font-weight: bolder; font-weight: bolder;
...@@ -55,11 +77,10 @@ ...@@ -55,11 +77,10 @@
<h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1> <h1 style="margin: 0; padding: 0; text-align: center; font-size: 12vh;">ProgGIS</h1>
<div class="box1"> <div class="box1">
<p style="width: 17vw;"></p> <p style="width: 17vw;"></p>
<button class="button">Buffer</button> <button class="button" onclick="openBox('bufferBox')">Buffer</button>
<button class="button">Intersection</button> <button class="button" onclick="openBox('intersectionBox')">Intersection</button>
<button class="button">Union</button> <button class="button" onclick="openBox('unionBox')">Union</button>
<button class="button">Difference</button> <button class="button" onclick="openBox('differenceBox')">Difference</button>
<p></p>
</div> </div>
</div> </div>
<div style="padding-right: 2vh; padding-top: 2vh;"> <div style="padding-right: 2vh; padding-top: 2vh;">
...@@ -69,7 +90,7 @@ ...@@ -69,7 +90,7 @@
</svg> </svg>
</div> </div>
</div> </div>
<div id="sidebar1" class="sidebar"> <div id="dataLayers" class="sidebar">
<div style="display: flex; flex-grow: 2; flex-direction: row;"> <div style="display: flex; flex-grow: 2; flex-direction: row;">
<div style="width: 20vw; padding-left: 10px;"> <div style="width: 20vw; padding-left: 10px;">
<h1 style="font-size: 2vw;">Data layers</h1> <h1 style="font-size: 2vw;">Data layers</h1>
...@@ -82,7 +103,57 @@ ...@@ -82,7 +103,57 @@
</div> </div>
<div id="map" style="position: relative; z-index: 1; height: 80vh;"> <div id="map" style="position: relative; z-index: 1; height: 80vh;">
<div style="display: flex; flex-grow: 2; flex-direction: column;"> <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="display: flex; flex-grow: 3; flex-direction: row;">
<div style="padding-left: 2vw;"> <div style="padding-left: 2vw;">
<svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()" <svg style="cursor: pointer; border: none; position: absolute; color: orangered; z-index: 999;" onclick="openNav()"
...@@ -92,7 +163,7 @@ ...@@ -92,7 +163,7 @@
</div> </div>
<div style="width: 95vw;"></div> <div style="width: 95vw;"></div>
<div style="padding-right: 2vw;"> <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"> 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"/> <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> </svg>
...@@ -105,6 +176,10 @@ ...@@ -105,6 +176,10 @@
<script type="text/javascript"> <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: // Bestemme URL til basiskartet:
var osm_map = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 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' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright"<OpenStreetMap</a> contributors'
...@@ -115,26 +190,65 @@ ...@@ -115,26 +190,65 @@
layers: [osm_map], // Default basiskart layers: [osm_map], // Default basiskart
maxZoom: 18, // Justerer zoom-nivået maxZoom: 18, // Justerer zoom-nivået
minZoom: 6, minZoom: 6,
zoomControl: false // Fjerner default zoom-knapper zoomControl: false, // Fjerner default zoom-knapper
}).setView([63.418529, 10.40284], 13) }).setView([63.418529, 10.40284], 13)
// Legger til zoom-knapper på egnet sted // Legger til zoom-knapper på egnet sted
L.control.zoom({ L.control.zoom({
position:'topright' position:'topright'
}).addTo(map); }).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 */ /* Set the width of the sidebar to 25vw */
function openNav() { function openNav() {
document.getElementById("sidebar1").style.width = "25vw"; if (boolskBox) {
boolsk = true; 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 */ /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() { function closeNav() {
document.getElementById("sidebar1").style.width = "0vw"; document.getElementById("dataLayers").style.width = "0vw";
Reset() boolskNav = false;
boolsk = 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> </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