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