Skip to content
Snippets Groups Projects
Commit 767c6704 authored by Henrik Askjer's avatar Henrik Askjer
Browse files

Merge branch 'revamp-buttons' into 'dev' 

Revamp buttons

See merge request spraksamlingane/beta.ordbok.uib.no!94
parents afdb0a8c d22b11fe
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
package-lock.json
+ 6
− 114
View file @ 767c6704
...@@ -8,20 +8,15 @@ ...@@ -8,20 +8,15 @@
"name": "ordbok_vue", "name": "ordbok_vue",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"axios": "^0.21.1", "axios": "^0.21.1",
"axios-cache-adapter": "^2.7.3", "axios-cache-adapter": "^2.7.3",
"core-js": "~3.6.5", "core-js": "~3.6.5",
"debounce": "^1.2.1", "debounce": "^1.2.1",
"inflection-table": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.31/raw/module.tar.gz?job=publish", "inflection-table": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.40/raw/module.tar.gz?job=publish",
"vue": "^2.6.12", "vue": "^2.6.12",
"vue-material-design-icons": "^4.11.0", "vue-material-design-icons": "^4.11.0",
"vue-plausible": "^1.1.4", "vue-plausible": "^1.1.4",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-social-sharing": "^3.0.8",
"vuetify": "^2.5.8" "vuetify": "^2.5.8"
}, },
"devDependencies": { "devDependencies": {
...@@ -1700,60 +1695,6 @@ ...@@ -1700,60 +1695,6 @@
"node": ">=6.9.0" "node": ">=6.9.0"
} }
}, },
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "0.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "1.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-brands-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
"integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/vue-fontawesome": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.2.tgz",
"integrity": "sha512-ecpKSBUWXsxRJVi/dbOds4tkKwEcBQ1JSDZFzE2jTFpF8xIh3OgTX8POIor6bOltjibr3cdEyvnDjecMwUmxhQ==",
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": ">= 1.2.0 < 1.3",
"vue": "~2"
}
},
"node_modules/@hapi/address": { "node_modules/@hapi/address": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
...@@ -8655,9 +8596,9 @@ ...@@ -8655,9 +8596,9 @@
"dev": true "dev": true
}, },
"node_modules/inflection-table": { "node_modules/inflection-table": {
"version": "0.2.31", "version": "0.2.40",
"resolved": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.31/raw/module.tar.gz?job=publish", "resolved": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.40/raw/module.tar.gz?job=publish",
"integrity": "sha512-wB9qG4VFILPhpo3a0YcZWGhGUTtNdcVhw76LJAUNorRlunaAqADznEXDaFoY5qxjuJkRJGxGe1lQZAioX47a1g==", "integrity": "sha512-MOM71YWLmGPerc7ViWSouhWujHuNBaFb9ahnu82TJOSsWQK4qpDAtr791Y85PZgxVQjyneGAaBnQ5UVc+bI2xw==",
"dependencies": { "dependencies": {
"core-js": "~3.6.5", "core-js": "~3.6.5",
"jquery": "^3.5.1", "jquery": "^3.5.1",
...@@ -15011,14 +14952,6 @@ ...@@ -15011,14 +14952,6 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
"integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==" "integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
}, },
"node_modules/vue-social-sharing": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/vue-social-sharing/-/vue-social-sharing-3.0.8.tgz",
"integrity": "sha512-56gOES9fq7kyzuW7+lVAKtoG9Wi4MGjIfMqXAFZv1QSwW00EN0X5zJDSQjZn1Y2cIU6DUG+1KfJB7r7nTuiISA==",
"peerDependencies": {
"vue": "^2.6.10"
}
},
"node_modules/vue-style-loader": { "node_modules/vue-style-loader": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
...@@ -17209,41 +17142,6 @@ ...@@ -17209,41 +17142,6 @@
"to-fast-properties": "^2.0.0" "to-fast-properties": "^2.0.0"
} }
}, },
"@fortawesome/fontawesome-common-types": {
"version": "0.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
"integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.35",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
"integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/free-brands-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
"integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.15.3",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
"integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.35"
}
},
"@fortawesome/vue-fontawesome": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-2.0.2.tgz",
"integrity": "sha512-ecpKSBUWXsxRJVi/dbOds4tkKwEcBQ1JSDZFzE2jTFpF8xIh3OgTX8POIor6bOltjibr3cdEyvnDjecMwUmxhQ==",
"requires": {}
},
"@hapi/address": { "@hapi/address": {
"version": "2.1.4", "version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
...@@ -22851,8 +22749,8 @@ ...@@ -22851,8 +22749,8 @@
"dev": true "dev": true
}, },
"inflection-table": { "inflection-table": {
"version": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.31/raw/module.tar.gz?job=publish", "version": "https://git.app.uib.no/api/v4/projects/16442/jobs/artifacts/0.2.40/raw/module.tar.gz?job=publish",
"integrity": "sha512-wB9qG4VFILPhpo3a0YcZWGhGUTtNdcVhw76LJAUNorRlunaAqADznEXDaFoY5qxjuJkRJGxGe1lQZAioX47a1g==", "integrity": "sha512-MOM71YWLmGPerc7ViWSouhWujHuNBaFb9ahnu82TJOSsWQK4qpDAtr791Y85PZgxVQjyneGAaBnQ5UVc+bI2xw==",
"requires": { "requires": {
"core-js": "~3.6.5", "core-js": "~3.6.5",
"jquery": "^3.5.1", "jquery": "^3.5.1",
...@@ -28006,12 +27904,6 @@ ...@@ -28006,12 +27904,6 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.2.tgz",
"integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ==" "integrity": "sha512-807gn82hTnjCYGrnF3eNmIw/dk7/GE4B5h69BlyCK9KHASwSloD1Sjcn06zg9fVG4fYH2DrsNBZkpLtb25WtaQ=="
}, },
"vue-social-sharing": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/vue-social-sharing/-/vue-social-sharing-3.0.8.tgz",
"integrity": "sha512-56gOES9fq7kyzuW7+lVAKtoG9Wi4MGjIfMqXAFZv1QSwW00EN0X5zJDSQjZn1Y2cIU6DUG+1KfJB7r7nTuiISA==",
"requires": {}
},
"vue-style-loader": { "vue-style-loader": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
package.json
+ 0
− 5
View file @ 767c6704
...@@ -8,10 +8,6 @@ ...@@ -8,10 +8,6 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"axios": "^0.21.1", "axios": "^0.21.1",
"axios-cache-adapter": "^2.7.3", "axios-cache-adapter": "^2.7.3",
"core-js": "~3.6.5", "core-js": "~3.6.5",
...@@ -21,7 +17,6 @@ ...@@ -21,7 +17,6 @@
"vue-material-design-icons": "^4.11.0", "vue-material-design-icons": "^4.11.0",
"vue-plausible": "^1.1.4", "vue-plausible": "^1.1.4",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vue-social-sharing": "^3.0.8",
"vuetify": "^2.5.8" "vuetify": "^2.5.8"
}, },
"devDependencies": { "devDependencies": {
......
src/components/Article.vue
+ 13
− 1
View file @ 767c6704
...@@ -127,8 +127,16 @@ article { ...@@ -127,8 +127,16 @@ article {
background-color: #ffffff; background-color: #ffffff;
} }
.xs .article_footer, .sm .article_footer {
display: none;
}
.welcome .article_footer {
display: block;
}
#single_article_container article { #single_article_container article {
border: solid 2px var(--v-primary-base); border: solid 1px var(--v-primary-base);
} }
.fade { .fade {
...@@ -219,5 +227,9 @@ ul li.definition { ...@@ -219,5 +227,9 @@ ul li.definition {
text-decoration: none; text-decoration: none;
} }
.info-card {
padding: 12px;
}
</style> </style>
src/components/ArticleFooter.vue
+ 95
− 48
View file @ 767c6704
<template> <template>
<div class="article_footer"> <div class="article_footer">
<span v-if="hasPointer"> <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link">
<button aria-label="Del ordboksartikkel på Facebook" class="share_button" tabindex="0"> <v-icon small>link</v-icon> <span class = "button-text">Kopier lenke</span>
<ShareNetwork network="facebook" </v-btn>
title=""
:url="share_link" <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare">
tabindex="-1"> <v-icon x-small>share</v-icon><span class = "button-text">Del ordet</span>
<v-icon dense>$vuetify.icons.facebook</v-icon> </v-btn>
</ShareNetwork> <v-dialog max-width="600px" rounded="0" v-model="citation_dialog">
</button> <template v-slot:activator="{ on, attrs }">
<button aria-label="Del del ordboksartikkel på Twitter" class="share_button" tabindex="0"> <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" v-on="on" v-bind="attrs">
<ShareNetwork <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span>
network="twitter" </v-btn>
:url="share_link"
:title="dict_label" </template>
hashtags="#ordbøkene"
tabindex="-1"> <v-card rounded="0" class="info-card">
<v-icon dense>$vuetify.icons.twitter</v-icon> {{{"nn": "Ønskjer du å sitere denne artikkelen i Nynorskordboka, rår vi deg til å gje opp når artikkelen vart henta (lesen), t.d. slik:",
</ShareNetwork> "bm": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:"}[this.article.dictionary]}}<br/>
</button> <div id = "citation" v-html="this.create_citation()"/>
</span> <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="copy_citation"><br>
<button v-if="webShareApiSupported" aria-label="Del ordboksartikkelen med andre" class="share_button" tabindex="0" @click="shareViaWebShare"> <v-icon x-small icon>content_copy</v-icon> <span class = "button-text">Kopier</span>
<span v-if="!hasPointer" class = "share_text">Del ordet</span> </v-btn>
<v-icon dense>$vuetify.icons.share</v-icon> <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="download_ris"><br>
</button> <v-icon x-small icon>get_app</v-icon> <span class = "button-text">Last ned (RIS)</span>
<div class = "footer_title" tabindex="0">Ordbøkene.no </v-btn>
</div> <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" @click="close_citation_dialog"><br>
<v-icon x-small icon>close</v-icon> <span class = "button-text">Avbryt</span>
</v-btn>
</v-card>
</v-dialog>
</div> </div>
</template> </template>
<script> <script>
const host = window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href
export default { export default {
name: 'ArticleFooter', name: 'ArticleFooter',
props: { props: {
article: Object article: Object
}, },
computed: { computed: {
dict_label: function() { // TODO: reuse code used in header
return {
'bm': 'Fra bokmålsordboka',
'nn': 'Frå nynorskordboka'
}[this.article.dictionary] + ': ' + this.article.lemmas[0].lemma || ''
},
webShareApiSupported() { webShareApiSupported() {
return navigator.share return navigator.share
}, },
hasPointer() { hasPointer() {
return window.matchMedia('(hover: hover) and (pointer: fine)').matches return window.matchMedia('(hover: hover) and (pointer: fine)').matches
}, },
share_link: function() { },
let host = window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href data: function() {
return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma) return {
citation_dialog: false
} }
}, },
methods: { methods: {
shareViaWebShare() { shareViaWebShare() {
...@@ -60,26 +62,71 @@ export default { ...@@ -60,26 +62,71 @@ export default {
text: "", text: "",
url: "/" + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma) url: "/" + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
}) })
} },
create_link() {
return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma)
},
get_citation_info() {
let date = new Date();
let dd = (date.getDate() < 10? '0' : '') + date.getDate()
let mm = (date.getMonth() < 9? '0' : '') + (date.getMonth()+1)
let yyyy = date.getFullYear()
let link = this.create_link()
let lemma = this.article.lemmas[0].lemma
return [lemma, dd, mm, yyyy, link]
},
create_citation() {
const [lemma, dd, mm, yyyy, link] = this.get_citation_info()
let citation = {"bm": `«${lemma}». I: <em>Bokmålsordboka.</em> Språkrådet og Universitetet i Bergen. &lt;<a href='${link}'>${link}</a>&gt; (hentet ${dd}.${mm}.${yyyy}).`,
"nn":`«${lemma}». I: <em>Nynorskordboka.</em> Språkrådet og Universitetet i Bergen. &lt;<a href='${link}'>${link}</a>&gt; (henta ${dd}.${mm}.${yyyy}).`
}[this.article.dictionary]
return citation
},
copy_link() {
navigator.clipboard.writeText(this.create_link());
},
copy_citation() {
let citation = document.getElementById("citation").textContent;
navigator.clipboard.writeText(citation)
this.citation_dialog = false
},
close_citation_dialog() {
this.citation_dialog = false
},
download_ris() {
const [lemma, dd, mm, yyyy, link] = this.get_citation_info()
const a = document.createElement("a")
a.style = "display: none"
a.setAttribute("download", `${lemma}_${this.article.dictionary}.ris`)
const dict = {"bm":"Bokmålsordboka", "nn": "Nynorskordboka"}[this.article.dictionary]
const text = `TY - DICT\nTI - ${lemma}\nT2 - ${dict}\nPB - Språkrådet og Universitetet i Bergen\nUR - ${link}\nY2 - ${yyyy}/${mm}/${dd}/\nER - `
a.setAttribute('href', 'data:application/x-research-info-systems;charset=utf-8,' + encodeURIComponent(text));
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
},
} }
} }
</script> </script>
<style scoped> <style scoped>
.share_text { .button-text {
padding-right: 10px; padding-left: 3px;
vertical-align: middle; font-size: 12px;
color: var(--v-primary-base) !important;
} }
.v-icon { .v-icon {
color: var(--v-primary-base) !important; color: var(--v-primary-base) !important;
} }
.share_button { .toolbar-button {
padding-right: 4px; margin-right: 6px;
font-weight: bold; margin-top: 6px;
font-size: 14px; font-size: 12px;
} }
...@@ -88,11 +135,11 @@ export default { ...@@ -88,11 +135,11 @@ export default {
padding-top: 24px; padding-top: 24px;
} }
.footer_title { #citation {
font-family: Inria Serif; margin-top: 12px;
font-weight: bold; padding: 12px;
font-size: 18px; background-color: var(--v-button-base) !important;
float: right; margin-bottom: 6px;
} }
</style> </style>
src/components/Header.vue
+ 39
− 71
View file @ 767c6704
...@@ -19,13 +19,17 @@ ...@@ -19,13 +19,17 @@
</v-card> </v-card>
</v-menu>) </v-menu>)
</span> </span>
<div class="inflection-wrapper" v-if="inflected">
<details :title="inflect_tooltip" @toggle="toggle()" v-if="inflected" :class="$vuetify.breakpoint.name">
<summary :class="dictionary" onclick="this.blur()" tabindex="0">bøying</summary> <v-btn class="show-inflection" width="160px" rounded depressed small @click.native="toggle" :class="$vuetify.breakpoint.name">
<div class="inflection-canvas"> <span>{{inflection_button_text}}</span><span class = "inflection-arrow">{{inflection_arrow}}</span>
</v-btn>
<div class="inflection-canvas" v-if="inflection_expanded">
<inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" /> <inflectionTable :lemmaList="lemmas_with_word_class_and_lang" :mq="$vuetify.breakpoint.name" />
</div> </div>
</details>
</div>
</div> </div>
</template> </template>
...@@ -67,6 +71,15 @@ export default { ...@@ -67,6 +71,15 @@ export default {
'nn': 'nynorskordboka' 'nn': 'nynorskordboka'
}[this.dictionary] || '' }[this.dictionary] || ''
}, },
inflection_button_text: function() {
return {
"bm": {false: "Se bøyning", true: "Skjul bøyning"},
"nn": {false: "Sjå bøying", true: "Skjul bøying"}
}[this.dictionary][this.inflection_expanded]
},
inflection_arrow: function() {
return this.inflection_expanded? "▲" : "▼"
},
group_list: function() { group_list: function() {
return helpers.group_list(this.lemmas, this.dictionary) return helpers.group_list(this.lemmas, this.dictionary)
}, },
...@@ -100,15 +113,18 @@ export default { ...@@ -100,15 +113,18 @@ export default {
data: function() { data: function() {
return { return {
inflect_reported: false, inflect_reported: false,
menu: false menu: false,
inflection_expanded: false
} }
}, },
methods: { methods: {
toggle: function() { toggle: function() {
this.inflection_expanded = !this.inflection_expanded
if (! this.inflect_reported) { if (! this.inflect_reported) {
this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}}) this.$plausible.trackEvent('open inflection', {props: {article: `/${this.dictionary}/${this.article_id}/${this.lemmas[0].lemma}`}})
} }
this.inflect_reported = true this.inflect_reported = true
} }
} }
} }
...@@ -118,11 +134,6 @@ export default { ...@@ -118,11 +134,6 @@ export default {
<style> <style>
summary {
width: 30em;
text-align: center;
}
article h2 { article h2 {
padding-top: 4px; padding-top: 4px;
padding-bottom: 0px; padding-bottom: 0px;
...@@ -142,10 +153,6 @@ article h2.secondary_header { ...@@ -142,10 +153,6 @@ article h2.secondary_header {
width: 10px; width: 10px;
} }
.info-card {
padding: 12px;
}
.word-classification { .word-classification {
text-decoration: underline dashed; text-decoration: underline dashed;
} }
...@@ -160,56 +167,18 @@ article h2.secondary_header { ...@@ -160,56 +167,18 @@ article h2.secondary_header {
font-variant-caps: all-small-caps; font-variant-caps: all-small-caps;
} }
.header details {
margin-top: 10px;
position: relative;
}
.header summary {
position: relative;
max-width: 130px;
list-style: none;
border: solid 2px var(--v-primary-base);
border-radius: 30px;
padding-top: 6px;
padding-bottom: 6px;
padding-right: 10px;
color: var(--v-primary-base);
cursor: pointer;
}
.header details[open] > summary {
box-shadow: 2px 2px 0px var(--v-primary-base)
}
.header details > summary:after {
content: "⌄";
font-weight: bold;
position: absolute;
right: 0;
top: 1px;
margin-right: 3px;
}
.header details > summary.bm:before {
content: "Se ";
}
.header details > summary.nn:before { .show-inflection {
content: "Sjå "; color: var(--v-primary-base) !important;
font-weight: bold !important;
} }
.header details[open] > summary.bm:before, details[open] > summary.nn:before {
content: "Skjul ";
}
.header details[open] > summary:after { .inflection-arrow {
content: "⌃";
font-weight: bold;
position: absolute; position: absolute;
right: 0; right: -4px;
top: 8px; margin-left: 3px;
margin-right: 3px; font-size: 10px;
} }
@keyframes open { @keyframes open {
...@@ -221,10 +190,6 @@ article h2.secondary_header { ...@@ -221,10 +190,6 @@ article h2.secondary_header {
} }
} }
.header details[open] summary ~ * {
animation: open 0.3s ease-in-out;
}
.inflection-canvas { .inflection-canvas {
overflow-x: auto; overflow-x: auto;
/*position: absolute;*/ /*position: absolute;*/
...@@ -234,14 +199,17 @@ article h2.secondary_header { ...@@ -234,14 +199,17 @@ article h2.secondary_header {
padding-top: 10px; padding-top: 10px;
} }
.header details > summary::-webkit-details-marker {
display: none;
}
.infl-wrapper { .inflection-wrapper {
color: var(--v-primary-base); color: var(--v-text-base);
width: min-content; width: min-content;
font-size: 14px; font-size: 14px;
overflow-x: auto;
margin-top: 10px;
}
#search_results .xs .inflection-wrapper, #search_results .sm .inflection-wrapper {
display: none;
} }
.context { .context {
...@@ -264,8 +232,8 @@ th, td { ...@@ -264,8 +232,8 @@ th, td {
} }
th { th {
background-color: var(--v-tertiary-darken1); background-color: var(--v-button-base);
color: var(--v-primary-darken1); color: var(--v-primary-darken1)
} }
.infl-label { .infl-label {
......
src/main.js
+ 0
− 3
View file @ 767c6704
...@@ -7,9 +7,6 @@ import VueRouter from 'vue-router' ...@@ -7,9 +7,6 @@ import VueRouter from 'vue-router'
import { VuePlausible } from 'vue-plausible' import { VuePlausible } from 'vue-plausible'
import vuetify from './plugins/vuetify' import vuetify from './plugins/vuetify'
import VueSocialSharing from 'vue-social-sharing'
Vue.use(VueSocialSharing);
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueRouter) Vue.use(VueRouter)
......
src/plugins/vuetify.js
+ 1
− 33
View file @ 767c6704
import Vue from 'vue'; import Vue from 'vue';
import 'material-design-icons-iconfont/dist/material-design-icons.css'; import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vuetify from 'vuetify/lib/framework'; import Vuetify from 'vuetify/lib/framework';
import { library } from '@fortawesome/fontawesome-svg-core'
import { faShareAltSquare, faInfoCircle} from '@fortawesome/free-solid-svg-icons'
import { faFacebookSquare, faTwitterSquare} from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare, faInfoCircle)
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.use(Vuetify); Vue.use(Vuetify);
const FONTAWESOME_ICONS = {
facebook: {
component: FontAwesomeIcon,
props: {
icon: ["fab", "facebook-square"]
}
},
twitter: {
component: FontAwesomeIcon,
props: {
icon: ["fab", "twitter-square"]
}
},
share: {
component: FontAwesomeIcon,
props: {
icon: "share-alt-square"
}
},
info: {
component: FontAwesomeIcon,
props: {
icon: ["fa", "info-circle"]
}
}
}
export default new Vuetify({ export default new Vuetify({
breakpoint: { breakpoint: {
...@@ -59,6 +27,7 @@ export default new Vuetify({ ...@@ -59,6 +27,7 @@ export default new Vuetify({
anchor: '#880E4F', anchor: '#880E4F',
error: '#FDF4F5', error: '#FDF4F5',
border: '#9E9E9E', border: '#9E9E9E',
button: '#f5f5f5',
text: '#000000' text: '#000000'
} }
} }
...@@ -69,6 +38,5 @@ export default new Vuetify({ ...@@ -69,6 +38,5 @@ export default new Vuetify({
}, },
icons: { icons: {
iconfont: 'md', iconfont: 'md',
values: FONTAWESOME_ICONS,
} }
}); });
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