fix styling for mobile
- remove overlays on small screens - minimise control on small screens - add popup on zooming to area (since touchscreen devices have no 'hover') - fix navigation menu for small screens - add footer with licensing info - fix table display on small screens fixes #4 fixes #11
This commit is contained in:
parent
259a29be22
commit
bd664dd17d
|
@ -15,7 +15,6 @@
|
||||||
<h2>About Library Map</h2>
|
<h2>About Library Map</h2>
|
||||||
<p id="beta">Beta!</p>
|
<p id="beta">Beta!</p>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
|
@ -25,6 +24,8 @@
|
||||||
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
<section class="info-page">
|
<section class="info-page">
|
||||||
<h2 id="about-library-map">About Library Map</h2>
|
<h2 id="about-library-map">About Library Map</h2>
|
||||||
<p>This project collects and maps data from public libraries across the Australia and the external Australian Territories of Christmas Island and the Cocos (Keeling) Islands. In the long term I hope to include more data that can be combined and cross-referenced, e.g. library funding from local and state governments, HILDA data etc.</p>
|
<p>This project collects and maps data from public libraries across the Australia and the external Australian Territories of Christmas Island and the Cocos (Keeling) Islands. In the long term I hope to include more data that can be combined and cross-referenced, e.g. library funding from local and state governments, HILDA data etc.</p>
|
||||||
|
@ -61,5 +62,9 @@
|
||||||
<li>National & State Libraries</li>
|
<li>National & State Libraries</li>
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -15,7 +15,6 @@
|
||||||
<h2>Contributing to Library Map</h2>
|
<h2>Contributing to Library Map</h2>
|
||||||
<p id="beta">Beta!</p>
|
<p id="beta">Beta!</p>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
|
@ -25,6 +24,8 @@
|
||||||
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
<section class="info-page">
|
<section class="info-page">
|
||||||
<h2 id="contributing">Contributing</h2>
|
<h2 id="contributing">Contributing</h2>
|
||||||
<p>I’d love your help to make <em>Library Map</em> as accurate and useful as possible.</p>
|
<p>I’d love your help to make <em>Library Map</em> as accurate and useful as possible.</p>
|
||||||
|
@ -63,5 +64,9 @@
|
||||||
<p><strong>/website/data/*</strong>: <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a></p>
|
<p><strong>/website/data/*</strong>: <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a></p>
|
||||||
<p><strong>everything else</strong>: <a href="https://www.gnu.org/licenses/gpl-3.0.txt">GPL-3.0-or-later</a></p>
|
<p><strong>everything else</strong>: <a href="https://www.gnu.org/licenses/gpl-3.0.txt">GPL-3.0-or-later</a></p>
|
||||||
</section>
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -19,7 +19,6 @@
|
||||||
<h2>Library Map</h2>
|
<h2>Library Map</h2>
|
||||||
<p id="beta">Beta!</p>
|
<p id="beta">Beta!</p>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="active-tab">Home</li>
|
<li class="active-tab">Home</li>
|
||||||
|
@ -29,7 +28,8 @@
|
||||||
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
<div id="loading">Loading, please be patient...</div>
|
<div id="loading">Loading, please be patient...</div>
|
||||||
|
|
||||||
<!-- leaflet script -->
|
<!-- leaflet script -->
|
||||||
|
@ -57,6 +57,10 @@
|
||||||
<script src="./secrets.js" type="text/javascript"></script>
|
<script src="./secrets.js" type="text/javascript"></script>
|
||||||
<!-- this is the guts of it -->
|
<!-- this is the guts of it -->
|
||||||
<script src="./load-map.js" type="text/javascript"></script>
|
<script src="./load-map.js" type="text/javascript"></script>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
@ -74,7 +74,7 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
||||||
layer.on({
|
layer.on({
|
||||||
mouseover: e => highlightFeature(e),
|
mouseover: e => highlightFeature(e),
|
||||||
mouseout: e => resetHighlight(e, fines),
|
mouseout: e => resetHighlight(e, fines),
|
||||||
click: zoomToFeature
|
click: e => zoomToFeature(e, feature.properties),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -320,10 +320,11 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
||||||
}
|
}
|
||||||
|
|
||||||
// add control layers
|
// add control layers
|
||||||
|
var isSmallScreen = window.screen.availWidth < 800;
|
||||||
var mapControl = L.control.layers(
|
var mapControl = L.control.layers(
|
||||||
baseMaps,
|
baseMaps,
|
||||||
overlayMaps,
|
overlayMaps,
|
||||||
{ "collapsed" : false }
|
{ "collapsed" : isSmallScreen }
|
||||||
).addTo(map);
|
).addTo(map);
|
||||||
|
|
||||||
// scale
|
// scale
|
||||||
|
@ -344,17 +345,21 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
||||||
setGeneral()
|
setGeneral()
|
||||||
mapControl.remove();
|
mapControl.remove();
|
||||||
infoBoxes.branches.remove()
|
infoBoxes.branches.remove()
|
||||||
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": false}).addTo(map);
|
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
|
||||||
|
if (!isSmallScreen) {
|
||||||
infoBoxes.branches.addTo(map)
|
infoBoxes.branches.addTo(map)
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
sessionStorage.setItem('mapMode', 'fragile');
|
sessionStorage.setItem('mapMode', 'fragile');
|
||||||
setFragile()
|
setFragile()
|
||||||
mapControl.remove();
|
mapControl.remove();
|
||||||
infoBoxes.branches.remove()
|
infoBoxes.branches.remove()
|
||||||
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": false}).addTo(map);
|
mapControl = L.control.layers(baseMaps, overlayMaps, {"collapsed": isSmallScreen}).addTo(map);
|
||||||
|
if (!isSmallScreen) {
|
||||||
infoBoxes.branches.addTo(map)
|
infoBoxes.branches.addTo(map)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
modeButton.addEventListener('click', switchMode, false);
|
modeButton.addEventListener('click', switchMode, false);
|
||||||
|
|
||||||
|
@ -379,15 +384,32 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
||||||
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
|
||||||
layer.bringToFront();
|
layer.bringToFront();
|
||||||
}
|
}
|
||||||
|
if (!isSmallScreen) {
|
||||||
infoBoxes.serviceInfo.addTo(map)
|
infoBoxes.serviceInfo.addTo(map)
|
||||||
infoBoxes.serviceInfo.update(layer.feature.properties);
|
infoBoxes.serviceInfo.update(layer.feature.properties)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function zoomToFeature(e, props) {
|
||||||
|
map.fitBounds(e.target.getBounds());
|
||||||
|
e.target.bindPopup(`
|
||||||
|
<strong>${props.name}</strong>` +
|
||||||
|
`<p>Fines: ` +
|
||||||
|
(
|
||||||
|
props.fines === "no" ? "No" :
|
||||||
|
props.fines == "no_unconfirmed" ? "Probably no" :
|
||||||
|
props.fines === "yes" ? "Yes" :
|
||||||
|
props.fines == "adults" ? "No for children" :
|
||||||
|
props.fines == "by_lga" ? "Varies by LGA" : "Unknown"
|
||||||
|
) +
|
||||||
|
`<br/>Loans : ` +
|
||||||
|
(!props.standard_loan_weeks || props.standard_loan_weeks == "?" ? `Unknown` : `${props.standard_loan_weeks} weeks`) +
|
||||||
|
`</p>`
|
||||||
|
).openPopup()
|
||||||
}
|
}
|
||||||
|
|
||||||
// clear on mouseout
|
// clear on mouseout
|
||||||
function zoomToFeature(e) {
|
|
||||||
map.fitBounds(e.target.getBounds());
|
|
||||||
}
|
|
||||||
|
|
||||||
function resetHighlight(e, layer) {
|
function resetHighlight(e, layer) {
|
||||||
layer.resetStyle(e.target);
|
layer.resetStyle(e.target);
|
||||||
infoBoxes.serviceInfo.remove()
|
infoBoxes.serviceInfo.remove()
|
||||||
|
@ -423,7 +445,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
||||||
<h4>Library Branches</h4>
|
<h4>Library Branches</h4>
|
||||||
<p>Circles represent an 800 metre radius from the library location. This is the distance generally used by urban planners to represent "conceptually within walking distance" for most people.</p>
|
<p>Circles represent an 800 metre radius from the library location. This is the distance generally used by urban planners to represent "conceptually within walking distance" for most people.</p>
|
||||||
`};
|
`};
|
||||||
infoBoxes.branches.addTo(map) // add by default
|
if (!isSmallScreen) {
|
||||||
|
infoBoxes.branches.addTo(map) // add by default it larger screen
|
||||||
|
}
|
||||||
|
|
||||||
// STANDARD LOAN PERIOD LEGEND
|
// STANDARD LOAN PERIOD LEGEND
|
||||||
infoBoxes.loanPeriod.onAdd = addLegend;
|
infoBoxes.loanPeriod.onAdd = addLegend;
|
||||||
|
@ -498,10 +522,14 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
||||||
// add info boxes & markers when relevant layer is added
|
// add info boxes & markers when relevant layer is added
|
||||||
map.on('overlayadd', l => {
|
map.on('overlayadd', l => {
|
||||||
if (l.name == "Fines") {
|
if (l.name == "Fines") {
|
||||||
|
if (!isSmallScreen) {
|
||||||
infoBoxes.fines.addTo(map)
|
infoBoxes.fines.addTo(map)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
if (l.name == "Loan Period") {
|
if (l.name == "Loan Period") {
|
||||||
|
if (!isSmallScreen) {
|
||||||
infoBoxes.loanPeriod.addTo(map)
|
infoBoxes.loanPeriod.addTo(map)
|
||||||
|
}
|
||||||
loanPeriod.bringToBack()
|
loanPeriod.bringToBack()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -533,7 +561,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
|
||||||
for (let k in overlayMaps ) {
|
for (let k in overlayMaps ) {
|
||||||
mapControl.addOverlay(overlayMaps[k], k)
|
mapControl.addOverlay(overlayMaps[k], k)
|
||||||
}
|
}
|
||||||
infoBoxes.branches.addTo(map);
|
if (!isSmallScreen) {
|
||||||
|
infoBoxes.branches.addTo(map)
|
||||||
|
}
|
||||||
modeButton.setAttribute('class', 'visible');
|
modeButton.setAttribute('class', 'visible');
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -15,7 +15,6 @@
|
||||||
<h2>Sources & Attributions</h2>
|
<h2>Sources & Attributions</h2>
|
||||||
<p id="beta">Beta!</p>
|
<p id="beta">Beta!</p>
|
||||||
</section>
|
</section>
|
||||||
</header>
|
|
||||||
<nav>
|
<nav>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
|
@ -25,6 +24,8 @@
|
||||||
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
<li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
<section class="sources">
|
<section class="sources">
|
||||||
<h2 id="sources-attributions">Sources & Attributions</h2>
|
<h2 id="sources-attributions">Sources & Attributions</h2>
|
||||||
<p><em>Library Map</em> was written and conceived on unceded Wurundjeri Woi Wurrung land.</p>
|
<p><em>Library Map</em> was written and conceived on unceded Wurundjeri Woi Wurrung land.</p>
|
||||||
|
@ -181,5 +182,9 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</section>
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p>This website and the data it uses licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a></p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,3 +1,13 @@
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
min-height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
||||||
|
@ -5,6 +15,13 @@ body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
pre {
|
||||||
|
font-family: "Jetbrains Mono", "Consolas", "Courier New", monospace;
|
||||||
|
background-color: #eee;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
a,
|
a,
|
||||||
a:active {
|
a:active {
|
||||||
color: #FF3961;
|
color: #FF3961;
|
||||||
|
@ -25,13 +42,27 @@ a:hover {
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
/* NAVIGATION */
|
||||||
|
/* ========== */
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
grid-row: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav,
|
|
||||||
nav ul {
|
nav ul {
|
||||||
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding-left: 2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav li {
|
nav li {
|
||||||
|
@ -56,8 +87,52 @@ nav li a:hover {
|
||||||
.active-tab {
|
.active-tab {
|
||||||
color: #000;
|
color: #000;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
border-top-right-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 800px) {
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav li {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5em 0 0.5em 1em;
|
||||||
|
border-color: #777;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
height: 4em;
|
||||||
|
margin: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#beta {
|
||||||
|
font-family: "Comic Sans", Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.4em;
|
||||||
|
margin-left: 1em;
|
||||||
|
transform: rotate(-35deg);
|
||||||
|
background-color: #fff;
|
||||||
|
color: #FF3961;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* loading */
|
||||||
|
/* ======= */
|
||||||
#loading {
|
#loading {
|
||||||
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
@ -107,36 +182,10 @@ nav li a:hover {
|
||||||
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
footer {
|
||||||
margin: auto;
|
border-top: 1px solid #eee;
|
||||||
display: grid;
|
width: 100%;
|
||||||
grid-template-columns: auto 1fr auto;
|
text-align: center;
|
||||||
padding: 0.5em 1em;
|
|
||||||
font-family: "Calibri", Arial, Tahoma, sans-serif;
|
|
||||||
background-color: #000;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
|
||||||
height: 4em;
|
|
||||||
margin-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#beta {
|
|
||||||
font-family: "Comic Sans", Helvetica, Arial, sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.4em;
|
|
||||||
margin-left: 1em;
|
|
||||||
transform: rotate(-35deg);
|
|
||||||
background-color: #fff;
|
|
||||||
color: #FF3961;
|
|
||||||
padding: 0.25em 0.5em;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#mode-switch {
|
#mode-switch {
|
||||||
|
@ -169,10 +218,12 @@ header {
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
margin: auto;
|
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
width: 80%;
|
margin: 0 auto 0 -25%;
|
||||||
|
width: 150%;
|
||||||
|
max-width: 54em;
|
||||||
}
|
}
|
||||||
|
|
||||||
thead {
|
thead {
|
||||||
|
@ -190,21 +241,23 @@ tbody td {
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sources table {
|
/* when below max width of para */
|
||||||
margin: 0 auto 0 -25%;
|
|
||||||
width: 150%;
|
|
||||||
max-width: 54em;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 54em) {
|
@media only screen and (max-width: 54em) {
|
||||||
|
|
||||||
|
.info-page,
|
||||||
.sources {
|
.sources {
|
||||||
width: 95vw;
|
width: 95vw;
|
||||||
|
padding: 0 2.5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sources table {
|
table {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100vw;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
line-break: anywhere;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue