mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-26 12:09:00 +02:00
Make entries list collapsible
This commit is contained in:
parent
acd6cc6997
commit
f335a5f7e7
7 changed files with 235 additions and 13 deletions
1
users.py
1
users.py
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
# Manual entries:
|
# Manual entries:
|
||||||
users.add("MoonShinez");
|
users.add("MoonShinez");
|
||||||
|
users.add("Shovel_Ship");
|
||||||
|
|
||||||
for submission in reddit.subreddit('placeAtlas').new(limit=10000):
|
for submission in reddit.subreddit('placeAtlas').new(limit=10000):
|
||||||
users.add(submission.author.name)
|
users.add(submission.author.name)
|
||||||
|
|
|
@ -176,12 +176,13 @@ optgroup{
|
||||||
#linesCanvas{
|
#linesCanvas{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
|
/*width: calc(100% - 320px);*/
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: -500;
|
z-index: -500;
|
||||||
}
|
}
|
||||||
|
|
||||||
#container{
|
#container{
|
||||||
width: 100%;
|
width: calc(100% - 320px);
|
||||||
height: calc(100% - 50px);
|
height: calc(100% - 50px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -473,12 +474,57 @@ #entriesListContainer{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 60px;
|
top: 60px;
|
||||||
bottom: 40px;
|
bottom: 0px;
|
||||||
|
padding-bottom: 40px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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{
|
#entriesListControls{
|
||||||
background-color: #444444;
|
background-color: #444444;
|
||||||
border: 1px #000000 solid;
|
border: 1px #000000 solid;
|
||||||
|
@ -523,9 +569,11 @@ #author{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
background-color: rgba(128, 128, 128, 0.2);
|
background-color: #555555;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
z-index: 1100;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#aboutContainer{
|
#aboutContainer{
|
||||||
|
|
66
web/_img/arrow-left.svg
Normal file
66
web/_img/arrow-left.svg
Normal 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>
|
After Width: | Height: | Size: 2 KiB |
66
web/_img/arrow-right.svg
Normal file
66
web/_img/arrow-right.svg
Normal 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>
|
After Width: | Height: | Size: 2 KiB |
|
@ -66,11 +66,16 @@ function init(){
|
||||||
document.getElementById("viewLink").className = "current";
|
document.getElementById("viewLink").className = "current";
|
||||||
document.getElementById("drawLink").className = "";
|
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("drawControls").style.display = "none";
|
||||||
document.getElementById("aboutContainer").style.display = "none";
|
document.getElementById("aboutContainer").style.display = "none";
|
||||||
document.getElementById("entriesListContainer").style.display = "flex";
|
document.getElementById("entriesListContainer").style.display = "flex";
|
||||||
//document.getElementById("author").style.right = "320px";
|
document.getElementById("entriesListBackground").style.display = "block";
|
||||||
document.getElementById("zoomControls").style.right = "320px";
|
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();
|
initView();
|
||||||
|
|
||||||
|
@ -78,11 +83,16 @@ function init(){
|
||||||
document.getElementById("viewLink").className = "";
|
document.getElementById("viewLink").className = "";
|
||||||
document.getElementById("drawLink").className = "current";
|
document.getElementById("drawLink").className = "current";
|
||||||
document.getElementById("aboutLink").className = "";
|
document.getElementById("aboutLink").className = "";
|
||||||
|
|
||||||
|
document.getElementById("container").style.width = "100%";
|
||||||
document.getElementById("drawControls").style.display = "block";
|
document.getElementById("drawControls").style.display = "block";
|
||||||
document.getElementById("aboutContainer").style.display = "none";
|
document.getElementById("aboutContainer").style.display = "none";
|
||||||
document.getElementById("entriesListContainer").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("zoomControls").style.right = "10px";
|
||||||
|
document.getElementById("hideListButton").style.display = "none";
|
||||||
|
|
||||||
initDraw();
|
initDraw();
|
||||||
} else if(mode=="about"){
|
} else if(mode=="about"){
|
||||||
|
@ -92,7 +102,9 @@ function init(){
|
||||||
document.getElementById("drawControls").style.display = "none";
|
document.getElementById("drawControls").style.display = "none";
|
||||||
document.getElementById("aboutContainer").style.display = "block";
|
document.getElementById("aboutContainer").style.display = "block";
|
||||||
document.getElementById("entriesListContainer").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 = "25px";
|
||||||
|
document.getElementById("author").style.width = "auto";
|
||||||
document.getElementById("zoomControls").style.right = "10px";
|
document.getElementById("zoomControls").style.right = "10px";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -38,6 +38,8 @@ function initView(){
|
||||||
var filterInput = document.getElementById("searchList");
|
var filterInput = document.getElementById("searchList");
|
||||||
|
|
||||||
var entriesList = document.getElementById("entriesList");
|
var entriesList = document.getElementById("entriesList");
|
||||||
|
var hideListButton = document.getElementById("hideListButton");
|
||||||
|
var entriesListShown = true;
|
||||||
|
|
||||||
var entriesLimit = 50;
|
var entriesLimit = 50;
|
||||||
var entriesOffset = 0;
|
var entriesOffset = 0;
|
||||||
|
@ -98,6 +100,29 @@ function initView(){
|
||||||
buildObjectsList(filterInput.value.toLowerCase());
|
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){
|
function createInfoBlock(entry){
|
||||||
var element = document.createElement("div");
|
var element = document.createElement("div");
|
||||||
|
@ -234,7 +259,7 @@ function initView(){
|
||||||
|
|
||||||
backgroundContext.closePath();
|
backgroundContext.closePath();
|
||||||
|
|
||||||
backgroundContext.strokeStyle = "rgba(255, 255, 255, 1)";
|
backgroundContext.strokeStyle = "rgba(255, 255, 255, 0.8)";
|
||||||
backgroundContext.stroke();
|
backgroundContext.stroke();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -436,10 +461,10 @@ function initView(){
|
||||||
|
|
||||||
function updateLines(){
|
function updateLines(){
|
||||||
|
|
||||||
linesCanvas.width = container.clientWidth;
|
linesCanvas.width = linesCanvas.clientWidth;
|
||||||
linesCanvas.height = container.clientHeight;
|
linesCanvas.height = linesCanvas.clientHeight;
|
||||||
linesContext.lineCap = "round";
|
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";
|
linesContext.strokeStyle = "#000000";
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
for(var i = 0; i < hovered.length; i++){
|
||||||
|
@ -458,7 +483,7 @@ function initView(){
|
||||||
linesContext.stroke();
|
linesContext.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 1)*2;
|
linesContext.lineWidth = Math.max(Math.min(zoom, 16), 4);
|
||||||
linesContext.strokeStyle = "#FFFFFF";
|
linesContext.strokeStyle = "#FFFFFF";
|
||||||
|
|
||||||
for(var i = 0; i < hovered.length; i++){
|
for(var i = 0; i < hovered.length; i++){
|
||||||
|
|
|
@ -73,6 +73,9 @@ <h1>The /r/place Atlas</h1>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="entriesListBackground"></div>
|
||||||
|
|
||||||
|
<button id="hideListButton"></button>
|
||||||
|
|
||||||
<div id="zoomControls">
|
<div id="zoomControls">
|
||||||
<button title="Zoom In" id="zoomInButton"></button>
|
<button title="Zoom In" id="zoomInButton"></button>
|
||||||
|
@ -142,7 +145,7 @@ <h2>How to contribute</h2>
|
||||||
<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>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>
|
<p>This is also the place to submit all bug reports, feature requests or questions.</p>
|
||||||
<h2>Contributors</h2>
|
<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>
|
<p>Thank you to everyone who contributed.</p>
|
||||||
<div id="contributors">
|
<div id="contributors">
|
||||||
<a href="https://reddit.com/user/-Chowder-" target="_blank">-Chowder-</a>
|
<a href="https://reddit.com/user/-Chowder-" target="_blank">-Chowder-</a>
|
||||||
|
@ -675,6 +678,7 @@ <h2>Contributors</h2>
|
||||||
<a href="https://reddit.com/user/SertyDK" target="_blank">SertyDK</a>
|
<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/shahbaz_man" target="_blank">shahbaz_man</a>
|
||||||
<a href="https://reddit.com/user/Sheepolution" target="_blank">Sheepolution</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/Sigma1977" target="_blank">Sigma1977</a>
|
||||||
<a href="https://reddit.com/user/sigmaeni" target="_blank">sigmaeni</a>
|
<a href="https://reddit.com/user/sigmaeni" target="_blank">sigmaeni</a>
|
||||||
<a href="https://reddit.com/user/Silan28" target="_blank">Silan28</a>
|
<a href="https://reddit.com/user/Silan28" target="_blank">Silan28</a>
|
||||||
|
|
Loading…
Reference in a new issue