diff --git a/src/components/Article.vue b/src/components/Article.vue
index ccadb5ffde47b2cbf7be999d7f07d085d8aa0d65..b1fc1ac649e2d08f8f2e6f50a7c10dc2bc7906eb 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,28 +1,24 @@
<template>
- <article v-show="article.lemmas.length || article.error" :class="dictionary">
+ <article v-if="article" :class="dictionary">
<Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
- <section v-if="! article.error && article.body.pronunciation && article.body.pronunciation.length">
+ <section v-if="article.body.pronunciation && article.body.pronunciation.length">
<h3>Uttale</h3>
<ul>
<DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
</ul>
</section>
- <section v-if="! article.error && article.body.etymology && article.body.etymology.length">
+ <section v-if="article.body.etymology && article.body.etymology.length">
<h3>Etymologi</h3>
<ul>
<DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" />
</ul>
</section>
- <section v-if="! article.error">
+ <section>
<h3>Definisjoner</h3>
<ol>
<Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
</ol>
</section>
- <section v-if="article.error">
- <h1>Ooops...</h1>
- <p>{{article.error}}</p>
- </section>
</article>
</template>
diff --git a/src/components/DictionaryView.vue b/src/components/DictionaryView.vue
index a06381e23b97799d1084734ce68c04127c7b4d07..f57101bfedaa26993bad567acdc5aad6dbff2385 100644
--- a/src/components/DictionaryView.vue
+++ b/src/components/DictionaryView.vue
@@ -1,5 +1,5 @@
<template>
- <main :class="(article.error || article.lemmas.length || search_results.length || waiting) ? '' : 'welcome '">
+ <main :class="(article || waiting || error) ? '' : 'welcome '">
<div class="search_container">
<div class="lang_select_container">
<v-radio-group row v-model="lang">
@@ -13,12 +13,12 @@
</v-radio>
<v-radio value="bob" color="secondary">
<template v-slot:label>
- <span>bokmål</span>
+ <span><span class="verbose">bokmål (</span>bm<span class="verbose">)</span></span>
</template>
</v-radio>
<v-radio value="nob" color="secondary">
<template v-slot:label>
- <span>nynorsk</span>
+ <span><span class="verbose">nynorsk (</span>nn<span class="verbose">)</span></span>
</template>
</v-radio>
</v-radio-group>
@@ -26,14 +26,14 @@
<Autocomplete @submit="select_result" :endpoint="api_pref">
</Autocomplete>
</div>
- <div id="spinner">
- <v-progress-circular indeterminate color="secondary" size="120" v-show="waiting"></v-progress-circular>
+ <div id="spinner" v-if="waiting">
+ <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
</div>
- <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-show="! waiting" />
- <div id="single_article_container">
+ <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-if="! waiting" />
+ <div id="single_article_container" v-if="article">
<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="welcome" v-if="! (article || error || search_results.length || waiting)">
<div class="monthly">
<div>
<Article :article="monthly_bm" @article-click="article_link_click" />
@@ -43,6 +43,10 @@
</div>
</div>
</div>
+ <div class="error" v-if="error">
+ <h1>Oooops...</h1>
+ {{error}}
+ </div>
</main>
</template>
@@ -67,24 +71,19 @@ function navigate_to_article(self, source) {
.then(function(response){
self.article = Object.assign(response.data, {'dictionary': self.$route.params.lang})
self.search_results = []
+ self.error = null
})
.catch(function(error){
if (error.response && error.response.status == 404) {
- self.article = {
- lemmas: [],
- error: "Vi har ingen artikkel med id " + self.$route.params.id
- }
+ self.error = "Vi har ingen artikkel med id " + self.$route.params.id
} else {
- self.article = {
- lemmas: [],
- error: "Noe gikk galt..."
- }
+ self.error = "Noe gikk galt..."
console.log(error)
}
})
.then(function(response){
self.waiting_for_articles = false
- history.replaceState({article: self.article, search_results: [], lang: self.lang}, '')
+ history.replaceState({article: self.article, search_results: [], lang: self.lang, error: self.error}, '')
if (source) {
self.$plausible.trackEvent('internal link incoming', {props: {origin: source}})
}
@@ -96,33 +95,23 @@ function navigate_to_search(self, query) {
.then(function(response){
self.search_results = response.data
if (! self.search_results.length) {
- self.article = {
- lemmas: [],
- error: "Vi fant ingen resultater for '" + decodeURIComponent(query) + "'. (Søkeforlag kommer i en senere oppatering av Ordbøkene)"
- }
+ self.error = "Vi fant ingen resultater for '" + decodeURIComponent(query) + "'. (Søkeforlag kommer i en senere oppatering av Ordbøkene)"
+ } else {
+ self.error = null
}
})
.catch(function(error){
if (error.response && error.response.status == 400) {
- self.article = {
- lemmas: [],
- error: "Søkeuttrykket inneholder feil"
- }
+ self.error = "Søkeuttrykket inneholder feil"
} else if (error.response) {
- self.article = {
- lemmas: [],
- error: "Noe gikk galt på serversiden"
- }
+ self.error = "Noe gikk galt på serversiden"
} else {
- self.article = {
- lemmas: [],
- error: "Nettverksproblemer, prøv igjen"
- }
+ self.error = "Nettverksproblemer, prøv igjen"
}
})
.then(function(_){
self.waiting_for_articles = false
- history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
+ history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang, error: self.error}, '')
})
}
@@ -131,28 +120,21 @@ function navigate_to_word(self, word) {
.then(function(response){
self.search_results = response.data.filter(result => result.match.length == word.length)
if (! self.search_results.length) {
- self.article = {
- lemmas: [],
- error: "Ordet '" + decodeURIComponent(word) + "' finnes ikke i ordbøkene"
- }
+ self.error = "Ordet '" + decodeURIComponent(word) + "' finnes ikke i ordbøkene"
+ } else {
+ self.error = null
}
})
.catch(function(error){
if (error.response) {
- self.article = {
- lemmas: [],
- error: "Noe gikk galt på serversiden"
- }
+ self.error = "Noe gikk galt på serversiden"
} else {
- self.article = {
- lemmas: [],
- error: "Nettverksproblemer, prøv igjen"
- }
+ self.error = "Nettverksproblemer, prøv igjen"
}
})
.then(function(_){
self.waiting_for_articles = false
- history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
+ history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang, error: self.error}, '')
})
}
@@ -165,9 +147,10 @@ export default {
lang: 'bob,nob',
waiting_for_articles: true,
waiting_for_metadata: true,
- article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
- monthly_bm: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}},
- monthly_nn: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
+ article: null,
+ error: null,
+ monthly_bm: null,
+ monthly_nn: null
}
},
computed: {
@@ -188,21 +171,22 @@ export default {
if(event.articles){
this.$router.push('/' + this.lang + '/w/' + event.word)
this.search_results = event.articles
- this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
- history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '')
+ this.article = null
+ this.error = null
+ history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang, error: this.error}, '')
this.$plausible.trackEvent('dropdown selection', {props: {query: event.label, match: event.match}})
}else{
this.waiting_for_articles = true
- this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
+ this.article = null
this.$router.push(`/${this.lang}/search/${event.q}`)
navigate_to_search(this, event.q)
this.$plausible.trackEvent('dropdown selection', {props: {query: event.label, match: '<fritekstsøk>'}})
}
},
article_link_click: function(item) {
- if (this.article.article_id == item.article_id){
+ if (this.article && this.article.article_id == item.article_id){
this.article_key++
- history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '')
+ history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang, error: this.error}, '')
}else{
this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
this.waiting_for_articles = true
@@ -239,7 +223,7 @@ export default {
else {
self.lang = self.$route.params.lang || 'bob,nob'
self.waiting_for_articles = false
- history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
+ history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang, error: self.error}, '')
}
// words of the month
@@ -251,10 +235,7 @@ export default {
self.monthly_nn = Object.assign(response.data, {dictionary: 'nob'})
})
}).catch(function(_){
- self.article = {
- lemmas: [],
- error: "Et nettverksproblem hindret lasting av siden. Prøv å laste siden på nytt"
- }
+ self.error = "Et nettverksproblem hindret lasting av siden. Prøv å laste siden på nytt"
self.waiting_for_metadata = false
self.waiting_for_articles = false
})
@@ -271,6 +252,7 @@ export default {
self.article = event.state.article
self.search_results = event.state.search_results
self.lang = event.state.lang
+ self.error = event.state.error
}
}
@@ -279,8 +261,6 @@ export default {
</script>
<style>
-
-
main {
padding-bottom: 20px;
flex: 1 0 auto;
@@ -293,7 +273,7 @@ main.welcome {
background-attachment: fixed;
}
-#search_results, #spinner, #single_article_container, div.welcome, div.search_container {
+#search_results, #spinner, #single_article_container, div.welcome, div.search_container, .error {
padding-left: calc((100vw - 1000px) / 2);
padding-right: calc((100vw - 1000px) / 2);
}
@@ -324,7 +304,7 @@ div.monthly article.nob .dict-label::before {
.search_container {
- max-width: 1400px;
+ max-width: 1500px;
padding-top: 50px;
}
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 888f40673ab87b2441c460c06e5115804d676c63..935b46e0c31a5d3f77cec8dcd988d736aaef3569 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -14,7 +14,8 @@ export default new Vuetify({
primary: '#560027',
secondary: '#BC477B',
tertiary: '#FDF4F5',
- anchor: '#560027'
+ anchor: '#560027',
+ error: '#FDF4F5'
}
}
},