Merge pull request #35 from CityOfPhiladelphia/search-redesign

feedback changes

src/App.vue

@@ -94,17 +94,18 @@
 
         <div id="tiles">
           <div class="filter-summary">
-            <span class="result-summary">
-              <span v-if="filteredTools.length === 0">
-                No results found for
-              </span>
-              <span v-else>
-                Showing {{ filteredTools.length }} results out of {{ tools.length }} records <span v-if="checkedTopics.length > 0 || search.length > 0">for</span>
-              </span>
+            <div v-if="emptyResponse">
+              No results found for
               <span v-if="search.length > 0">
                 <b><em>"{{ search }}"</em></b>
               </span>
-            </span>
+            </div> 
+            <div v-else-if="$refs.paginator">
+              Showing {{ start }} – {{ end }} of {{ filteredTools.length }} results
+              <span v-if="search.length > 0">
+                for <b><em>"{{ search }}"</em></b>
+              </span>
+            </div>
             <span v-if="checkedTopics.length > 0">
               <button
                 v-for="(item, index) in checkedTopics"
@@ -125,6 +126,18 @@
                 @click="clearAllFilters"
               >
             </span>
+            <div v-if="emptyResponse" class="helper-text">
+              There were no results found matching your search. Try adjusting your search settings.
+              <br>
+              <br>
+              Here are some options:
+              <ul>
+                <li>Use different or fewer search terms</li>
+                <li>Check your spelling</li>
+                <li>Remove or adjust any filters</li>
+              </ul>
+              Want to start over? Select Clear all to reset the search settings.
+            </div>
           </div>
           <paginate
             v-if="allTools.length > 0 "
@@ -179,7 +192,7 @@
                 '.left-arrow': ['left-arrow', 'tabbable'],
                 '.right-arrow': ['right-arrow', 'tabbable'],
               }"
-              @change="onPageChange(); scrollToTop(); "
+              @change="getPaginationRange(); onPageChange(); scrollToTop(); "
             />
           </div>
         </div>
@@ -227,6 +240,9 @@ export default {
       loading: true,
       emptyResponse: false,
       failure: false,
+      start: 0,
+      end: 0,
+      total: 0,
       searchOptions: {
         shouldSort: true,
         threshold: 0.4,
@@ -313,6 +329,7 @@ export default {
   },
 
   async mounted() {
+    this.setPerPage();
     this.getAllTopics();
     await this.getAllTools();
     this.getFeaturedTools();
@@ -327,7 +344,6 @@ export default {
       });
     });
 
-    this.setPerPage();
     addEventListener('resize', (event) => {
       this.setPerPage();
     });
@@ -473,6 +489,7 @@ export default {
       await this.filterByTopic();
       await this.filterBySearch();
       await this.checkEmpty();
+      await this.getPaginationRange();
     },
 
     filterByTopic: function() {
@@ -502,6 +519,21 @@ export default {
       }
     },
 
+    getPaginationRange: function () {
+      console.log(this.$refs.paginator);
+      console.log(this.$refs.paginator.pageItemsCount);
+      let rangeRegex = /^(\d+)-(\d+) of (\d+)$/;
+      let matches = rangeRegex.exec(this.$refs.paginator.pageItemsCount);
+      console.log(matches); 
+
+      if (matches != null) {
+        this.start = matches[1];
+        this.end = matches[2];
+        // this.total = tools.length;
+      }
+      return;
+    },
+
     toggleTopics: function() {
       this.showTopics = this.showTopics ? false : true;
     },
@@ -522,7 +554,8 @@ export default {
     * @desc scrolls to top from paginate buttons
     */
     scrollToTop : function () {
-      document.getElementById('search-bar-label').scrollIntoView({
+      window.scrollTo({
+        top: 0,
         behavior: 'smooth',
       });
     },
@@ -622,10 +655,10 @@ export default {
 
   .filter-button{
     font-family: "Open Sans", Helvetica, Roboto, Arial, sans-serif;
-    margin: 0px 8px 0px 0px;
+    margin: 12px 16px 8px 0px;
     padding: 6px;
-    border: 2px solid transparent;
     border-radius: 4px;
+    border: 2px solid transparent;
     background-color: #cfcfcf;
     color: #333333;
     line-height: normal;
@@ -642,11 +675,9 @@ export default {
     border-color: #2176d2;
   }
 
-  .result-summary {
-    margin-right: 8px;
-  }
-
   .clear-search-button{
+    margin-top: 12px;
+    padding: 0px;
     border: none;
     background-color: transparent;
     color: #0f4d90;
@@ -655,6 +686,10 @@ export default {
     text-decoration: underline;
   }
 
+  .helper-text {
+    margin-top: 1rem;
+  }
+
   .clear-button {
     color: #ffffff;
     background-color: #0F4D90;