From 276e4fc8ea018d5f1b5cf9c438ae082d26a1ae39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ole=20Volds=C3=A6ter?= <ole.voldsater@uib.no> Date: Thu, 4 Feb 2021 12:37:02 +0100 Subject: [PATCH] =?UTF-8?q?re=20meta#255=20la=20til=20demo=20for=20"m?= =?UTF-8?q?=C3=A5nedens=20ord"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 57 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 53 insertions(+), 4 deletions(-) diff --git a/src/App.vue b/src/App.vue index cf32efa..c2b5db6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,6 +25,16 @@ <Article :key="article_key" :article="article" @article-click="article_link_click" /> </div> <div class="welcome" v-show="! (article.error || article.lemmas.length || search_results.length || waiting)"> + <div class="monthly"> + <h2>MÃ¥nedens ord</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> + <div id="word-of-month-bm"> + <Article :article="monthly_bm" @article-click="article_link_click" /> + </div> + <div id="word-of-month-nn"> + <Article :article="monthly_nn" @article-click="article_link_click" /> + </div> + </div> </div> </main> <footer> @@ -129,7 +139,9 @@ export default { lang: 'bob,nob', waiting_for_articles: true, waiting_for_metadata: true, - article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}} + article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}, + monthly_bm: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}, + monthly_nn: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}} } }, computed: { @@ -204,6 +216,15 @@ export default { self.waiting_for_articles = false history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '') } + + // words of the month + axios.get(api_endpoint + '/bob/article/5607').then(function(response){ + self.monthly_bm = Object.assign(response.data, {dictionary: 'bob'}) + }) + + axios.get(api_endpoint + '/nob/article/78569').then(function(response){ + self.monthly_nn = Object.assign(response.data, {dictionary: 'nob'}) + }) }) }, watch: { @@ -290,7 +311,7 @@ header, #search_results, #spinner, #single_article_container, footer, div.welcom } #spinner { - padding-top: 40px; + padding-top: 40px; } header { @@ -299,8 +320,36 @@ header { background-color: #560027; } -div.welcome { - font-size: 20px; +div.monthly { + padding: 20px; + border-radius: 10px; + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: auto auto auto; + gap: 10px; + width: 100%; + background-color: rgba(256,256,256,0.5) +} + +div.monthly > h2{ + padding: 0px; + grid-row: 1; + grid-column: 1 / 3; +} + +div.monthly > p { + grid-row: 2; + grid-column: 1 / 3; +} + +div#monthly_bm { + grid-row: 3; + grid-column: 1; +} + +div#monthly_nn { + grid-row: 3; + grid-column: 2; } .top { -- GitLab