diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue index 6b23bcc5311991320238cee8d33f10aaf56c8a2d..e5b2139e3806f29eda2826d94c584b3e940a7766 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 a040a75c582ab30d0ec4f59f75a11cbcf2e4c9b1..8bdd82003bf0505b4b622256801ce399bb16d250 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 5e504568376f805f10798b6b5d353a865079b8fb..6d7bb0b64da1033e0dd2d905fb30423a0e538590 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 }