make pagination more responsive

src/components/Pagination.vue

 <template>
 <div v-bind:class="{'centered': bottom}">
-              <span color="tertiary" class = "pagination" v-if="!$parent.$parent.article && $parent.$parent.article_info && ($parent.count_bm > $parent.$parent.perPage || $parent.count_nn > $parent.$parent.perPage)">
+              <span color="tertiary" class = "pagination">
             <v-pagination @input="update" v-model="$parent.$parent.page" :class="$vuetify.breakpoint.name" :total-visible="$vuetify.breakpoint.smAndDown ? 5 : 8" circle :length="Math.ceil(Math.max($parent.count_bm, $parent.count_nn)/$parent.$parent.perPage)"></v-pagination>
                 <span class="result-counts" v-if="!bottom">
                   <span class="total-results">{{$parent.$parent.total_results()}} treff </span>

src/components/SearchResults.vue

 <template>
   <section id="search_results" :class="$vuetify.breakpoint.name">
-    <Pagination @update-page="$emit('update-page')"/>
+    <Pagination v-if="show_pagination" @update-page="$emit('update-page')"/>
     <div class="flex-container" :class="$vuetify.breakpoint.name">
 
        <div class="hits" v-if="$vuetify.breakpoint.smAndDown">
@@ -36,7 +36,7 @@
         </div>
       </div>
     </div>
-    <Pagination @update-page="$emit('update-page')" bottom/>
+    <Pagination v-if="show_pagination" @update-page="$emit('update-page')" bottom/>
 
    
   </section>
@@ -79,6 +79,9 @@ export default {
       else {
         return 0
       }
+    },
+  show_pagination: function() {
+    return !this.$parent.article && this.$parent.article_info && (this.count_bm > this.$parent.perPage || this.count_nn > this.$parent.perPage)
     }
   },
   methods: {
@@ -105,9 +108,14 @@ export default {
   }
 
   .flex-container {
+    padding-top: 24px;
     display: flex;
   }
 
+  .flex-container.sm, .flex-container.xs {
+      padding-top: 0px;
+  }
+
   .hits {
     min-width: 50%;
   }