diff --git a/web/_css/style.css b/web/_css/style.css index d11f098e..bc757de3 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -245,6 +245,11 @@ #container{ overflow-y: hidden; } +.listHidden #container{ + width: 100%; + margin-left: 0px; +} + #innerContainer{ height: 1000px; width: 1000px; @@ -362,6 +367,10 @@ #drawControlsContainer{ padding: 0px 20px; } +.draw #drawControlsContainer{ + display: block; +} + #drawControls{ width: 250px; padding: 15px; @@ -508,6 +517,10 @@ #zoomControls{ width: 90px; } +.listHidden #zoomControls{ + left: 10px; +} + #zoomControls button{ display: block; height: 30px; @@ -554,6 +567,14 @@ #entriesListContainer{ flex-direction: column; } +.draw #entriesListContainer{ + display: none; +} + +.listHidden #entriesListContainer{ + display: none; +} + #entriesListContainer > nav{ text-align: center; margin: 10px 0px; @@ -591,6 +612,14 @@ #entriesListBackground{ border-right: 1px #000000 solid; } +.draw #entriesListBackground{ + display: none; +} + +.listHidden #entriesListBackground{ + display: none; +} + #hideListButton{ position: absolute; height: 100px; @@ -609,7 +638,11 @@ #hideListButton:hover{ background-color: #555555; } -#hideListButton.reverse{ +.draw #hideListButton{ + display: none; +} + +.listHidden #hideListButton{ background-image: url("data:image/svg+xml;utf8,%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%0A%20%20%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20width%3D%22272.84375%22%0A%20%20%20height%3D%22177.59375%22%0A%20%20%20id%3D%22svg2%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%20/%3E%0A%20%20%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata7%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage/svg+xml%3C/dc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A//purl.org/dc/dcmitype/StillImage%22%20/%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C/dc%3Atitle%3E%0A%20%20%20%20%20%20%3C/cc%3AWork%3E%0A%20%20%20%20%3C/rdf%3ARDF%3E%0A%20%20%3C/metadata%3E%0A%20%20%3Cg%0A%20%20%20%20%20transform%3D%22translate%28-116.4375%2C-348.78125%29%22%0A%20%20%20%20%20id%3D%22layer1%22%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20d%3D%22M%20368.07001%2C380.00645%20252.85714%2C495.16383%20137.64427%2C380.00645%22%0A%20%20%20%20%20%20%20id%3D%22path2985%22%0A%20%20%20%20%20%20%20style%3D%22fill%3Anone%3Bstroke%3A%23ffffff%3Bstroke-width%3A30%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-opacity%3A1%3Bstroke-dasharray%3Anone%22%20/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E"); background-size: 15px; top: 50px; diff --git a/web/_js/main.js b/web/_js/main.js index fbfc7e71..63802ace 100644 --- a/web/_js/main.js +++ b/web/_js/main.js @@ -70,31 +70,25 @@ function init(){ } } - if(mode=="view"){ - /*document.getElementById("viewLink").className = "current"; - document.getElementById("drawLink").className = ""; - document.getElementById("aboutLink").className = "";*/ + if(mode == "view"){ - document.getElementById("drawControlsContainer").style.display = "none"; - document.getElementById("entriesListContainer").style.display = "flex"; - document.getElementById("entriesListBackground").style.display = "block"; - document.getElementById("hideListButton").style.display = "block"; - document.getElementById("objectsList").style.display = "block"; - - /* - document.getElementById("container").style.width = "100vw"; - document.getElementById("drawControls").style.display = "none"; - document.getElementById("entriesListContainer").style.display = "none"; - document.getElementById("entriesListBackground").style.display = "none"; - document.getElementById("author").style.display = "none"; - document.getElementById("zoomControls").style.right = "10px"; - document.getElementById("zoomControls").style.top = "10px"; - document.getElementById("hideListButton").style.display = "none"; - document.getElementById("objectsList").style.display = "none"; - */ - + wrapper.className = wrapper.className.replace(/ drawMode/g, ""); initView(); + } else if(mode=="draw"){ + + wrapper.className += " draw"; + initDraw(); + + } else if(mode=="about"){ + window.location = "./about.html"; + } + + if(mode=="view"){ + + + + } else if(mode=="draw"){ /*document.getElementById("viewLink").className = ""; document.getElementById("drawLink").className = "current"; @@ -105,7 +99,7 @@ function init(){ document.getElementById("entriesListBackground").style.display = "none"; document.getElementById("hideListButton").style.display = "none"; - initDraw(); + } else if(mode=="about"){ window.location = "./about.html"; } @@ -208,8 +202,6 @@ function init(){ window.addEventListener("resize", function(){ //console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); - - applyView(); }); diff --git a/web/_js/view.js b/web/_js/view.js index 20455864..ef4c205f 100644 --- a/web/_js/view.js +++ b/web/_js/view.js @@ -25,6 +25,8 @@ function initView(){ + var wrapper = document.getElementById("wrapper"); + var objectsContainer = document.getElementById("objectsList"); var linesCanvas = document.getElementById("linesCanvas"); @@ -49,7 +51,8 @@ function initView(){ moreEntriesButton.onclick = function(){ buildObjectsList(); }; - //entriesList.appendChild(moreEntriesButton); + + var viewportWidth = document.documentElement.clientWidth; var hovered = []; @@ -69,6 +72,22 @@ function initView(){ highlightEntryFromUrl(); }*/ + if(document.documentElement.clientWidth > 1000){ + entriesListShown = true; + wrapper.className = wrapper.className.replace(/ listHidden/g, ""); + } + + if(document.documentElement.clientWidth < 1000){ + entriesListShown = false; + wrapper.className += " listHidden"; + } + + applyView(); + render(); + updateLines(); + + + var args = window.location.search; if(args){ id = args.split("id=")[1]; @@ -102,19 +121,9 @@ function initView(){ hideListButton.addEventListener("click", function(e){ entriesListShown = !entriesListShown; if(entriesListShown){ - hideListButton.className = ""; - document.getElementById("container").style.width = "calc(100% - 360px)"; - document.getElementById("container").style.marginLeft = "360px"; - document.getElementById("entriesListContainer").style.display = "flex"; - document.getElementById("entriesListBackground").style.display = "block"; - document.getElementById("zoomControls").style.left = "370px"; + wrapper.className = wrapper.className.replace(/ listHidden/g, ""); } else { - hideListButton.className = "reverse"; - document.getElementById("container").style.width = "100%"; - document.getElementById("container").style.marginLeft = "0px"; - document.getElementById("entriesListContainer").style.display = "none"; - document.getElementById("entriesListBackground").style.display = "none"; - document.getElementById("zoomControls").style.left = "10px"; + wrapper.className += " listHidden"; } applyView(); updateHovering(e); @@ -523,4 +532,25 @@ function initView(){ updateLines(); }); + window.addEventListener("resize", function(){ + //console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); + + if(document.documentElement.clientWidth > 1000 && viewportWidth <= 1000){ + entriesListShown = true; + wrapper.className = wrapper.className.replace(/ listHidden/g, ""); + } + + if(document.documentElement.clientWidth < 1000 && viewportWidth >= 1000){ + entriesListShown = false; + wrapper.className += " listHidden"; + } + + viewportWidth = document.documentElement.clientWidth; + + applyView(); + render(); + updateLines(); + + }); + } diff --git a/web/index.html b/web/index.html index c680c5be..c98ff1a2 100644 --- a/web/index.html +++ b/web/index.html @@ -165,13 +165,13 @@

Tux

- + - +