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

website/about/index.html

@@ -15,7 +15,6 @@
         <h2>About Library Map</h2>
         <p id="beta">Beta!</p>
       </section>
-    </header>
       <nav>
         <ul>
           <li><a href="/">Home</a></li>
@@ -25,6 +24,8 @@
           <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
         </ul>
       </nav>
+    </header>
+    <main>
       <section class="info-page">
         <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>
@@ -61,5 +62,9 @@
         <li>National &amp; State Libraries</li>
         </ul>
       </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>
 </html>

website/contributing/index.html

@@ -15,7 +15,6 @@
         <h2>Contributing to Library Map</h2>
         <p id="beta">Beta!</p>
       </section>
-    </header>
       <nav>
         <ul>
           <li><a href="/">Home</a></li>
@@ -25,6 +24,8 @@
           <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
         </ul>
       </nav>
+    </header>
+    <main>
       <section class="info-page">
         <h2 id="contributing">Contributing</h2>
         <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>everything else</strong>: <a href="https://www.gnu.org/licenses/gpl-3.0.txt">GPL-3.0-or-later</a></p>      
       </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>
 </html>

website/index.html

@@ -19,7 +19,6 @@
         <h2>Library Map</h2>
         <p id="beta">Beta!</p>
       </section>
-    </header>
       <nav>
         <ul>
           <li class="active-tab">Home</li>
@@ -29,7 +28,8 @@
           <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
         </ul>
       </nav>
-
+    </header>
+    <main>
       <div id="loading">Loading, please be patient...</div>
 
       <!-- leaflet script -->
@@ -57,6 +57,10 @@
       <script src="./secrets.js" type="text/javascript"></script>
       <!-- this is the guts of it -->
       <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>
 </html>
 

website/load-map.js

@@ -74,7 +74,7 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
     layer.on({
       mouseover: e => highlightFeature(e),
       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
+  var isSmallScreen = window.screen.availWidth < 800;
   var mapControl = L.control.layers(
     baseMaps, 
     overlayMaps, 
-    { "collapsed" : false }
+    { "collapsed" : isSmallScreen }
   ).addTo(map);
 
   // scale
@@ -344,17 +345,21 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
       setGeneral()
       mapControl.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)
+      }
     } else {
       sessionStorage.setItem('mapMode', 'fragile');
       setFragile()
       mapControl.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)
       }
     }
+  }
 
   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) {
       layer.bringToFront();
     }
+    if (!isSmallScreen) {
       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
-  function zoomToFeature(e) {
-    map.fitBounds(e.target.getBounds());
-  }
-
   function resetHighlight(e, layer) {
     layer.resetStyle(e.target);
     infoBoxes.serviceInfo.remove()
@@ -423,7 +445,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
   <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>
   `};
-  infoBoxes.branches.addTo(map) // add by default
+  if (!isSmallScreen) {
+    infoBoxes.branches.addTo(map) // add by default it larger screen
+  }
 
   // STANDARD LOAN PERIOD LEGEND
   infoBoxes.loanPeriod.onAdd = addLegend;
@@ -498,10 +522,14 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
   // add info boxes & markers when relevant layer is added
   map.on('overlayadd', l => {
     if (l.name == "Fines") {
+      if (!isSmallScreen) {
         infoBoxes.fines.addTo(map)
       }
+    } 
     if (l.name == "Loan Period") {
+      if (!isSmallScreen) {
         infoBoxes.loanPeriod.addTo(map)
+      }
       loanPeriod.bringToBack()
     }
   })
@@ -533,7 +561,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
       for (let k in overlayMaps ) {
         mapControl.addOverlay(overlayMaps[k], k)
       }
-      infoBoxes.branches.addTo(map);
+      if (!isSmallScreen) {
+        infoBoxes.branches.addTo(map)
+      }
       modeButton.setAttribute('class', 'visible');
     }
   })

website/sources/index.html

@@ -15,7 +15,6 @@
         <h2>Sources &amp; Attributions</h2>
         <p id="beta">Beta!</p>
       </section>
-    </header>
       <nav>
         <ul>
           <li><a href="/">Home</a></li>
@@ -25,6 +24,8 @@
           <li><a href="https://github.com/hughrun/public_library_map">Code</a></li>
         </ul>
       </nav>
+    </header>
+    <main>
       <section class="sources">
         <h2 id="sources-attributions">Sources &amp; Attributions</h2>
         <p><em>Library Map</em> was written and conceived on unceded Wurundjeri Woi Wurrung land.</p>
@@ -181,5 +182,9 @@
         </tbody>
         </table>
       </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>
 </html>

website/style.css

@@ -1,3 +1,13 @@
+html {
+  height: 100%;
+}
+
+body {
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+
 html, 
 body {
   font-family: "Calibri", Arial, Tahoma, sans-serif;
@@ -5,6 +15,13 @@ body {
   padding: 0;
 }
 
+code,
+pre {
+  font-family: "Jetbrains Mono", "Consolas", "Courier New", monospace;
+  background-color: #eee;
+  padding: 0 0.5em;
+}
+
 a,
 a:active {
   color: #FF3961;
@@ -25,13 +42,27 @@ a:hover {
 
 header {
   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 {
   font-family: "Calibri", Arial, Tahoma, sans-serif;
   background-color: #000;
   margin: 0;
+  padding-left: 2em;
 }
 
 nav li {
@@ -56,8 +87,52 @@ nav li a:hover {
 .active-tab {
   color: #000;
   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 {
   font-family: "Calibri", Arial, Tahoma, sans-serif;
   font-size: 20px;
@@ -107,36 +182,10 @@ nav li a:hover {
   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 {
@@ -169,10 +218,12 @@ header {
 }
 
 table {
-  margin: auto;
   border-collapse: collapse;
+  table-layout: fixed;
   border: 1px solid #000;
-  width: 80%;
+  margin: 0 auto 0 -25%;
+  width: 150%;
+  max-width: 54em;
 }
 
 thead {
@@ -190,21 +241,23 @@ tbody td {
   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) {
 
+  .info-page,
   .sources {
     width: 95vw;
+    padding: 0 2.5vw;
   }
 
-  .sources table {
+  table {
     margin: 0 auto;
     width: 100%;
-    max-width: 100%;
+    max-width: 100vw;
+    font-size: smaller;
+  }
+
+  td {
+    line-break: anywhere;
   }
 }