Skip to content
Snippets Groups Projects
Commit 80dadee4 authored by Ole Voldsæter's avatar Ole Voldsæter
Browse files

re meta#238 rydd opp i script og style

parent ffd01707
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 4
− 291
View file @ 80dadee4
......@@ -2,10 +2,10 @@
<v-app id="app">
<header>
<h1><a href="/">Ordbøkene <span class="beta">(BETA)</span></a></h1>
<p class="about-link"><a href="#">OM ORDBØKENE</a></p>
<p class="sub-title"><a href="/">Bokmålsordboka | Nynorskordboka – rett norsk</a></p>
<p class="about-link"><router-link to="/om">OM ORDBØKENE</router-link></p>
<p class="sub-title"><router-link to="/">Bokmålsordboka | Nynorskordboka – rett norsk</router-link></p>
</header>
<router-view></router-view>
<router-view :uggabuga="1"></router-view>
<footer>
<div>
<img id="srlogo" src="./assets/Sprakradet_logo_neg.png" alt="">
......@@ -18,237 +18,6 @@
</v-app>
</template>
<script>
import axios from "axios"
import entities from './utils/entities.js'
import Article from './components/Article.vue'
import SearchResults from './components/SearchResults.vue'
import Autocomplete from './components/Autocomplete.vue'
var api_endpoint = 'https://beta.ordbok.uib.no/api/dict'
axios.interceptors.request.use(function (config) {
config.headers["x-api-key"] = "ZkYiyRVXxH86ijsvhx3cH4SY5Iik2ijI3BKVJGMm"
return config;
}, function (error) {
return Promise.reject(error);
});
function navigate_to_article(self, source) {
axios.get(api_endpoint + '/' + self.$route.params.lang + '/article/' + self.$route.params.id)
.then(function(response){
self.article = Object.assign(response.data, {'dictionary': self.$route.params.lang})
self.search_results = []
})
.catch(function(error){
if (error.response && error.response.status == 404) {
self.article = {
lemmas: [],
error: "Vi har ingen artikkel med id " + self.$route.params.id
}
} else {
self.article = {
lemmas: [],
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}, '')
if (source) {
self.$plausible.trackEvent('internal link incoming', {props: {origin: source}})
}
})
}
function navigate_to_search(self, query) {
axios.get(self.api_pref + 'search?q=' + 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)"
}
}
})
.catch(function(error){
if (error.response && error.response.status == 400) {
self.article = {
lemmas: [],
error: "Søkeuttrykket inneholder feil"
}
} else if (error.response) {
self.article = {
lemmas: [],
error: "Noe gikk galt på serversiden"
}
} else {
self.article = {
lemmas: [],
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}, '')
})
}
function navigate_to_word(self, word) {
axios.get(self.api_pref + 'suggest?q=' + 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"
}
}
})
.catch(function(error){
if (error.response) {
self.article = {
lemmas: [],
error: "Noe gikk galt på serversiden"
}
} else {
self.article = {
lemmas: [],
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}, '')
})
}
export default {
name: 'App',
data: function() {
return {
article_key: 0,
search_results: [],
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: []}}
}
},
computed: {
waiting: function() {
return (this.waiting_for_articles || this.waiting_for_metadata) && this.$route.name != 'root'
},
api_pref: function() {
return api_endpoint + '/' + this.lang + '/article/'
}
},
components: {
Article,
Autocomplete,
SearchResults
},
methods: {
select_result: function(event) {
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.$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.$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){
this.article_key++
history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '')
}else{
this.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
this.waiting_for_articles = true
navigate_to_article(this, item.source)
}
}
},
mounted: function(){
let self = this
this.lang = 'bob,nob'
Promise.all([
axios.get(api_endpoint + '/bob').then(function(response){
let concepts = response.data.concepts
entities.bob = concepts
}),
axios.get(api_endpoint + '/nob').then(function(response){
let concepts = response.data.concepts
entities.nob = concepts
})
]).then(function(_) {
self.waiting_for_metadata = false
if(self.$route.name == 'word') {
self.lang = self.$route.params.lang
navigate_to_word(self, self.$route.params.word)
}
else if(self.$route.name == 'lookup'){
navigate_to_article(self, self.$route.params.id)
}
else if (self.$route.name == 'search') {
self.lang = self.$route.params.lang
navigate_to_search(self, self.$route.params.query)
}
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}, '')
}
// 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'})
})
}).catch(function(_){
self.article = {
lemmas: [],
error: "Et nettverksproblem hindret lasting av siden. Prøv å laste siden på nytt"
}
self.waiting_for_metadata = false
self.waiting_for_articles = false
})
},
watch: {
$route() {
this.$plausible.trackEvent('language', {props: {code: this.$route.params.lang}})
}
},
created: function() {
let self = this
window.onpopstate = function (event) {
if (event.state) {
self.article = event.state.article
self.search_results = event.state.search_results
self.lang = event.state.lang
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
......@@ -309,19 +78,7 @@ p.about-link > a{
color: var(--v-tertiary-base);
}
main {
padding-bottom: 20px;
flex: 1 0 auto;
background-color: var(--v-tertiary-base);
}
main.welcome {
background-image: url('./assets/books.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
header, #search_results, #spinner, #single_article_container, footer, div.welcome, div.search_container {
header, footer {
padding-left: calc((100vw - 1000px) / 2);
padding-right: calc((100vw - 1000px) / 2);
}
......@@ -332,9 +89,6 @@ header, #search_results, #spinner, #single_article_container, footer, div.welcom
}
}
#spinner {
padding-top: 40px;
}
header {
padding-top: 20px;
......@@ -342,25 +96,6 @@ header {
background-color: var(--v-primary-base);
}
div.monthly {
padding: 20px;
border-radius: 10px;
display: flex;
width: 100%;
}
div.monthly > div {
flex: 50%;
}
div.monthly article.bob .dict-label::before {
content: "månedens ";
}
div.monthly article.nob .dict-label::before {
content: "månadens ";
}
.sub-title {
font-size: 20px;
margin: 0px;
......@@ -374,24 +109,6 @@ footer {
color: #ffffff;
}
.search_container {
max-width: 1400px;
padding-top: 50px;
}
.v-label span {
color: var(--v-primary-base);
}
li.suggestion {
font-weight: bold;
padding-left: 20px;
padding-top: 5px;
padding-bottom: 5px;
border: 0px;
background-image: none;
}
footer > div {
display: table-cell;
vertical-align: middle;
......@@ -406,9 +123,5 @@ footer > div {
height: 60px;
}
::selection {
background: var(--v-secondary-base);
color: white;
}
</style>
src/components/DictionaryView.vue
+ 1
− 94
View file @ 80dadee4
......@@ -279,64 +279,8 @@ export default {
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
#app {
font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
display: flex;
flex-direction: column;
height: 100%;
}
html, body {
height: 100%
}
body {
margin: 0px;
}
h1 {
font-family: Inria Serif;
font-size: 36px;
color: var(--v-primary-base);
}
header > h1 > a {
color: var(--v-secondary-base) !important;
font-size: 40px;
margin: 0px;
text-decoration: none;
}
p.about-link {
text-align: right;
margin: 0px;
float: right;
}
header > p > a {
color: var(--v-tertiary-base) !important;
text-decoration: none;
}
span.beta {
color: #BBBBBB;
}
p.about-link > a{
text-decoration: none;
border-bottom: solid var(--v-secondary-base) 4px;
font-size: 12px;
color: var(--v-tertiary-base);
}
main {
padding-bottom: 20px;
flex: 1 0 auto;
......@@ -349,26 +293,15 @@ main.welcome {
background-attachment: fixed;
}
header, #search_results, #spinner, #single_article_container, footer, div.welcome, div.search_container {
#search_results, #spinner, #single_article_container, div.welcome, div.search_container {
padding-left: calc((100vw - 1000px) / 2);
padding-right: calc((100vw - 1000px) / 2);
}
@media (max-width: 500px) {
.verbose {
display: none;
}
}
#spinner {
padding-top: 40px;
}
header {
padding-top: 20px;
padding-bottom: 20px;
background-color: var(--v-primary-base);
}
div.monthly {
padding: 20px;
......@@ -389,18 +322,6 @@ div.monthly article.nob .dict-label::before {
content: "månadens ";
}
.sub-title {
font-size: 20px;
margin: 0px;
}
footer {
font-size: smaller;
display: table;
flex-direction: row;
background-color: var(--v-primary-base);
color: #ffffff;
}
.search_container {
max-width: 1400px;
......@@ -420,20 +341,6 @@ li.suggestion {
background-image: none;
}
footer > div {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
#srlogo {
height: 20px;
}
#uiblogo {
height: 60px;
}
::selection {
background: var(--v-secondary-base);
color: white;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment