From af56c3dd4b427ccf88e592fa29a8e3515212989a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 24 Sep 2020 12:21:57 +0200
Subject: [PATCH] Layout improved for Searcg Result page

---
 .../features/SearchResults/SearchResults.vue  | 25 ++++++++++++-------
 .../PaginationButtons.spec.js                 |  1 -
 .../PaginationButtons/PaginationButtons.vue   |  1 -
 .../generic/TabNavigation/TabNavigation.vue   | 19 +++++++++++++-
 webapp/locales/de.json                        |  1 +
 webapp/locales/en.json                        |  1 +
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/webapp/components/_new/features/SearchResults/SearchResults.vue b/webapp/components/_new/features/SearchResults/SearchResults.vue
index 22edf7166..0471860c9 100644
--- a/webapp/components/_new/features/SearchResults/SearchResults.vue
+++ b/webapp/components/_new/features/SearchResults/SearchResults.vue
@@ -1,12 +1,14 @@
 <template>
   <div id="search-results" class="search-results">
     <div>
-      <ds-section>
-        <ds-text class="total-search-results">
-          <strong>{{ searchCount }}</strong>
-          {{ $t('search.results', {}, searchCount) }}
-        </ds-text>
-      </ds-section>
+      <ds-text class="total-search-results">
+        {{ $t('search.for') }} "
+        <strong>{{ search }}</strong>
+        "
+        <br />
+        <strong>{{ searchCount }}</strong>
+        {{ $t('search.results', {}, searchCount) }}
+      </ds-text>
     </div>
 
     <tab-navigation :tabs="tabOptions" :activeTab="activeTab" @switchTab="switchTab" />
@@ -63,6 +65,7 @@
           @next="nextResults"
           :key="'Bottom'"
           :pageSize="pageSize"
+          :srollTo="'#search-results'"
         />
       </template>
     </section>
@@ -148,17 +151,20 @@ export default {
       return [
         {
           type: 'Post',
-          title: `${this.postCount} ${this.$t('search.heading.Post', {}, this.postCount)}`,
+          title: this.$t('search.heading.Post', {}, this.postCount),
+          count: this.postCount,
           disabled: this.postCount === 0,
         },
         {
           type: 'User',
-          title: `${this.userCount} ${this.$t('search.heading.User', {}, this.userCount)}`,
+          title: this.$t('search.heading.User', {}, this.userCount),
+          count: this.userCount,
           disabled: this.userCount === 0,
         },
         {
           type: 'Hashtag',
-          title: `${this.hashtagCount} ${this.$t('search.heading.Tag', {}, this.hashtagCount)}`,
+          title: this.$t('search.heading.Tag', {}, this.hashtagCount),
+          count: this.hashtagCount,
           disabled: this.hashtagCount === 0,
         },
       ]
@@ -206,6 +212,7 @@ export default {
       }
     },
     nextResults() {
+      // scroll to top??
       switch (this.activeTab) {
         case 'Post':
           this.postPage++
diff --git a/webapp/components/_new/generic/PaginationButtons/PaginationButtons.spec.js b/webapp/components/_new/generic/PaginationButtons/PaginationButtons.spec.js
index 15a2c5699..0a1e6d282 100644
--- a/webapp/components/_new/generic/PaginationButtons/PaginationButtons.spec.js
+++ b/webapp/components/_new/generic/PaginationButtons/PaginationButtons.spec.js
@@ -13,7 +13,6 @@ describe('PaginationButtons.vue', () => {
   let wrapper
   const mocks = {
     $t: jest.fn(),
-    scrollTo: jest.fn(),
   }
 
   const Wrapper = () => {
diff --git a/webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue b/webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue
index e2600653c..0af6dd1cd 100644
--- a/webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue
+++ b/webapp/components/_new/generic/PaginationButtons/PaginationButtons.vue
@@ -19,7 +19,6 @@
       icon="arrow-right"
       circle
       class="next-button"
-      v-scroll-to="'#search-results'"
     />
   </div>
 </template>
diff --git a/webapp/components/_new/generic/TabNavigation/TabNavigation.vue b/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
index ffa09bf59..f9018960a 100644
--- a/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
+++ b/webapp/components/_new/generic/TabNavigation/TabNavigation.vue
@@ -11,14 +11,26 @@
       ]"
       role="button"
       @click="$emit('switchTab', tab.type)"
+      :style="tabWidth"
     >
-      {{ tab.title }}
+      <ds-space margin="small">
+        <client-only placeholder="Loading...">
+          <ds-number :label="tab.title">
+            <hc-count-to slot="count" :end-val="tab.count" />
+          </ds-number>
+        </client-only>
+      </ds-space>
     </li>
   </ul>
 </template>
 
 <script>
+import HcCountTo from '~/components/CountTo.vue'
+
 export default {
+  components: {
+    HcCountTo,
+  },
   props: {
     tabs: {
       type: Array,
@@ -28,6 +40,11 @@ export default {
       type: String,
     },
   },
+  computed: {
+    tabWidth() {
+      return 'width: ' + String(100.0 / this.tabs.length) + '%'
+    },
+  },
 }
 </script>
 
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 4e2077bcb..fe2293ead 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -589,6 +589,7 @@
   },
   "search": {
     "failed": "Nichts gefunden",
+    "for": "Suche nach ",
     "heading": {
       "Post": "Beitrag ::: Beiträge",
       "Tag": "Hashtag ::: Hashtags",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 3dd5ffacf..16b2cbff3 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -589,6 +589,7 @@
   },
   "search": {
     "failed": "Nothing found",
+    "for": "Searching for ",
     "heading": {
       "Post": "Post ::: Posts",
       "Tag": "Hashtag ::: Hashtags",