From 92486ab2b6a9ee72a55aa7424fde8b2545dd2d98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no>
Date: Wed, 10 Mar 2021 10:37:38 +0100
Subject: [PATCH] =?UTF-8?q?re=20meta#288=20m=C3=A5nedens=20ord=20+=20s?=
 =?UTF-8?q?=C3=B8keresultater=20i=20=C3=A9n=20kolonne=20for=20mobil/tablet?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DictionaryView.vue | 11 ++++++++---
 src/components/SearchResults.vue  |  6 +++++-
 src/main.js                       |  4 ++--
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index 6b23bcc5..e5b2139e 100644
--- a/src/components/DictionaryView.vue
+++ b/src/components/DictionaryView.vue
@@ -10,7 +10,8 @@
             <template v-slot:label>
               <span>
                 <mq-layout mq="mobile">begge</mq-layout>
-                <mq-layout mq="tablet+">begge ordbøkene</mq-layout>
+                <mq-layout mq="tablet">begge</mq-layout>
+                <mq-layout mq="laptop+">begge ordbøkene</mq-layout>
               </span>
             </template>
           </v-radio>
@@ -43,7 +44,7 @@
       <Article :key="article_key" :article="article" @article-click="article_link_click" />
     </div>
     <div class="welcome" v-if="! (article || error || search_results.length || waiting)">
-      <div class="monthly">
+      <div class="monthly" :class="$mq">
         <div>
           <Article :article="monthly_bm" @article-click="article_link_click" />
         </div>
@@ -303,6 +304,10 @@ div.monthly > div {
   flex: 50%;
 }
 
+div.monthly.tablet, div.monthly.mobile {
+  flex-direction: column;
+}
+
 div.monthly article.bob .dict-label::before {
   content: "månedens ";
 }
@@ -314,7 +319,7 @@ div.monthly article.nob .dict-label::before {
 
 .search_container {
   max-width: 1500px;
-  padding-top: 50px;
+  padding-top: 10px;
 }
 
 .v-label span {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index a040a75c..8bdd8200 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,6 +1,6 @@
 <template>
   <section id="search_results">
-    <div class="flex-container">
+    <div class="flex-container" :class="$mq">
       <ul class="hits" v-if="results_bob.length">
         <li  class="article_container" v-for="(result, index) in results_bob" :key="index + results_hash">
           <Article  :article="result" @article-click="article_link_click">
@@ -63,6 +63,10 @@ export default {
     display: flex;
   }
 
+  .flex-container.mobile, .flex-container.tablet {
+    flex-direction: column;
+  }
+
   .flex-container > ul {
     padding: 0px !important;
   }
diff --git a/src/main.js b/src/main.js
index 5e504568..6d7bb0b6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,8 +15,8 @@ Vue.use(VuePlausible, {
 })
 Vue.use(VueMq, {
   breakpoints: {
-    mobile: 450,
-    tablet: 900,
+    mobile: 470,
+    tablet: 700,
     laptop: 1250,
     desktop: Infinity
   }
-- 
GitLab