diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue index b750396469552bbb3bc402f72c00accac4f86d29..5d27797cfd8a57e2a3680c5d491ef1344a9fb88f 100644 --- a/src/components/SearchResults.vue +++ b/src/components/SearchResults.vue @@ -1,9 +1,9 @@ <template> <section id="search_results" :class="$vuetify.breakpoint.name"> <Pagination @update-page="$emit('update-page')"/> - <div class="flex-container" :class="$vuetify.breakpoint.name"> + <div class="flex-container"> - <div class="hits" v-if="$vuetify.breakpoint.smAndDown"> + <div class="hits" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.smAndDown"> <div class="article_container" v-for="(result, index) in results_bm.concat(results_nn)" :key="index + id_hash" :style="'order:'+(index < results_bm.length? 2*index : ((index-results_bm.length)*2) + 1)"> <Article @@ -16,7 +16,7 @@ </div> </div> - <div class="hits" v-if="$vuetify.breakpoint.mdAndUp"> + <div class="hits" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.mdAndUp"> <div class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash"> <Article :article="result" @@ -26,7 +26,7 @@ </Article> </div> </div> - <div class="hits" v-if="$vuetify.breakpoint.mdAndUp"> + <div class="hits" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.mdAndUp"> <div class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash"> <Article :article="result" @@ -118,20 +118,20 @@ export default { padding: 20px 0px 20px 0px; } - .hits { - min-width: 50%; + .flex-container { + display: flex; } - - .flex-container.md, .flex-container.lg, .flex-container.xl { - display: flex; + .hits { + min-width: 50%; } - - .flex-container.xs .hits, .flex-container.sm .hits { + .hits.sm, .hits.xs { + min-width: 100%; display: flex; flex-direction: column; } + .results-count {