Merge pull request #122 from vkoves/mobile-menu

Add Mobile Menu Button

src/components/BuildingsTable.vue

@@ -38,7 +38,7 @@ export default class BuildingsTable extends Vue {
       <thead>
         <tr>
           <th scope="col">
-            Property Name / address
+            Name / Address
           </th>
           <th
             scope="col"
@@ -69,15 +69,15 @@ export default class BuildingsTable extends Vue {
             scope="col"
             class="numeric wide-col"
           >
-            Greenhouse Gas Intensity<br>
+            GHG Intensity<br>
             <span class="unit">(kg CO<sub>2</sub> eq./sqft)</span>
           </th>
           <th
             scope="col"
             class="numeric wide-col"
           >
-            Total Greenhouse Emissions<br>
-            <span class="unit">(metric tons CO<sub>2</sub> eq.)</span>
+            Total GHG Emissions<br>
+            <span class="unit">(tons CO<sub>2</sub> eq.)</span>
           </th>
         </tr>
       </thead>
@@ -267,18 +267,18 @@ export default class BuildingsTable extends Vue {
     // Make table screen full width on mobile
     width: calc(100% + 2rem);
     margin: 0 -1rem;
+    // Disable max-height lots of scrolling is fine on mobile
+    max-height: none;
 
     table {
-      width: 60rem;
+      width: 70rem;
 
+      thead th {
+        font-size: 0.825rem;
+        padding: 0.5rem 0.25rem;
+      }
       td.property-name, td.property-address { width: 10rem; }
     }
   }
-
-  // On very short screens < 640px, disable vertical scrolling on the table, since it's view
-  // height based and makes it very annoying at high zoom
-  @media (max-height: 40rem) {
-    max-height: none;
-  }
 }
 </style>

src/components/DataDisclaimer.vue

@@ -1,8 +1,7 @@
 <template>
   <details class="data-disclaimer">
     <summary>
-      Note: Data includes large Chicago buildings with data from {{ LatestDataYear }},
-      unless explicitly stated otherwise.
+      Note: Data From Large Buildings in {{ LatestDataYear }}
     </summary>
 
     <div class="details-content">
@@ -26,6 +25,10 @@
         new data is available, and some buildings may have failed to report that year, and only have
         older data available.
       </p>
+
+      <p>
+        Additionally, note that all tons specified are <em>metric tons</em>.
+      </p>
     </div>
   </details>
 </template>
@@ -51,6 +54,7 @@ export default class DataDisclaimer extends Vue {
 
 <style lang="scss">
 .data-disclaimer {
+  margin-top: 1rem;
   margin-bottom: 1rem;
   font-size: 0.825rem;
 

src/components/StatTile.vue

@@ -197,7 +197,7 @@ import {
   IPropertyStats,
   RankConfig,
 } from '../common-functions.vue';
-import SparkLine, { INumGraphPoint } from './SparkLine.vue';
+import SparkLine, { INumGraphPoint } from './graphs/SparkLine.vue';
 
 /**
  * A group of all the core stats by property type (e.g. GHG intensity median)

src/components/layout/AppFooter.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+/**
+ * Site Wide Footer
+ */
+@Component({
+  name: 'AppFooter',
+})
+export default class AppFooter extends Vue {
+}
+</script>
+
+<template>
+  <footer>
+    <div class="constrained">
+      <div>
+        Created with <span class="heart">&#x2764;</span> by
+        <a href="https://github.com/vkoves/electrify-chicago/graphs/contributors">volunteers</a>
+        in Chicago
+      </div>
+
+      <div>
+        <a
+          href="https://github.com/vkoves/electrify-chicago"
+          class="github-link"
+        >
+          <img
+            alt=""
+            src="/github-mark.svg"
+            width="16"
+          >
+          Contribute to Electrify Chicago on GitHub
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style lang="scss">
+footer {
+  width: 100%;
+  text-align: center;
+  padding: 2rem 0;
+  background-color: $grey;
+
+  > .constrained {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    gap: 2rem;
+  }
+
+  a {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: $text-main;
+    font-weight: 600;
+  }
+
+  a.github-link {
+    text-decoration: none;
+    padding: 0.25rem 0.5rem;
+    border-radius: 1rem;
+    background-color: $off-white;
+    border: none;
+    font-size: 0.825rem;
+
+    &:hover, &:focus { background-color: $white; }
+  }
+
+  .heart {
+    font-size: 1.5rem;
+    vertical-align: -0.1rem;
+    color: $chicago-red;
+    line-height: 0;
+    margin: 0 0.125rem;
+  }
+
+  @media (max-width: $mobile-max-width) {
+    position: static;
+  }
+}
+</style>