MirrorHub
/
atlas
mirror of https://github.com/placeAtlas/atlas.git
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make entries list collapsible

This commit is contained in:
Roland Rytz 2017-04-06 11:44:50 +02:00
parent acd6cc6997
commit f335a5f7e7
7 changed files with 235 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
users.py
View File

@ -15,6 +15,7 @@ users = set()
# Manual entries:
users.add("MoonShinez");
users.add("Shovel_Ship");
for submission in reddit.subreddit('placeAtlas').new(limit=10000):
users.add(submission.author.name)

54
web/_css/style.css
View File

@ -176,12 +176,13 @@ optgroup{
#linesCanvas{
position: absolute;
height: calc(100% - 50px);
/*width: calc(100% - 320px);*/
width: 100%;
z-index: -500;
}
#container{
width: 100%;
width: calc(100% - 320px);
height: calc(100% - 50px);
}
@ -473,12 +474,57 @@ button#zoomResetButton{
position: absolute;
right: 10px;
top: 60px;
bottom: 40px;
bottom: 0px;
padding-bottom: 40px;
width: 300px;
display: flex;
flex-direction: column;
}
#entriesListBackground{
position: absolute;
right: 0px;
top: 50px;
bottom: 0px;
width: 320px;
z-index: -600;
background-color: #333333;
border-left: 1px #000000 solid;
}
#hideListButton{
position: absolute;
height: 70px;
width: 15px;
top: 100px;
right: 320px;
border-right: none;
background-color: #444444;
background-image: url(../_img/arrow-right.svg?version=1.0.1);
background-size: 7px;
background-repeat: no-repeat;
background-position: center;
}
#hideListButton:hover{
background-color: #555555;
}
#hideListButton.reverse{
background-image: url(../_img/arrow-left.svg?version=1.0.1);
right: 0px;
width: 30px;
background-color: #555555;
}
#hideListButton:hover{
background-color: #666666;
}
#hideListButton:focus{
outline: none;
}
#entriesListControls{
background-color: #444444;
border: 1px #000000 solid;
@ -523,9 +569,11 @@ button#zoomResetButton{
position: absolute;
bottom: 10px;
right: 10px;
background-color: rgba(128, 128, 128, 0.2);
background-color: #555555;
padding: 3px;
font-size: 12px;
z-index: 1100;
text-align: center;
}
#aboutContainer{

66
web/_img/arrow-left.svg Normal file
View File

@ -0,0 +1,66 @@
<?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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="165.15738"
height="260.42575"
id="svg2"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="arrow-right.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.669697"
inkscape:cx="87.132045"
inkscape:cy="156.56585"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="10"
fit-margin-right="10"
fit-margin-bottom="0"
inkscape:window-width="1596"
inkscape:window-height="877"
inkscape:window-x="0"
inkscape:window-y="19"
inkscape:window-maximized="0" />
<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
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-170.27845,-307.37227)">
<path
style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="M 310.43583,552.79802 195.27845,437.58514 310.43583,322.37227"
id="path2985"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

66
web/_img/arrow-right.svg Normal file
View File

@ -0,0 +1,66 @@
<?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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="165.15738"
height="260.42575"
id="svg2"
version="1.1"
inkscape:version="0.48.5 r10040"
sodipodi:docname="arrow-right.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.669697"
inkscape:cx="87.132045"
inkscape:cy="156.56585"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="10"
fit-margin-right="10"
fit-margin-bottom="0"
inkscape:window-width="1596"
inkscape:window-height="877"
inkscape:window-x="0"
inkscape:window-y="19"
inkscape:window-maximized="0" />
<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
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-170.27845,-307.37227)">
<path
style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="M 195.27845,552.79802 310.43583,437.58514 195.27845,322.37227"
id="path2985"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

20
web/_js/main.js
View File

@ -66,11 +66,16 @@ function init(){
document.getElementById("viewLink").className = "current";
document.getElementById("drawLink").className = "";
document.getElementById("aboutLink").className = "";
document.getElementById("container").style.width = "calc(100% - 320px)";
document.getElementById("drawControls").style.display = "none";
document.getElementById("aboutContainer").style.display = "none";
document.getElementById("entriesListContainer").style.display = "flex";
//document.getElementById("author").style.right = "320px";
document.getElementById("zoomControls").style.right = "320px";
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";
initView();
@ -78,11 +83,16 @@ function init(){
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("aboutContainer").style.display = "none";
document.getElementById("entriesListContainer").style.display = "none";
//document.getElementById("author").style.right = "10px";
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();
} else if(mode=="about"){
@ -92,7 +102,9 @@ function init(){
document.getElementById("drawControls").style.display = "none";
document.getElementById("aboutContainer").style.display = "block";
document.getElementById("entriesListContainer").style.display = "none";
//document.getElementById("author").style.right = "10px";
document.getElementById("entriesListBackground").style.display = "none";
document.getElementById("author").style.right = "25px";
document.getElementById("author").style.width = "auto";
document.getElementById("zoomControls").style.right = "10px";
}

35
web/_js/view.js
View File

@ -38,6 +38,8 @@ function initView(){
var filterInput = document.getElementById("searchList");
var entriesList = document.getElementById("entriesList");
var hideListButton = document.getElementById("hideListButton");
var entriesListShown = true;
var entriesLimit = 50;
var entriesOffset = 0;
@ -98,6 +100,29 @@ function initView(){
buildObjectsList(filterInput.value.toLowerCase());
});
hideListButton.addEventListener("click", function(e){
entriesListShown = !entriesListShown;
if(entriesListShown){
hideListButton.className = "";
document.getElementById("container").style.width = "calc(100% - 320px)";
document.getElementById("entriesListContainer").style.display = "flex";
document.getElementById("entriesListBackground").style.display = "block";
document.getElementById("author").style.width = "300px";
document.getElementById("zoomControls").style.right = "330px";
} else {
hideListButton.className = "reverse";
document.getElementById("container").style.width = "100%";
document.getElementById("entriesListContainer").style.display = "none";
document.getElementById("entriesListBackground").style.display = "none";
document.getElementById("author").style.width = "auto";
document.getElementById("zoomControls").style.right = "10px";
}
applyView();
updateHovering(e);
render();
updateLines();
});
function createInfoBlock(entry){
var element = document.createElement("div");
@ -234,7 +259,7 @@ function initView(){
backgroundContext.closePath();
backgroundContext.strokeStyle = "rgba(255, 255, 255, 1)";
backgroundContext.strokeStyle = "rgba(255, 255, 255, 0.8)";
backgroundContext.stroke();
}
}
@ -436,10 +461,10 @@ function initView(){
function updateLines(){
linesCanvas.width = container.clientWidth;
linesCanvas.height = container.clientHeight;
linesCanvas.width = linesCanvas.clientWidth;
linesCanvas.height = linesCanvas.clientHeight;
linesContext.lineCap = "round";
linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 1)*2;
linesContext.lineWidth = Math.max(Math.min(zoom*1.5, 16*1.5), 6);
linesContext.strokeStyle = "#000000";
for(var i = 0; i < hovered.length; i++){
@ -458,7 +483,7 @@ function initView(){
linesContext.stroke();
}
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 1)*2;
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4);
linesContext.strokeStyle = "#FFFFFF";
for(var i = 0; i < hovered.length; i++){

6
web/index.html
View File

@ -73,6 +73,9 @@
</div>
</div>
<div id="entriesListBackground"></div>
<button id="hideListButton"></button>
<div id="zoomControls">
<button title="Zoom In" id="zoomInButton"></button>
@ -142,7 +145,7 @@
<p>To do so, head over to the <a href="./?mode=draw">Draw tab</a>, draw the outline of the piece you want to submit, and post it on the <a href="https://www.reddit.com/r/placeAtlas/">/r/placeAtlas</a> subreddit.</p>
<p>This is also the place to submit all bug reports, feature requests or questions.</p>
<h2>Contributors</h2>
<p>The Atlas would not have been possible without the help of the following 698 reddit users.</p>
<p>The Atlas would not have been possible without the help of the following 699 reddit users.</p>
<p>Thank you to everyone who contributed.</p>
<div id="contributors">
<a href="https://reddit.com/user/-Chowder-" target="_blank">-Chowder-</a>
@ -675,6 +678,7 @@
<a href="https://reddit.com/user/SertyDK" target="_blank">SertyDK</a>
<a href="https://reddit.com/user/shahbaz_man" target="_blank">shahbaz_man</a>
<a href="https://reddit.com/user/Sheepolution" target="_blank">Sheepolution</a>
<a href="https://reddit.com/user/Shovel_Ship" target="_blank">Shovel_Ship</a>
<a href="https://reddit.com/user/Sigma1977" target="_blank">Sigma1977</a>
<a href="https://reddit.com/user/sigmaeni" target="_blank">sigmaeni</a>
<a href="https://reddit.com/user/Silan28" target="_blank">Silan28</a>