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:
Hugh Rundle 2021-01-24 12:40:17 +11:00
parent 259a29be22
commit bd664dd17d
6 changed files with 452 additions and 350 deletions

View file

@ -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 &amp; State Libraries</li> <li>National &amp; 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>

View file

@ -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>Id love your help to make <em>Library Map</em> as accurate and useful as possible.</p> <p>Id 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>

View file

@ -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>

View file

@ -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');
} }
}) })

View file

@ -15,7 +15,6 @@
<h2>Sources &amp; Attributions</h2> <h2>Sources &amp; 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 &amp; Attributions</h2> <h2 id="sources-attributions">Sources &amp; 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>

View file

@ -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;
} }
} }