From ceda5a38575fe620a7b21f2a865a02c3a98fa9e6 Mon Sep 17 00:00:00 2001
From: Thomas Boutell <tom@apostrophecms.com>
Date: Sun, 15 May 2022 16:42:03 -0400
Subject: [PATCH] Text cleanup, up arrow

---
 src/components/HowToUsePage.vue | 21 ++++++++++++---------
 src/components/Page.vue         |  2 +-
 src/components/PeoplePage.vue   |  4 +++-
 src/components/Up.vue           | 25 +++++++++++++++++++++++++
 4 files changed, 41 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Up.vue

diff --git a/src/components/HowToUsePage.vue b/src/components/HowToUsePage.vue
index 28067d6..424f2af 100644
--- a/src/components/HowToUsePage.vue
+++ b/src/components/HowToUsePage.vue
@@ -124,11 +124,13 @@
             You can sort this list by tapping on the Sort By drop down. Choices
             for sort by include, height, name (latin and common), and color
           </li>
+          <!--
           <li>
             The small “i” ‘s that are superscripts on some terms are info
             tooltips. Hover if on a desktop or long press on a mobile device and
             the tooltip will explain the term.
           </li>
+          -->
         </ul>
         <h4>Favoriting Plants</h4>
         <ul>
@@ -163,20 +165,18 @@
         <ul>
           <li>
             Any of the image blocks has a “more info” link on it. Tap this link to
-            open a POP UP that shows a larger picture of the plant, might give a
-            description, and lists more characteristics of the plant. All the
-            labels have tooltips which when hovered on or long pressed will give
-            the definition of the label if needed
+            open a popup that shows a larger picture of the plant, might give a
+            description, and lists more characteristics of the plant.
           </li>
         </ul>
         <h4>Find the plants</h4>
         <ul>
           <li>
             Open the hamburger menu and tap on PA Nurseries. This will lead you to
-            a page that lists 5 PA nurseries that are known to carry many species.
+            a page that lists PA nurseries that are known to carry many species.
           </li>
           <li>
-            The Nursery’s address, phone number and email are listed. Please
+            The nursery’s address, phone number and email are listed. Please
             contact the Nursery to determine if your favorite plants are in stock
             yet.
           </li>
@@ -207,8 +207,8 @@
         outlined below.
       </p>
       <p>
-        The developers and contributors of this website and the data that
-        enables it is maintained by volunteers with periodic assistance from
+        The source code of this website and the data that
+        enables it are maintained by volunteers with periodic assistance from
         botanists. This website is offered "as is." The creators of this website
         offer no warranty of the completeness and accuracy of the data within
         this website. The data provided on this website should not be cited in
@@ -249,6 +249,7 @@
       </p>
       <p>© 2021, 2022 Choose Native Plants - PA</p>
     </article>
+    <Up />
     <div class="tone">
       <div class="carrier-wave">
         <img src="/assets/images/wave-top-light.png" class="wave" />
@@ -259,11 +260,13 @@
 
 <script>
 import Page from './Page.vue';
+import Up from './Up.vue';
 
 export default {
   name: 'HowToUsePage',
   components: {
-    Page
+    Page,
+    Up
   }
 };
 
diff --git a/src/components/Page.vue b/src/components/Page.vue
index 2fd7127..3916fe0 100644
--- a/src/components/Page.vue
+++ b/src/components/Page.vue
@@ -19,7 +19,7 @@ export default {
   },
   components: {
     Header
-  }
+  },
 };
 </script>
 
diff --git a/src/components/PeoplePage.vue b/src/components/PeoplePage.vue
index 26794ad..8358eb3 100644
--- a/src/components/PeoplePage.vue
+++ b/src/components/PeoplePage.vue
@@ -203,6 +203,7 @@
         </ul>
       </div>
     </article>
+    <Up />
     <div class="tone">
       <div class="carrier-wave">
         <img src="/assets/images/wave-top-dark.png" class="wave" />
@@ -214,11 +215,12 @@
 <script>
 import Page from './Page.vue';
 import Person from './Person.vue';
+import Up from './Up.vue';
 
 export default {
   name: 'PeoplePage',
   components: {
-    Page, Person
+    Page, Person, Up
   }
 };
 
diff --git a/src/components/Up.vue b/src/components/Up.vue
new file mode 100644
index 0000000..d15f462
--- /dev/null
+++ b/src/components/Up.vue
@@ -0,0 +1,25 @@
+<template>
+  <a class="up" @click.prevent="scrollToTop"><span class="material-icons">keyboard_arrow_up</span></a>
+</template>
+
+<script>
+export default {
+  methods: {
+    scrollToTop() {
+      window.scrollTo(0, 0);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.up {
+  display: block;
+  text-align: center;
+}
+.up {
+  text-decoration: none;
+  border-bottom: none;
+  color: black;
+}
+</style>
\ No newline at end of file