re meta#288 bruker vuetify sin innebygde mq-støtte

package.json

@@ -14,7 +14,6 @@
     "vue": "^2.6.11",
     "vue-awesome": "^3.5.4",
     "vue-material-design-icons": "^4.11.0",
-    "vue-mq": "^1.0.1",
     "vue-plausible": "^1.0.0",
     "vue-router": "^3.4.1",
     "vuetify": "^2.4.0"

src/App.vue

@@ -63,6 +63,10 @@ p.about-link {
   float: right;
 }
 
+header > p {
+  padding: 3px;
+}
+
 header > p > a {
   color: var(--v-tertiary-base)   !important;
   text-decoration: none;

src/components/About.vue

@@ -11,7 +11,8 @@
       grensesnittet og i dataene våre. Det betyr at det kan være feil og mangler
       i den nye løsningen vi ikke har oppdaget ennå, eller ikke har hatt tid til
       å få på plass. Dersom du oppdager noe som er feil eller mangelfullt vil vi
-      gjerne ha tilbakemelding om det! Kontakt oss gjerne på <router-link to="mailto:ordbok@uib.no">ordbok@uib.no.</router-link></p>
+      gjerne ha tilbakemelding om det! Kontakt oss gjerne på
+      <router-link to="mailto:ordbok@uib.no">ordbok@uib.no.</router-link></p>
 
 
 
@@ -24,4 +25,8 @@
     padding-left: calc((100vw - 1000px) / 2);
     padding-right: calc((100vw - 1000px) / 2);
   }
+
+  h2, p {
+    padding: 3px;
+  }
 </style>

src/components/Autocomplete.vue

@@ -6,7 +6,7 @@
         :items="items"
         :search-input.sync="search"
         item-text="label"
-        :menu-props="{maxHeight: $mq === 'mobile' ? 250 : 500, transition: 'fade-transition'}"
+        :menu-props="{maxHeight: $vuetify.breakpoint.name === 'xs' ? 250 : 500, transition: 'fade-transition'}"
         prepend-inner-icon="search"
         append-icon="undefined"
         return-object
@@ -107,5 +107,6 @@
 
   .autocomplete-container {
     max-width: 500px;
+    padding-left: 3px;
   }
 </style>

src/components/DictionaryView.vue

@@ -9,25 +9,21 @@
           <v-radio value="bob,nob" color="secondary">
             <template v-slot:label>
               <span>
-                <mq-layout mq="mobile">begge</mq-layout>
-                <mq-layout mq="tablet">begge</mq-layout>
-                <mq-layout mq="laptop+">begge ordbøkene</mq-layout>
+                begge{{$vuetify.breakpoint.smAndDown ? '' : ' ordbøkene'}}
               </span>
             </template>
           </v-radio>
           <v-radio value="bob" color="secondary">
             <template v-slot:label>
               <span>
-                <mq-layout mq="mobile">bm</mq-layout>
-                <mq-layout mq="tablet+">bokmål (bm)</mq-layout>
+                {{$vuetify.breakpoint.xs ? 'bm' :  'bokmål (bm)'}}
               </span>
             </template>
           </v-radio>
           <v-radio value="nob" color="secondary">
             <template v-slot:label>
               <span>
-                <mq-layout mq="mobile">nn</mq-layout>
-                <mq-layout mq="tablet+">nynorsk (nn)</mq-layout>
+                {{$vuetify.breakpoint.xs ? 'nn' :  'nynorsk (nn)'}}
               </span>
             </template>
           </v-radio>
@@ -44,7 +40,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" :class="$mq">
+      <div class="monthly" :class="$vuetify.breakpoint.name">
         <div>
           <Article :article="monthly_bm" @article-click="article_link_click" />
         </div>
@@ -304,7 +300,7 @@ div.monthly > div {
   flex: 50%;
 }
 
-div.monthly.tablet, div.monthly.mobile {
+div.monthly.sm, div.monthly.xs {
   flex-direction: column;
 }
 
@@ -319,13 +315,16 @@ div.monthly article.nob .dict-label::before {
 
 .search_container {
   max-width: 1500px;
-  padding-top: 10px;
 }
 
 .v-label span {
   color: var(--v-primary-base);
 }
 
+.lang_select_container {
+  padding-left: 3px;
+}
+
 li.suggestion {
   font-weight: bold;
   padding-left: 20px;

src/components/SearchResults.vue

 <template>
   <section id="search_results">
-    <div class="flex-container" :class="$mq">
+    <div class="flex-container" :class="$vuetify.breakpoint.name">
       <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,7 +63,7 @@ export default {
     display: flex;
   }
 
-  .flex-container.mobile, .flex-container.tablet {
+  .flex-container.xs, .flex-container.sm {
     flex-direction: column;
   }
 

src/main.js

@@ -6,21 +6,12 @@ import DictionaryView from './components/DictionaryView.vue'
 import VueRouter from 'vue-router'
 import { VuePlausible } from 'vue-plausible'
 import vuetify from './plugins/vuetify'
-import VueMq from 'vue-mq'
 
 Vue.config.productionTip = false
 Vue.use(VueRouter)
 Vue.use(VuePlausible, {
   domain: 'beta.ordbok.uib.no'
 })
-Vue.use(VueMq, {
-  breakpoints: {
-    mobile: 470,
-    tablet: 700,
-    laptop: 1250,
-    desktop: Infinity
-  }
-})
 
 Vue.$plausible.enableAutoPageviews()
 

src/plugins/vuetify.js

@@ -5,6 +5,15 @@ import Vuetify from 'vuetify/lib/framework';
 Vue.use(Vuetify);
 
 export default new Vuetify({
+  breakpoint: {
+    thresholds: {
+      xs: 470,
+      sm: 700,
+      md: 1250,
+      lg: 1900,
+    },
+    scrollBarWidth: 24,
+  },
   theme: {
     options: {
       customProperties: true