Layout improved for Searcg Result page

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++

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 = () => {

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>

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>
 

webapp/locales/de.json

@@ -589,6 +589,7 @@
   },
   "search": {
     "failed": "Nichts gefunden",
+    "for": "Suche nach ",
     "heading": {
       "Post": "Beitrag ::: Beiträge",
       "Tag": "Hashtag ::: Hashtags",

webapp/locales/en.json

@@ -589,6 +589,7 @@
   },
   "search": {
     "failed": "Nothing found",
+    "for": "Searching for ",
     "heading": {
       "Post": "Post ::: Posts",
       "Tag": "Hashtag ::: Hashtags",