Improve responsiveness of design

This commit is contained in:
Roland Rytz 2017-04-07 19:52:56 +02:00
parent 1971a24b67
commit 114523e03a
6 changed files with 203 additions and 87 deletions

View file

@ -82436,6 +82436,8 @@ for(var i = 0; i < 10000; i++){
function initView(){ function initView(){
var wrapper = document.getElementById("wrapper");
var objectsContainer = document.getElementById("objectsList"); var objectsContainer = document.getElementById("objectsList");
var linesCanvas = document.getElementById("linesCanvas"); var linesCanvas = document.getElementById("linesCanvas");
@ -82460,7 +82462,8 @@ function initView(){
moreEntriesButton.onclick = function(){ moreEntriesButton.onclick = function(){
buildObjectsList(); buildObjectsList();
}; };
//entriesList.appendChild(moreEntriesButton);
var viewportWidth = document.documentElement.clientWidth;
var hovered = []; var hovered = [];
@ -82480,6 +82483,22 @@ function initView(){
highlightEntryFromUrl(); 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; var args = window.location.search;
if(args){ if(args){
id = args.split("id=")[1]; id = args.split("id=")[1];
@ -82513,24 +82532,14 @@ function initView(){
hideListButton.addEventListener("click", function(e){ hideListButton.addEventListener("click", function(e){
entriesListShown = !entriesListShown; entriesListShown = !entriesListShown;
if(entriesListShown){ if(entriesListShown){
hideListButton.className = ""; wrapper.className = wrapper.className.replace(/ listHidden/g, "");
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";
} else { } else {
hideListButton.className = "reverse"; wrapper.className += " listHidden";
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";
} }
applyView(); applyView();
updateHovering(e);
render(); render();
updateLines(); updateLines();
return false;
}); });
function createInfoBlock(entry){ function createInfoBlock(entry){
@ -82934,6 +82943,27 @@ function initView(){
updateLines(); 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();
});
} }
@ -83394,31 +83424,30 @@ function init(){
} }
} }
if(mode=="view"){ if(mode == "view"){
/*document.getElementById("viewLink").className = "current";
document.getElementById("drawLink").className = "";
document.getElementById("aboutLink").className = "";*/
document.getElementById("drawControlsContainer").style.display = "none"; wrapper.className = wrapper.className.replace(/ drawMode/g, "");
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";
*/
initView(); initView();
} else if(mode=="draw"){
wrapper.className += " draw";
initDraw();
} else if(mode=="about"){
window.location = "./about.html";
} else if(mode=="overlap"){
wrapper.className = wrapper.className.replace(/ drawMode/g, "");
if(initOverlap){
initOverlap();
}
}
if(mode=="view"){
} else if(mode=="draw"){ } else if(mode=="draw"){
/*document.getElementById("viewLink").className = ""; /*document.getElementById("viewLink").className = "";
document.getElementById("drawLink").className = "current"; document.getElementById("drawLink").className = "current";
@ -83429,7 +83458,7 @@ function init(){
document.getElementById("entriesListBackground").style.display = "none"; document.getElementById("entriesListBackground").style.display = "none";
document.getElementById("hideListButton").style.display = "none"; document.getElementById("hideListButton").style.display = "none";
initDraw();
} else if(mode=="about"){ } else if(mode=="about"){
window.location = "./about.html"; window.location = "./about.html";
} }
@ -83532,8 +83561,6 @@ function init(){
window.addEventListener("resize", function(){ window.addEventListener("resize", function(){
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight); //console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
applyView(); applyView();
}); });

View file

@ -129,6 +129,19 @@ header{
display: inline-block; display: inline-block;
} }
@media (max-width: 600px) {
header{
width: 100%;
}
}
@media (max-width: 400px) {
header h1{
font-size: 20px;
vertical-align: middle;
}
}
header.aboutHeader{ header.aboutHeader{
width: 100%; width: 100%;
border-right: 0px; border-right: 0px;
@ -137,6 +150,7 @@ header.aboutHeader{
header > a{ header > a{
display: flex; display: flex;
color: #FFFFFF; color: #FFFFFF;
align-items: center;
} }
header > a:hover{ header > a:hover{
@ -151,44 +165,11 @@ #logo{
h1{ h1{
font-weight: 300; font-weight: 300;
padding: 5px 10px; padding: 0px 10px;
display: inline-block; display: inline-block;
vertical-align: center; vertical-align: center;
} }
header nav{
display: block;
margin-top: 20px;
}
body.mobile header nav{
display: none;
}
header nav a{
display: inline-block;
height: 30px;
width: 100px;
background-image: linear-gradient(to bottom, #888888, #666666);
border: 1px #000000 solid;
color: #FFFFFF;
text-align: center;
text-decoration: none;
cursor: pointer;
padding: 5px;
}
header nav a:hover{
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(180, 180, 180, 0.5));
}
header nav a.current{
background-image: none;
background: #333333;
border-bottom: none;
outline: none;
}
select{ select{
background: none; background: none;
background-image: linear-gradient(to bottom, #888888, #666666); background-image: linear-gradient(to bottom, #888888, #666666);
@ -567,6 +548,54 @@ #entriesListContainer{
flex-direction: column; flex-direction: column;
} }
@media (max-width: 500px) {
div#entriesListContainer{
width: calc(100% - 20px);
}
div#entriesListBackground{
width: 100%;
}
div:not(.listHidden) > #zoomControls{
display: none;
}
div:not(.listHidden) > button#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%22192.84375%22%0A%20%20%20height%3D%22192.875%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%22matrix%281.2121574%2C0%2C0%2C1.2121574%2C-20.456139%2C-20.460051%29%22%0A%20%20%20%20%20id%3D%22g3804%22%0A%20%20%20%20%20style%3D%22stroke%3A%23ffffff%3Bstroke-opacity%3A1%22%3E%0A%20%20%20%20%3Cg%0A%20%20%20%20%20%20%20transform%3D%22translate%28-156.4375%2C-398.78125%29%22%0A%20%20%20%20%20%20%20id%3D%22layer1%22%0A%20%20%20%20%20%20%20style%3D%22stroke%3A%23ffffff%3Bstroke-opacity%3A1%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20d%3D%22M%20195.27845%2C552.79802%20310.43583%2C437.64064%22%0A%20%20%20%20%20%20%20%20%20id%3D%22path2985%22%0A%20%20%20%20%20%20%20%20%20style%3D%22fill%3Anone%3Bstroke%3A%23ffffff%3Bstroke-width%3A24.74926186%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-opacity%3A1%3Bstroke-dasharray%3Anone%22%20/%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20d%3D%22M%20310.43583%2C552.79802%20195.27845%2C437.64064%22%0A%20%20%20%20%20%20%20%20%20id%3D%22path3802%22%0A%20%20%20%20%20%20%20%20%20style%3D%22fill%3Anone%3Bstroke%3A%23ffffff%3Bstroke-width%3A24.74926186%3Bstroke-linecap%3Asquare%3Bstroke-linejoin%3Amiter%3Bstroke-miterlimit%3A4%3Bstroke-opacity%3A1%3Bstroke-dasharray%3Anone%22%20/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
background-size: 20px;
position: absolute;
top: 55px;
right: 10px;
left: initial;
border: 1px #000000 solid;
width: 40px;
height: 40px;
}
#entriesListContainer > nav{
width: calc(100% - 45px);
}
}
@media (max-width: 750px) {
div:not(.listHidden) > #author{
display: none;
}
}
@media (max-width: 400px) {
#author{
display: none;
}
}
@media (max-width: 350px) {
#entriesListContainer > nav > a#drawLink{
display: none;
}
}
.draw #entriesListContainer{ .draw #entriesListContainer{
display: none; display: none;
} }
@ -634,6 +663,14 @@ #hideListButton{
background-image: url("data:image/svg+xml;utf8,%0A%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%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%0A%20%20%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%0A%20%20%20width%3D%22165.15738%22%0A%20%20%20height%3D%22260.42575%22%0A%20%20%20id%3D%22svg2%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20inkscape%3Aversion%3D%220.48.5%20r10040%22%0A%20%20%20sodipodi%3Adocname%3D%22arrow-right.svg%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%20/%3E%0A%20%20%3Csodipodi%3Anamedview%0A%20%20%20%20%20id%3D%22base%22%0A%20%20%20%20%20pagecolor%3D%22%23ffffff%22%0A%20%20%20%20%20bordercolor%3D%22%23666666%22%0A%20%20%20%20%20borderopacity%3D%221.0%22%0A%20%20%20%20%20inkscape%3Apageopacity%3D%220.0%22%0A%20%20%20%20%20inkscape%3Apageshadow%3D%222%22%0A%20%20%20%20%20inkscape%3Azoom%3D%223.669697%22%0A%20%20%20%20%20inkscape%3Acx%3D%2287.132045%22%0A%20%20%20%20%20inkscape%3Acy%3D%22156.56585%22%0A%20%20%20%20%20inkscape%3Adocument-units%3D%22px%22%0A%20%20%20%20%20inkscape%3Acurrent-layer%3D%22layer1%22%0A%20%20%20%20%20showgrid%3D%22false%22%0A%20%20%20%20%20fit-margin-top%3D%220%22%0A%20%20%20%20%20fit-margin-left%3D%2210%22%0A%20%20%20%20%20fit-margin-right%3D%2210%22%0A%20%20%20%20%20fit-margin-bottom%3D%220%22%0A%20%20%20%20%20inkscape%3Awindow-width%3D%221596%22%0A%20%20%20%20%20inkscape%3Awindow-height%3D%22877%22%0A%20%20%20%20%20inkscape%3Awindow-x%3D%220%22%0A%20%20%20%20%20inkscape%3Awindow-y%3D%2219%22%0A%20%20%20%20%20inkscape%3Awindow-maximized%3D%220%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%20inkscape%3Alabel%3D%22Layer%201%22%0A%20%20%20%20%20inkscape%3Agroupmode%3D%22layer%22%0A%20%20%20%20%20id%3D%22layer1%22%0A%20%20%20%20%20transform%3D%22translate%28-170.27845%2C-307.37227%29%22%3E%0A%20%20%20%20%3Cpath%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%0A%20%20%20%20%20%20%20d%3D%22M%20310.43583%2C552.79802%20195.27845%2C437.58514%20310.43583%2C322.37227%22%0A%20%20%20%20%20%20%20id%3D%22path2985%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20sodipodi%3Anodetypes%3D%22ccc%22%20/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A"); background-image: url("data:image/svg+xml;utf8,%0A%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%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%0A%20%20%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%0A%20%20%20width%3D%22165.15738%22%0A%20%20%20height%3D%22260.42575%22%0A%20%20%20id%3D%22svg2%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20inkscape%3Aversion%3D%220.48.5%20r10040%22%0A%20%20%20sodipodi%3Adocname%3D%22arrow-right.svg%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%20/%3E%0A%20%20%3Csodipodi%3Anamedview%0A%20%20%20%20%20id%3D%22base%22%0A%20%20%20%20%20pagecolor%3D%22%23ffffff%22%0A%20%20%20%20%20bordercolor%3D%22%23666666%22%0A%20%20%20%20%20borderopacity%3D%221.0%22%0A%20%20%20%20%20inkscape%3Apageopacity%3D%220.0%22%0A%20%20%20%20%20inkscape%3Apageshadow%3D%222%22%0A%20%20%20%20%20inkscape%3Azoom%3D%223.669697%22%0A%20%20%20%20%20inkscape%3Acx%3D%2287.132045%22%0A%20%20%20%20%20inkscape%3Acy%3D%22156.56585%22%0A%20%20%20%20%20inkscape%3Adocument-units%3D%22px%22%0A%20%20%20%20%20inkscape%3Acurrent-layer%3D%22layer1%22%0A%20%20%20%20%20showgrid%3D%22false%22%0A%20%20%20%20%20fit-margin-top%3D%220%22%0A%20%20%20%20%20fit-margin-left%3D%2210%22%0A%20%20%20%20%20fit-margin-right%3D%2210%22%0A%20%20%20%20%20fit-margin-bottom%3D%220%22%0A%20%20%20%20%20inkscape%3Awindow-width%3D%221596%22%0A%20%20%20%20%20inkscape%3Awindow-height%3D%22877%22%0A%20%20%20%20%20inkscape%3Awindow-x%3D%220%22%0A%20%20%20%20%20inkscape%3Awindow-y%3D%2219%22%0A%20%20%20%20%20inkscape%3Awindow-maximized%3D%220%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%20inkscape%3Alabel%3D%22Layer%201%22%0A%20%20%20%20%20inkscape%3Agroupmode%3D%22layer%22%0A%20%20%20%20%20id%3D%22layer1%22%0A%20%20%20%20%20transform%3D%22translate%28-170.27845%2C-307.37227%29%22%3E%0A%20%20%20%20%3Cpath%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%0A%20%20%20%20%20%20%20d%3D%22M%20310.43583%2C552.79802%20195.27845%2C437.58514%20310.43583%2C322.37227%22%0A%20%20%20%20%20%20%20id%3D%22path2985%22%0A%20%20%20%20%20%20%20inkscape%3Aconnector-curvature%3D%220%22%0A%20%20%20%20%20%20%20sodipodi%3Anodetypes%3D%22ccc%22%20/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E%0A");
} }
.listHidden #hideListButton::before{
content: "Show List";
font-size: 17px;
font-weight: 300;
color: #BBBBBB;
margin-left: 20px;
}
#hideListButton:hover{ #hideListButton:hover{
background-color: #555555; background-color: #555555;
} }
@ -643,14 +680,17 @@ .draw #hideListButton{
} }
.listHidden #hideListButton{ .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-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; ,linear-gradient(to bottom, #555555, #444444);
top: 50px; background-size: 15px, cover;
background-position: 10px center, 0 0;
top: 49px;
left: 20px; left: 20px;
border: 1px #000000 solid; border: 1px #000000 solid;
border-top: 0px; border-top: 1px #333333 solid;
width: 100px; width: 130px;
height: 30px; height: 35px;
z-index: 1000;
} }
#hideListButton:focus{ #hideListButton:focus{
@ -747,6 +787,11 @@ #about{
margin: 0px auto; margin: 0px auto;
width: 100%; width: 100%;
max-width: 1000px; max-width: 1000px;
padding: 10px;
}
#about a{
white-space: nowrap;
} }
#about h2{ #about h2{

46
web/_img/close.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="192.84375"
height="192.875"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="matrix(1.2121574,0,0,1.2121574,-20.456139,-20.460051)"
id="g3804"
style="stroke:#ffffff;stroke-opacity:1">
<g
transform="translate(-156.4375,-398.78125)"
id="layer1"
style="stroke:#ffffff;stroke-opacity:1">
<path
d="M 195.27845,552.79802 310.43583,437.64064"
id="path2985"
style="fill:none;stroke:#ffffff;stroke-width:24.74926186;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
d="M 310.43583,552.79802 195.27845,437.64064"
id="path3802"
style="fill:none;stroke:#ffffff;stroke-width:24.74926186;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

File diff suppressed because one or more lines are too long

View file

@ -126,9 +126,9 @@ function initView(){
wrapper.className += " listHidden"; wrapper.className += " listHidden";
} }
applyView(); applyView();
updateHovering(e);
render(); render();
updateLines(); updateLines();
return false;
}); });
function createInfoBlock(entry){ function createInfoBlock(entry){

View file

@ -26,7 +26,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="./_css/style.css?version=1.0.13" rel="stylesheet" type="text/css" media="all"> <link href="./_css/style.css?version=1.0.14" rel="stylesheet" type="text/css" media="all">
<title> <title>
The /r/place Atlas The /r/place Atlas
</title> </title>
@ -165,14 +165,14 @@ <h2>Tux</h2>
</div> </div>
<script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script> <!--script type="text/javascript" src="./_js/pointInPolygon.js?version=1.0"></script>
<script type="text/javascript" src="./_js/atlas.js?version=1.0.49"></script> <script type="text/javascript" src="./_js/atlas.js?version=1.0.49"></script>
<script type="text/javascript" src="./_js/view.js?version=1.0.4"></script> <script type="text/javascript" src="./_js/view.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/overlap.js?version=1.0.4"></script> <script type="text/javascript" src="./_js/overlap.js?version=1.0.4"></script>
<script type="text/javascript" src="./_js/draw.js?version=1.0.3"></script> <script type="text/javascript" src="./_js/draw.js?version=1.0.3"></script>
<script type="text/javascript" src="./_js/main.js?version=1.0.3"></script> <script type="text/javascript" src="./_js/main.js?version=1.0.3"></script-->
<!--script type="text/javascript" src="./_js/minified.js?version=1.0.5"></script--> <script type="text/javascript" src="./_js/minified.js?version=1.0.6"></script>
</body> </body>
</html> </html>