re meta#288 månedens ord + søkeresultater i én kolonne for mobil/tablet

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 {

src/components/SearchResults.vue

 <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;
   }

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
   }