Merge pull request #19 from hughrun/mobile-friendly

merge mobile-friendly

README.md

@@ -14,7 +14,7 @@ See [sources](sources.md).
 
 ## Want to help?
 
-See [contributing](contributing.md).
+See [contributing](contributing.md), especially *[which files to update](https://github.com/hughrun/public_library_map/blob/master/contributing.md#which-files-to-update)*.
 
 ## Licenses
 

contributing.md

@@ -19,7 +19,7 @@ To update information about library *locations* (e.g. street address, phone numb
 * `website/data/nsla_library_locations.csv`
 * `website/data/public_library_locations.csv`
 
-Do not directly edit JSON files - these are [updated programatically](about.md#important-files-that-are-not-in-this-repository).
+Do not directly edit JSON files - these are [updated programatically](https://github.com/hughrun/public_library_map/blob/master/about.md#important-files-that-are-not-in-this-repository).
 
 ### Citing and crediting data sources
 

sources.md

@@ -41,7 +41,7 @@ Library locations are generally provided by state government departments.
 | Source  | Link  | License |
 |---      |---    |      ---|
 | Libraries Tasmania / data.gov.au | [Libraries Tasmania locations](https://data.gov.au/dataset/ds-dga-409f7f64-35ef-4a70-8db1-dd737a6fabec/details?q=libraries) | CC-BY 4.0 |
-| Vicmap Features of Interest | https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest | CC-BY 4.0 |
+| Vicmap Features of Interest | [data.vic.gov.au FoI](https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest) | CC-BY 4.0 |
 | ACT Open Data Portal | [ACT Libraries locations](https://www.data.act.gov.au/dataset/Library-Locations-Map/3nit-7kex) | CC-BY 4.0 |
 | NSW State Library (NSW library locations and contacts) | [Public library services](https://www.sl.nsw.gov.au/public-library-services/about-public-library-services/find-public-library-nsw) | © (fair dealing) |
 | State Library of Queensland | [Queensland public libraries directory](https://www.data.qld.gov.au/dataset/public-libraries) | CC-BY 4.0 |

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,26 +24,49 @@
           <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>
         <h3 id="how-to-contribute-your-idea-bug-report-or-improvement">How to contribute your idea, bug report or improvement</h3>
         <ol type="1">
         <li>You can <a href="https://github.com/hughrun/public_library_map/issues">create an issue</a> on GitHub.</li>
-      <li>You can <a href="https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests">send a pull request</a> — though it is <em>strongly preferred</em> that you either ask to be assigned to an existing issue, or create a new issue, first.</li>
+        <li>You can <a href="https://docs.github.com/en/github/.collaborating-with-issues-and-pull-requests/about-pull-requests">send a pull request</a> — though it is <em>strongly preferred</em> that you either ask to be assigned to an existing issue, or create a new issue, first.</li>
-      <li>You can just send an email to <code>librarymap</code>@<code>hugh</code>.<code>run</code></li>
+        <li>You can just send an email to <code>librarymap</code>@<code>hugh</code>.<code>run</code>.</li>
         </ol>
+        <h3 id="which-files-to-update">Which files to update</h3>
+        <p>To update information about library <em>services</em> (e.g. fines info, loan period etc) you should edit <code>website/data/library_services_information.csv</code></p>
+        <p>To update information about library <em>locations</em> (e.g. street address, phone number, coordinates) you shoudl edit the relevant csv location file:</p>
+        <ul>
+        <li><code>website/data/indigenous_knowledge_centre_locations.csv</code></li>
+        <li><code>website/data/mechanics_institute_locations.csv</code></li>
+        <li><code>website/data/nsla_library_locations.csv</code></li>
+        <li><code>website/data/public_library_locations.csv</code></li>
+        </ul>
+        <p>Do not directly edit JSON files - these are <a href="https://github.com/hughrun/public_library_map/blob/master/about.md#important-files-that-are-not-in-this-repository">updated programatically</a>.</p>
+        <h3 id="citing-and-crediting-data-sources">Citing and crediting data sources</h3>
+        <p>If you are adding a lot of data and have a new source for it, make sure it is cited. You should update the list of sources at both <code>sources.md</code> <em>and</em> <code>website/sources/index.html</code>. If your source is “I just know because it’s my local library” or “I looked it up on their website” you don’t need to add that to the list of sources. If your source is “I found a PDF listing every public library on the State Library website”, you do.</p>
         <h3 id="missing-or-inaccurate-data">Missing or inaccurate data</h3>
         <p>Currently we’re missing data for some library services in relation to <strong>standard loan periods</strong> and <strong>fines for overdue items</strong>.</p>
         <p>It’s likely that some <strong>library location data</strong> is inaccurate — especially for New South Wales. It’s also possible that the address data is wrong (even though the location shown may be correct), and in some cases it is missing.</p>
         <p>It’s possible that some of the <strong>fines data for Queensland</strong> is a little off. This came from the State Library of Queensland but I know for a fact that some of the data was wrong (e.g. Gold Coast Libraries does not charge overdue fines, but the SLQ reports says it does).</p>
         <p>I am particularly interested if you know of data sources for entire regions, states, or Australia — especially if they’re reliably kept up to date.</p>
+        <p>If you can fill in any of these blanks, please update the relevant CSV file and send a pull request. If your data is coming from somewhere in particular, you should also add that to <code>sources.md</code> in the relevant table.</p>
         <h3 id="ideas-for-additional-data">Ideas for additional data</h3>
         <p>You might have an idea for library data that would be useful to map. I’m really happy to hear about these ideas! It’s possible that the information you want to map is unavailable, or just really hard to get, or maybe I will disagree that it’s useful. That’s ok - please ask anyway, expecially if you know where to find the data.</p>
         <h3 id="improvements-to-documentation">Improvements to documentation</h3>
         <p>I’m always — <em>always</em> — happy to hear how I can improve documentation. Even better if you make the edit and then send a pull request.</p>
         <h3 id="improvements-to-the-website-design-layout-or-information">Improvements to the website design, layout, or information</h3>
         <p>You might have an idea for an improvement that’s not about the data per se, but rather about the website. Maybe there’s some accessibilty improvements I can make. Let me know!</p>
+        <h3 id="licensing-and-copyright">Licensing and copyright</h3>
+        <p>By contributing to this project you agree to license your work under the following licenses:</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>      
       </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;
@@ -485,23 +509,9 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
     )}
   }
 
-  // remove info boxes & markers when relevant layer is removed
+  // loan period layer is always at bottom
-  map.on('overlayremove', l => {
-    if (l.name == "Fines") {
-      infoBoxes.fines.remove()
-    } 
-    if (l.name == "Loan Period") {
-      infoBoxes.loanPeriod.remove()
-    } 
-  })
-
-  // add info boxes & markers when relevant layer is added
   map.on('overlayadd', l => {
-    if (l.name == "Fines") {
-      infoBoxes.fines.addTo(map)
-    } 
     if (l.name == "Loan Period") {
-      infoBoxes.loanPeriod.addTo(map)
       loanPeriod.bringToBack()
     }
   })
@@ -523,6 +533,10 @@ Promise.all([boundaries, branchesCsv, ikcCsv, mechanics, nslaBranches])
         mapControl.removeLayer(overlayMaps[i])
         overlayMaps[i].remove()
       }
+      if (!isSmallScreen) { // only add infoboxes to larger screens
+        infoBoxes.loanPeriod.addTo(map)
+        infoBoxes.fines.addTo(map)
+      }
       modeButton.setAttribute('class', 'hidden'); // hide the mode button when it's not relevant
     } else {
       mapControl.removeLayer(fines)
@@ -533,7 +547,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>
@@ -145,7 +146,7 @@
         </tr>
         <tr class="even">
         <td>Vicmap Features of Interest</td>
-      <td>https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest</td>
+        <td><a href="https://discover.data.vic.gov.au/dataset/vicmap-features-of-interest">data.vic.gov.au FoI</a></td>
         <td>CC-BY 4.0</td>
         </tr>
         <tr class="odd">
@@ -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;
   }
 }