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
2021-01-24 12:40:17 +11:00 · 2021-01-24 12:40:17 +11:00 · bd664dd17d
parent 259a29be22
commit bd664dd17d
6 changed files with 452 additions and 350 deletions
--- a/website/about/index.html
+++ b/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>
--- a/website/contributing/index.html
+++ b/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>
--- a/website/index.html
+++ b/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>

--- a/website/load-map.js
+++ b/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');
    }
  })
--- a/website/sources/index.html
+++ b/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>
--- a/website/style.css
+++ b/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 {
-  margin: auto;
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  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;
+footer {
+  border-top: 1px solid #eee;
+  width: 100%;
+  text-align: center;
 }

 #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 {
-  margin: 0 auto 0 -25%;
-  width: 150%;
-  max-width: 54em;
-}
-
+/* when below max width of para  */
@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;
  }
 }