mirror of https://github.com/placeAtlas/atlas.git
Completely redesign the website's layout
This commit is contained in:
Roland Rytz
parent
0cb9e9d030
commit
f6d483bc9a
|
|
@ -32,15 +32,31 @@
|
|||
}
|
||||
|
||||
html, body{
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body{
|
||||
/*height: 100%;*/
|
||||
/*height: 100vh;*/
|
||||
/*width: 100%;*/
|
||||
/*width: 100vw;*/
|
||||
|
||||
font-family: sans;
|
||||
background-color: #333333;
|
||||
background-color: #111111;
|
||||
color: #FFFFFF;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#wrapper{
|
||||
min-height: 100%;
|
||||
min-width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
a{
|
||||
|
|
@ -52,7 +68,9 @@ a:hover{
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button{
|
||||
button,
|
||||
#aboutBackButton,
|
||||
#drawBackButton{
|
||||
background-image: linear-gradient(to bottom, #888888, #666666);
|
||||
border: 1px #000000 solid;
|
||||
color: #FFFFFF;
|
||||
|
|
@ -62,6 +80,10 @@ button{
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
button:disabled:hover{
|
||||
background-image: none;
|
||||
|
|
@ -70,8 +92,11 @@ button:disabled:hover{
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
button:hover,
|
||||
#aboutBackButton:hover,
|
||||
#drawBackButton:hover{
|
||||
background-image: linear-gradient(to bottom, #999999, #777777);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
|
|
@ -89,12 +114,19 @@ input[type="text"]{
|
|||
}
|
||||
|
||||
header{
|
||||
width: 100%;
|
||||
min-width: 360px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
background-color: #555555;
|
||||
border-right: 1px #000000 solid;
|
||||
border-bottom: 1px #000000 solid;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
header.aboutHeader{
|
||||
width: 100%;
|
||||
border-right: 0px;
|
||||
}
|
||||
|
||||
header > a{
|
||||
|
|
@ -108,7 +140,7 @@ header > a:hover{
|
|||
}
|
||||
|
||||
#logo{
|
||||
padding: 3px;
|
||||
padding: 5px;
|
||||
/*background-color: #FFFFFF;*/
|
||||
}
|
||||
|
||||
|
|
@ -124,6 +156,10 @@ header nav{
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
body.mobile header nav{
|
||||
display: none;
|
||||
}
|
||||
|
||||
header nav a{
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
|
|
@ -186,7 +222,9 @@ optgroup{
|
|||
|
||||
#linesCanvas{
|
||||
position: absolute;
|
||||
height: calc(100% - 50px);
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
height: 100%;
|
||||
/*width: calc(100% - 320px);*/
|
||||
width: 100%;
|
||||
z-index: -500;
|
||||
|
|
@ -194,7 +232,10 @@ optgroup{
|
|||
|
||||
#container{
|
||||
width: calc(100% - 320px);
|
||||
height: calc(100% - 50px);
|
||||
height: 100%;
|
||||
margin-left: 320px;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#innerContainer{
|
||||
|
|
@ -227,17 +268,17 @@ optgroup{
|
|||
#objectsList{
|
||||
width: 300px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 50px;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
padding: 0px;
|
||||
max-height: calc(100% - 50px);
|
||||
max-height: calc(100% - 40px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.object{
|
||||
background-color: #555555;
|
||||
border: 1px #000000 solid;
|
||||
margin: 10px 0px 0px 10px;
|
||||
margin: 10px 10px 0px 0px;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
|
@ -301,18 +342,30 @@ optgroup{
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#drawControls{
|
||||
width: 200px;
|
||||
max-height: 400px;
|
||||
background-color: #555555;
|
||||
border: 1px #000000 solid;
|
||||
#drawControlsContainer{
|
||||
background-color: #444444;
|
||||
border-right: 1px #000000 solid;
|
||||
width: 360px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 60px;
|
||||
bottom: 10px;
|
||||
padding: 15px;
|
||||
left: 0px;
|
||||
top: 50px;
|
||||
bottom: 0px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
#drawControls{
|
||||
width: 250px;
|
||||
padding: 15px;
|
||||
margin: 10px auto;
|
||||
background-color: #555555;
|
||||
}
|
||||
|
||||
#drawBackButton{
|
||||
margin: 10px auto 0px auto;
|
||||
display: block;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
#drawControls > *{
|
||||
|
|
@ -355,6 +408,8 @@ input[type="checkbox"]{
|
|||
|
||||
#hint{
|
||||
display: block;
|
||||
text-align: left;
|
||||
color: #DDDDDD;
|
||||
}
|
||||
|
||||
#hint p{
|
||||
|
|
@ -370,7 +425,7 @@ input[type="checkbox"]{
|
|||
}
|
||||
|
||||
#descriptionField{
|
||||
width: 168px;
|
||||
width: 220px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
|
|
@ -440,8 +495,8 @@ input[type="checkbox"]{
|
|||
|
||||
#zoomControls{
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
right: 330px;
|
||||
bottom: 10px;
|
||||
left: 370px;
|
||||
display: flex;
|
||||
width: 90px;
|
||||
}
|
||||
|
|
@ -483,38 +538,64 @@ button#zoomResetButton{
|
|||
|
||||
#entriesListContainer{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 60px;
|
||||
left: 10px;
|
||||
top: 50px;
|
||||
bottom: 0px;
|
||||
padding-bottom: 40px;
|
||||
width: 300px;
|
||||
padding-bottom: 0px;
|
||||
width: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#entriesListContainer > nav{
|
||||
text-align: center;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
#entriesListContainer > nav > a{
|
||||
background-image: linear-gradient(to bottom, #888888, #666666);
|
||||
border: 1px #000000 solid;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
width: 130px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#entriesListContainer > nav > a:last-child{
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
#entriesListContainer > nav > a:hover{
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(to bottom, #999999, #777777);
|
||||
}
|
||||
|
||||
#entriesListBackground{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
top: 50px;
|
||||
bottom: 0px;
|
||||
width: 320px;
|
||||
width: 360px;
|
||||
z-index: -600;
|
||||
background-color: #333333;
|
||||
border-left: 1px #000000 solid;
|
||||
border-right: 1px #000000 solid;
|
||||
}
|
||||
|
||||
#hideListButton{
|
||||
position: absolute;
|
||||
height: 70px;
|
||||
height: 100px;
|
||||
width: 15px;
|
||||
top: 100px;
|
||||
right: 320px;
|
||||
border-right: none;
|
||||
top: 60px;
|
||||
left: 360px;
|
||||
border-left: none;
|
||||
background-color: #444444;
|
||||
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%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%20195.27845%2C552.79802%20310.43583%2C437.58514%20195.27845%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-size: 7px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
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");
|
||||
}
|
||||
|
||||
#hideListButton:hover{
|
||||
|
|
@ -522,14 +603,14 @@ button#zoomResetButton{
|
|||
}
|
||||
|
||||
#hideListButton.reverse{
|
||||
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");
|
||||
right: 0px;
|
||||
width: 30px;
|
||||
background-color: #555555;
|
||||
}
|
||||
|
||||
#hideListButton:hover{
|
||||
background-color: #666666;
|
||||
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;
|
||||
left: 20px;
|
||||
border: 1px #000000 solid;
|
||||
border-top: 0px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#hideListButton:focus{
|
||||
|
|
@ -537,10 +618,16 @@ button#zoomResetButton{
|
|||
}
|
||||
|
||||
#entriesListControls{
|
||||
background-color: #444444;
|
||||
background-color: #555555;
|
||||
border: 1px #000000 solid;
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
color: #CCCCCC;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#entriesListControls input:focus{
|
||||
outline: none;
|
||||
border-color: #CCCCCC;
|
||||
}
|
||||
|
||||
#atlasSize{
|
||||
|
|
@ -570,10 +657,15 @@ button#zoomResetButton{
|
|||
|
||||
#entriesList{
|
||||
overflow-y: auto;
|
||||
direction: rtl;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#entriesList .object{
|
||||
margin: 0px 5px 10px 0px;
|
||||
direction: ltr;
|
||||
margin: 0px 0px 10px 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#author{
|
||||
|
|
@ -599,6 +691,17 @@ button#zoomResetButton{
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#aboutBackButton{
|
||||
margin: 20px 20px 0px 20px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
#aboutBackButtonContainer{
|
||||
/*margin: 0px auto;
|
||||
width: 100%;
|
||||
max-width: 1300px;*/
|
||||
}
|
||||
|
||||
#about{
|
||||
margin: 0px auto;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<?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="272.84375"
|
||||
height="177.59375"
|
||||
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="translate(-116.4375,-348.78125)"
|
||||
id="layer1">
|
||||
<path
|
||||
d="M 368.07001,380.00645 252.85714,495.16383 137.64427,380.00645"
|
||||
id="path2985"
|
||||
style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
126
web/_js/draw.js
126
web/_js/draw.js
|
|
@ -31,6 +31,7 @@ function initDraw(){
|
|||
var resetButton = document.getElementById("resetButton");
|
||||
var undoButton = document.getElementById("undoButton");
|
||||
var redoButton = document.getElementById("redoButton");
|
||||
var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
|
||||
|
||||
var objectInfoBox = document.getElementById("objectInfo");
|
||||
var hintText = document.getElementById("hint");
|
||||
|
|
@ -41,6 +42,10 @@ function initDraw(){
|
|||
var exportOverlay = document.getElementById("exportOverlay");
|
||||
var exportCloseButton = document.getElementById("exportCloseButton");
|
||||
|
||||
var rShiftPressed = false;
|
||||
var lShiftPressed = false;
|
||||
var shiftPressed = false;
|
||||
|
||||
var backgroundCanvas = document.createElement("canvas");
|
||||
backgroundCanvas.width = 1000;
|
||||
backgroundCanvas.height = 1000;
|
||||
|
|
@ -56,80 +61,68 @@ function initDraw(){
|
|||
var drawing = true;
|
||||
|
||||
var undoHistory = [];
|
||||
var _global_key_status = {"L_SHIFT":0, "R_SHIFT":0, buff:{}};
|
||||
|
||||
var lastPos = [0, 0];
|
||||
|
||||
render(path);
|
||||
|
||||
container.addEventListener("mousedown", function(e){
|
||||
var e_clientX = e.clientX;
|
||||
var e_clientY = e.clientY;
|
||||
if(_global_key_status.R_SHIFT || _global_key_status.L_SHIFT === 1){
|
||||
var r = lockHorV(e);
|
||||
e_clientX=r[0];
|
||||
e_clientY=r[1];
|
||||
}
|
||||
lastPos = [
|
||||
e_clientX
|
||||
,e_clientY
|
||||
e.clientX
|
||||
,e.clientY
|
||||
];
|
||||
});
|
||||
|
||||
container.addEventListener("mouseup", function(e){
|
||||
var e_clientX = e.clientX;
|
||||
var e_clientY = e.clientY;
|
||||
function getCanvasCoords(x, y){
|
||||
x = x - container.offsetLeft;
|
||||
y = y - container.offsetTop;
|
||||
|
||||
if(_global_key_status.R_SHIFT || _global_key_status.L_SHIFT === 1){
|
||||
e_clientX = lastPos[0];
|
||||
e_clientY = lastPos[1];
|
||||
}
|
||||
|
||||
if(Math.abs(lastPos[0] - e_clientX) + Math.abs(lastPos[1] - e_clientY) <= 4 && drawing){
|
||||
path.push([
|
||||
~~((e_clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
|
||||
,~~((e_clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
|
||||
]);
|
||||
render(path);
|
||||
var pos = [
|
||||
~~((x - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
|
||||
,~~((y - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
|
||||
];
|
||||
|
||||
if(shiftPressed && path.length > 0){
|
||||
var previous = path[path.length-1];
|
||||
|
||||
if(Math.abs(pos[1] - previous[1]) > Math.abs(pos[0] - previous[0]) ){
|
||||
pos[0] = previous[0];
|
||||
} else {
|
||||
pos[1] = previous[1];
|
||||
}
|
||||
}
|
||||
|
||||
return pos;
|
||||
}
|
||||
|
||||
container.addEventListener("mouseup", function(e){
|
||||
|
||||
|
||||
if(Math.abs(lastPos[0] - e.clientX) + Math.abs(lastPos[1] - e.clientY) <= 4 && drawing){
|
||||
|
||||
var coords = getCanvasCoords(e.clientX, e.clientY);
|
||||
|
||||
path.push(coords);
|
||||
render(path);
|
||||
|
||||
undoHistory = [];
|
||||
redoButton.disabled = true;
|
||||
undoButton.disabled = false;
|
||||
|
||||
|
||||
if(path.length >= 3){
|
||||
finishButton.disabled = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function lockHorV(e){
|
||||
var e_clientX = e.clientX;
|
||||
var e_clientY = e.clientY;
|
||||
var x_offset = Math.abs(e.clientX -lastPos[0]);
|
||||
var y_offset = Math.abs(e.clientY-lastPos[1]);
|
||||
var offset = y_offset - x_offset ;
|
||||
if(y_offset > x_offset ) //keep x
|
||||
e_clientX = lastPos[0];
|
||||
else if (x_offset > y_offset) //keep y
|
||||
e_clientY =lastPos[1];
|
||||
return [e_clientX,e_clientY];
|
||||
}
|
||||
|
||||
window.addEventListener("mousemove", function(e){
|
||||
var e_clientX = e.clientX;
|
||||
var e_clientY = e.clientY;
|
||||
if(!dragging && drawing){
|
||||
if(_global_key_status.R_SHIFT || _global_key_status.L_SHIFT === 1){
|
||||
var r = lockHorV(e);
|
||||
e_clientX=r[0];
|
||||
e_clientY=r[1];
|
||||
}
|
||||
var last = [
|
||||
~~((e_clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom)+0.5
|
||||
,~~((e_clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom)+0.5
|
||||
];
|
||||
render(path.concat([last]));
|
||||
|
||||
if(!dragging && drawing && path.length > 0){
|
||||
|
||||
var coords = getCanvasCoords(e.clientX, e.clientY);
|
||||
render(path.concat([coords]));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
window.addEventListener("keyup", function(e){
|
||||
|
|
@ -142,22 +135,25 @@ function initDraw(){
|
|||
} else if(e.key == "Escape"){
|
||||
exportOverlay.style.display = "none";
|
||||
} else if (e.key === "Shift" ){
|
||||
if(e.code === "ShiftRight")
|
||||
_global_key_status.R_SHIFT = 0;
|
||||
else if(e.code === "ShiftLeft")
|
||||
_global_key_status.L_SHIFT = 0;
|
||||
}
|
||||
if(e.code === "ShiftRight"){
|
||||
rShiftPressed = false;
|
||||
} else if(e.code === "ShiftLeft"){
|
||||
lShiftPressed = false;
|
||||
}
|
||||
shiftPressed = rShiftPressed || lShiftPressed;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("keydown", function(e){
|
||||
if (e.key === "Shift" ){
|
||||
if(e.code === "ShiftRight")
|
||||
_global_key_status.R_SHIFT = 1;
|
||||
else if(e.code === "ShiftLeft")
|
||||
_global_key_status.L_SHIFT = 1;
|
||||
}
|
||||
|
||||
});
|
||||
if (e.key === "Shift" ){
|
||||
if(e.code === "ShiftRight"){
|
||||
rShiftPressed = true;
|
||||
} else if(e.code === "ShiftLeft"){
|
||||
lShiftPressed = true;
|
||||
}
|
||||
shiftPressed = rShiftPressed || lShiftPressed;
|
||||
}
|
||||
});
|
||||
|
||||
finishButton.addEventListener("click", function(e){
|
||||
finish();
|
||||
|
|
@ -297,6 +293,7 @@ function initDraw(){
|
|||
undoButton.style.display = "none";
|
||||
redoButton.style.display = "none";
|
||||
resetButton.style.display = "none";
|
||||
highlightUnchartedLabel.style.display = "none";
|
||||
document.getElementById("nameField").focus();
|
||||
}
|
||||
|
||||
|
|
@ -314,6 +311,7 @@ function initDraw(){
|
|||
undoButton.style.display = "block";
|
||||
redoButton.style.display = "block";
|
||||
resetButton.style.display = "block";
|
||||
highlightUnchartedLabel.style.display = "block";
|
||||
|
||||
document.getElementById("nameField").value = "";
|
||||
document.getElementById("descriptionField").value = "";
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
========================================================================
|
||||
*/
|
||||
|
||||
var mobile = false;
|
||||
|
||||
var innerContainer = document.getElementById("innerContainer");
|
||||
var container = document.getElementById("container");
|
||||
|
|
@ -30,11 +31,13 @@ var canvas = document.getElementById("highlightCanvas");
|
|||
var context = canvas.getContext("2d");
|
||||
|
||||
var zoom = 1;
|
||||
var zoomOrigin = [0, 50];
|
||||
var zoomOrigin = [0, 0];
|
||||
|
||||
var dragging = false;
|
||||
var lastPosition = [0, 0];
|
||||
|
||||
var viewportSize = [0, 0];
|
||||
|
||||
function applyView(){
|
||||
|
||||
//console.log(zoom);
|
||||
|
|
@ -42,14 +45,19 @@ function applyView(){
|
|||
innerContainer.style.height = (zoom*1000)+"px";
|
||||
innerContainer.style.width = (zoom*1000)+"px";
|
||||
|
||||
innerContainer.style.left = (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0])+"px";
|
||||
innerContainer.style.top = (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1])+"px";
|
||||
innerContainer.style.left = (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft)+"px";
|
||||
innerContainer.style.top = (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop)+"px";
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
function init(){
|
||||
|
||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
|
||||
zoomOrigin = [0, 0];
|
||||
applyView();
|
||||
|
||||
var mode = "view";
|
||||
|
||||
var args = window.location.search;
|
||||
|
|
@ -63,33 +71,38 @@ function init(){
|
|||
}
|
||||
|
||||
if(mode=="view"){
|
||||
document.getElementById("viewLink").className = "current";
|
||||
/*document.getElementById("viewLink").className = "current";
|
||||
document.getElementById("drawLink").className = "";
|
||||
document.getElementById("aboutLink").className = "";
|
||||
document.getElementById("aboutLink").className = "";*/
|
||||
|
||||
document.getElementById("container").style.width = "calc(100% - 320px)";
|
||||
document.getElementById("drawControls").style.display = "none";
|
||||
document.getElementById("drawControlsContainer").style.display = "none";
|
||||
document.getElementById("entriesListContainer").style.display = "flex";
|
||||
document.getElementById("entriesListBackground").style.display = "block";
|
||||
document.getElementById("author").style.right = "10px";
|
||||
document.getElementById("author").style.width = "300px";
|
||||
document.getElementById("zoomControls").style.right = "330px";
|
||||
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();
|
||||
|
||||
} else if(mode=="draw"){
|
||||
document.getElementById("viewLink").className = "";
|
||||
/*document.getElementById("viewLink").className = "";
|
||||
document.getElementById("drawLink").className = "current";
|
||||
document.getElementById("aboutLink").className = "";
|
||||
|
||||
document.getElementById("container").style.width = "100%";
|
||||
document.getElementById("drawControls").style.display = "block";
|
||||
document.getElementById("aboutLink").className = "";*/
|
||||
|
||||
document.getElementById("drawControlsContainer").style.display = "block";
|
||||
document.getElementById("entriesListContainer").style.display = "none";
|
||||
document.getElementById("entriesListBackground").style.display = "none";
|
||||
document.getElementById("author").style.right = "10px";
|
||||
document.getElementById("author").style.width = "auto";
|
||||
document.getElementById("zoomControls").style.right = "10px";
|
||||
document.getElementById("hideListButton").style.display = "none";
|
||||
|
||||
initDraw();
|
||||
|
|
@ -97,8 +110,6 @@ function init(){
|
|||
window.location = "./about.html";
|
||||
}
|
||||
|
||||
applyView();
|
||||
|
||||
function zoomOut(x, y){
|
||||
|
||||
zoomOrigin[0] += x - container.clientWidth/2;//((x/container.clientWidth)*2-1);
|
||||
|
|
@ -135,7 +146,7 @@ function init(){
|
|||
|
||||
document.getElementById("zoomResetButton").addEventListener("click", function(e){
|
||||
zoom = 1;
|
||||
zoomOrigin = [0, 50];
|
||||
zoomOrigin = [0, 0];
|
||||
applyView();
|
||||
});
|
||||
|
||||
|
|
@ -187,6 +198,12 @@ function init(){
|
|||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", applyView);
|
||||
window.addEventListener("resize", function(){
|
||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
|
||||
|
||||
|
||||
applyView();
|
||||
});
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,8 +73,6 @@ function initView(){
|
|||
if(args){
|
||||
id = args.split("id=")[1];
|
||||
if(id){
|
||||
zoom = 4;
|
||||
applyView();
|
||||
highlightEntryFromUrl();
|
||||
}
|
||||
}
|
||||
|
|
@ -105,18 +103,18 @@ function initView(){
|
|||
entriesListShown = !entriesListShown;
|
||||
if(entriesListShown){
|
||||
hideListButton.className = "";
|
||||
document.getElementById("container").style.width = "calc(100% - 320px)";
|
||||
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("author").style.width = "300px";
|
||||
document.getElementById("zoomControls").style.right = "330px";
|
||||
document.getElementById("zoomControls").style.left = "370px";
|
||||
} 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("author").style.width = "auto";
|
||||
document.getElementById("zoomControls").style.right = "10px";
|
||||
document.getElementById("zoomControls").style.left = "10px";
|
||||
}
|
||||
applyView();
|
||||
updateHovering(e);
|
||||
|
|
@ -175,10 +173,19 @@ function initView(){
|
|||
objectsContainer.innerHTML = "";
|
||||
objectsContainer.appendChild(infoElement);
|
||||
|
||||
//console.log(entry.center[0]);
|
||||
//console.log(entry.center[1]);
|
||||
|
||||
zoom = 4;
|
||||
applyView();
|
||||
|
||||
zoomOrigin = [
|
||||
(innerContainer.clientWidth/2 - entry.center[0]* zoom)
|
||||
,(innerContainer.clientWidth/2 + 50 - entry.center[1]* zoom)
|
||||
]
|
||||
innerContainer.clientWidth/2 - entry.center[0]* zoom// + container.offsetLeft
|
||||
,innerContainer.clientHeight/2 - entry.center[1]* zoom// + container.offsetTop
|
||||
];
|
||||
|
||||
//console.log(zoomOrigin);
|
||||
|
||||
applyView();
|
||||
hovered = [entry];
|
||||
render();
|
||||
|
|
@ -191,8 +198,8 @@ function initView(){
|
|||
function updateHovering(e){
|
||||
if(!dragging && !fixed){
|
||||
var pos = [
|
||||
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0]))/zoom
|
||||
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1]))/zoom
|
||||
(e.clientX - (container.clientWidth/2 - innerContainer.clientWidth/2 + zoomOrigin[0] + container.offsetLeft))/zoom
|
||||
,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
|
||||
];
|
||||
|
||||
if(pos[0] <= 1100 && pos[0] >= -100 && pos[0] <= 1100 && pos[0] >= -100){
|
||||
|
|
@ -354,9 +361,13 @@ function initView(){
|
|||
if(!fixed){
|
||||
objectsContainer.innerHTML = "";
|
||||
zoomOrigin = [
|
||||
(innerContainer.clientWidth/2 - this.entry.center[0]* zoom)
|
||||
,(innerContainer.clientWidth/2 + 50 - this.entry.center[1]* zoom)
|
||||
innerContainer.clientWidth/2 - this.entry.center[0]* zoom// + container.offsetLeft
|
||||
,innerContainer.clientHeight/2 - this.entry.center[1]* zoom// + container.offsetTop
|
||||
]
|
||||
|
||||
//console.log(zoomOrigin);
|
||||
|
||||
|
||||
applyView();
|
||||
hovered = [this.entry];
|
||||
render();
|
||||
|
|
@ -474,11 +485,11 @@ function initView(){
|
|||
//linesContext.moveTo(element.offsetLeft + element.clientWidth - 10, element.offsetTop + 20);
|
||||
linesContext.moveTo(
|
||||
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
|
||||
,element.getBoundingClientRect().top + document.documentElement.scrollTop
|
||||
,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
|
||||
);
|
||||
linesContext.lineTo(
|
||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft// + container.clientWidth/2 - innerContainer.clientWidth/2
|
||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop - 50// + container.clientHeight/2 - innerContainer.clientHeight/2
|
||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
|
||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
|
||||
);
|
||||
linesContext.stroke();
|
||||
}
|
||||
|
|
@ -492,11 +503,11 @@ function initView(){
|
|||
linesContext.beginPath();
|
||||
linesContext.moveTo(
|
||||
element.getBoundingClientRect().left + document.documentElement.scrollLeft + element.clientWidth/2
|
||||
,element.getBoundingClientRect().top + document.documentElement.scrollTop
|
||||
,element.getBoundingClientRect().top + document.documentElement.scrollTop + 20
|
||||
);
|
||||
linesContext.lineTo(
|
||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft// + container.clientWidth/2 - innerContainer.clientWidth/2
|
||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop - 50// + container.clientHeight/2 - innerContainer.clientHeight/2
|
||||
~~(hovered[i].center[0]*zoom) + innerContainer.offsetLeft
|
||||
,~~(hovered[i].center[1]*zoom) + innerContainer.offsetTop
|
||||
);
|
||||
linesContext.stroke();
|
||||
}
|
||||
|
|
|
|||
1456
web/about.html
1456
web/about.html
File diff suppressed because it is too large
Load Diff
208
web/index.html
208
web/index.html
|
|
@ -36,114 +36,142 @@
|
|||
<meta name="keywords" content="reddit, /r/place, april">
|
||||
<meta name="application-name" content="/r/place Atlas">
|
||||
<meta name="robots" content="index, follow">
|
||||
|
||||
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="./">
|
||||
<img id="logo" src="./_img/logo-100x100.png" height="50" width="50" alt="">
|
||||
<h1>The /r/place Atlas</h1>
|
||||
</a>
|
||||
<nav>
|
||||
<a id="viewLink" href="./" class="current">View</a>
|
||||
<a id="drawLink" href="./?mode=draw">Draw</a>
|
||||
<a id="aboutLink" href="./about.html">About</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="container">
|
||||
<canvas id="linesCanvas"></canvas>
|
||||
<div id="innerContainer">
|
||||
<canvas id="highlightCanvas" width="1000" height="1000"></canvas>
|
||||
<img id="image" src="./_img/place-indexed.png" width="1000" height="1000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
|
||||
</div>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<header>
|
||||
<a href="./">
|
||||
<img id="logo" src="./_img/logo-100x100.png" height="50" width="50" alt="">
|
||||
<h1>The /r/place Atlas</h1>
|
||||
</a>
|
||||
<!--nav>
|
||||
<a id="viewLink" href="./" class="current">View</a>
|
||||
<a id="drawLink" href="./?mode=draw">Draw</a>
|
||||
<a id="aboutLink" href="./about.html">About</a>
|
||||
</nav-->
|
||||
</header>
|
||||
|
||||
<div id="entriesListContainer">
|
||||
<div id="entriesListControls">
|
||||
<input id="searchList" type="text" placeholder="Search...">
|
||||
<span id="atlasSize"></span>
|
||||
<div id="sortContainer"><label>Sort:</label>
|
||||
<select id="sort">
|
||||
<option value="alphaAsc" selected>↓ Alphabetical</option>
|
||||
<option value="alphaDesc">↑ Alphabetical</option>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="oldest">Oldest</option>
|
||||
</select>
|
||||
<!--header class="mobile">
|
||||
<a href="./">
|
||||
<img id="logo" src="./_img/logo-100x100.png" height="50" width="50" alt="">
|
||||
<h1>The /r/place Atlas</h1>
|
||||
</a>
|
||||
<nav>
|
||||
<a id="viewLink" href="./" class="current">View</a>
|
||||
<a id="drawLink" href="./?mode=draw">Draw</a>
|
||||
<a id="aboutLink" href="./about.html">About</a>
|
||||
</nav>
|
||||
</header-->
|
||||
|
||||
<div id="container">
|
||||
<canvas id="linesCanvas"></canvas>
|
||||
<div id="innerContainer">
|
||||
<canvas id="highlightCanvas" width="1000" height="1000"></canvas>
|
||||
<img id="image" src="./_img/place-indexed.png" width="1000" height="1000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
|
||||
</div>
|
||||
</div>
|
||||
<div id="entriesList">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="entriesListBackground"></div>
|
||||
|
||||
<button id="hideListButton"></button>
|
||||
|
||||
<div id="zoomControls">
|
||||
<button title="Zoom In" id="zoomInButton"></button>
|
||||
<button title="Reset View" id="zoomResetButton"></button>
|
||||
<button title="Zoom Out" id="zoomOutButton"></button>
|
||||
</div>
|
||||
|
||||
<div id="drawControls">
|
||||
<div>
|
||||
<button id="undoButton" disabled>Undo</button>
|
||||
<button disabled id="redoButton">Redo</button>
|
||||
</div>
|
||||
<button disabled id="finishButton">Finish (Enter)</button>
|
||||
<button id="resetButton">Reset</button>
|
||||
<label title="Highlight uncharted areas of the map" class="checkboxLabel"><input type="checkbox" id="highlightUncharted" checked> Highlight Empty</label>
|
||||
<div id="hint">
|
||||
<p>Click anywhere on the image to start drawing a shape.</p>
|
||||
<p>When you're happy with the result, click the "Finish" button above or press the Enter key.</p>
|
||||
<p>You can then add more information about your object.</p>
|
||||
</div>
|
||||
<div id="objectInfo">
|
||||
<label for="nameField">Name</label>
|
||||
<input id="nameField" type="text" value="" placeholder="A short title">
|
||||
<label for="descriptionField">Description</label>
|
||||
<textarea id="descriptionField" placeholder="A short description to be understood by everyone"></textarea>
|
||||
<label for="websiteField">Website</label>
|
||||
<input id="websiteField" type="text" value="" placeholder="https://example.com">
|
||||
<label for="subredditField">Subreddit</label>
|
||||
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
||||
<div id="infoButtons">
|
||||
<button id="cancelButton">Cancel</button>
|
||||
<button id="exportButton">OK</button>
|
||||
<div id="entriesListContainer">
|
||||
<nav>
|
||||
<a id="aboutLink" href="./about.html">About</a>
|
||||
<a id="drawLink" href="./?mode=draw">Contribute</a>
|
||||
</nav>
|
||||
<div id="entriesListControls">
|
||||
<input autofocus id="searchList" type="text" placeholder="Search...">
|
||||
<span id="atlasSize"></span>
|
||||
<div id="sortContainer"><label>Sort:</label>
|
||||
<select id="sort">
|
||||
<option value="alphaAsc" selected>↓ Alphabetical</option>
|
||||
<option value="alphaDesc">↑ Alphabetical</option>
|
||||
<option value="newest">Newest</option>
|
||||
<option value="oldest">Oldest</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="entriesList">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="entriesListBackground"></div>
|
||||
|
||||
<div id="objectsList">
|
||||
<!--div class="object">
|
||||
<h2>Tux</h2>
|
||||
<p>Tux is the official mascot of the Linux operating system.</p>
|
||||
<a href="Website">Website</a>
|
||||
<a href="">/r/linux</a>
|
||||
</div-->
|
||||
</div>
|
||||
<button id="hideListButton"></button>
|
||||
|
||||
<div id="exportOverlay" class="overlay">
|
||||
<div id="exportWindow">
|
||||
<p>Please copy the text below and submit it as a<br>
|
||||
new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas/">/r/placeAtlas</a> on Reddit.</p>
|
||||
<p>I will then check it and add it to the atlas.</p>
|
||||
<textarea cols="50" rows="5" id="exportString"></textarea>
|
||||
<button id="exportCloseButton">Done</button>
|
||||
<div id="zoomControls">
|
||||
<button title="Zoom In" id="zoomInButton"></button>
|
||||
<button title="Reset View" id="zoomResetButton"></button>
|
||||
<button title="Zoom Out" id="zoomOutButton"></button>
|
||||
</div>
|
||||
|
||||
<div id="drawControlsContainer">
|
||||
<a id="drawBackButton" href="./">< Back to the Atlas</a>
|
||||
<div id="drawControls">
|
||||
<div>
|
||||
<button id="undoButton" disabled>Undo</button>
|
||||
<button disabled id="redoButton">Redo</button>
|
||||
</div>
|
||||
<button disabled id="finishButton">Finish (Enter)</button>
|
||||
<button id="resetButton">Reset</button>
|
||||
<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel">
|
||||
<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
|
||||
</label>
|
||||
<div id="objectInfo">
|
||||
<label for="nameField">Name</label>
|
||||
<input id="nameField" type="text" value="" placeholder="A short title">
|
||||
<label for="descriptionField">Description</label>
|
||||
<textarea id="descriptionField" placeholder="A short description to be understood by everyone"></textarea>
|
||||
<label for="websiteField">Website</label>
|
||||
<input id="websiteField" type="text" value="" placeholder="https://example.com">
|
||||
<label for="subredditField">Subreddit</label>
|
||||
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
||||
<div id="infoButtons">
|
||||
<button id="cancelButton">Cancel</button>
|
||||
<button id="exportButton">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="hint">
|
||||
<p>You can suggest new entries to the Atlas for art that isn't mapped yet.</p>
|
||||
<p>Please read <a href="https://reddit.com/r/placeAtlas/comments/63afic/how_to_contribute/" target="_blank">this reddit post</a> for instructions.</p>
|
||||
<p>Click anywhere on the image to start drawing a shape.
|
||||
When you're happy with the result, click the "Finish" button above or press the Enter key.</p>
|
||||
<p>You can then add more information about your object.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="objectsList">
|
||||
<!--div class="object">
|
||||
<h2>Tux</h2>
|
||||
<p>Tux is the official mascot of the Linux operating system.</p>
|
||||
<a href="Website">Website</a>
|
||||
<a href="">/r/linux</a>
|
||||
</div-->
|
||||
</div>
|
||||
|
||||
<div id="exportOverlay" class="overlay">
|
||||
<div id="exportWindow">
|
||||
<p>Please copy the text below and submit it as a<br>
|
||||
new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas/">/r/placeAtlas</a> on Reddit.</p>
|
||||
<p>I will then check it and add it to the atlas.</p>
|
||||
<textarea cols="50" rows="5" id="exportString"></textarea>
|
||||
<button id="exportCloseButton">Done</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="author">
|
||||
Code by <a href="/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="author">
|
||||
Code by <a href="/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.
|
||||
</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/view.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/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.4"></script>
|
||||
<!--script type="text/javascript" src="./_js/minified.js?version=1.0.4"></script-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue