♻️ Swapped dependencies and updated some config

This commit is contained in:
Moritz Kröger 2019-03-25 10:23:02 +00:00
parent 0a607629aa
commit a8dc4627dc
18 changed files with 145 additions and 47 deletions

16
package-lock.json generated
View file

@ -2194,6 +2194,11 @@
}
}
},
"babel-helper-vue-jsx-merge-props": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
"integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
},
"babel-helpers": {
"version": "6.24.1",
"resolved": "https://registry.npmjs.org/babel-helpers/-/babel-helpers-6.24.1.tgz",
@ -15743,10 +15748,13 @@
}
}
},
"vue-feather-icon": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vue-feather-icon/-/vue-feather-icon-1.2.0.tgz",
"integrity": "sha1-OAG40l+Z6mKXii8MQEKXbt5JdXM="
"vue-feather-icons": {
"version": "4.10.0",
"resolved": "https://registry.npmjs.org/vue-feather-icons/-/vue-feather-icons-4.10.0.tgz",
"integrity": "sha512-fmL/v7DN9HYqnkR7h16PvoMgUk41kxqgqv7yPCAcW4nXRaX1dKgnLwm8m5R2Lpu0NxwpYzRKeTvOs+ti3KaqSg==",
"requires": {
"babel-helper-vue-jsx-merge-props": "^2.0.2"
}
},
"vue-hot-reload-api": {
"version": "2.3.3",

View file

@ -18,7 +18,7 @@
"stylelint-processor-html": "^1.0.0",
"stylelint-webpack-plugin": "^0.10.5",
"vue": "^2.6.6",
"vue-feather-icon": "^1.2.0",
"vue-feather-icons": "^4.10.0",
"vue-i18n": "^8.9.0",
"vue-router": "^3.0.1",
"vue-svgicon": "^3.2.4",

View file

@ -96,6 +96,11 @@
export default {
name: 'About',
components: {
'feather-external-link': () =>
import('vue-feather-icons/icons/ExternalLinkIcon' /* webpackChunkName: "icons" */)
},
data () {
return {
polisLogo: require('@/assets/svg/polis-colored-logo.svg'),

View file

@ -23,24 +23,16 @@
</template>
<script>
import AppMenu from '@/components/app-menu'
import AppFooter from '@/components/app-footer'
import '@/assets/icons/european-stars'
export default {
name: 'App',
components: {
'app-menu': AppMenu,
'app-footer': AppFooter
},
i18n: {
messages: {
de: {
topMenu: {
index: 'Startseite',
// glossary: 'Glossar',
faq: 'FAQ',
about: 'Über uns',
press: 'Presse'
@ -61,7 +53,6 @@
en: {
topMenu: {
index: 'Landing page',
// glossary: 'Glossary',
faq: 'FAQ',
about: 'About us',
press: 'Press'
@ -103,10 +94,6 @@
label: this.$t('topMenu.index'),
route: { path: '/' }
},
// {
// label: this.$t('topMenu.glossary'),
// route: { path: this.isGermanLocale ? '/glossar' : '/glossary' }
// },
{
label: this.$t('topMenu.faq'),
route: { path: '/faq' }

View file

@ -42,6 +42,13 @@
export default {
name: 'Emphasis',
components: {
'feather-arrow-right': () =>
import('vue-feather-icons/icons/ArrowRightIcon' /* webpackChunkName: "icons" */),
'feather-corner-up-right': () =>
import('vue-feather-icons/icons/CornerUpRightIcon' /* webpackChunkName: "icons" */)
},
data () {
return {
theses,

View file

@ -25,7 +25,7 @@
<ul class="euromat-btns">
<li v-for="option in options" :key="option.label">
<button type="button" @click="submitAnswer(option, $event)">
{{ option.label }} <feather-icon :type="option.icon" />
{{ option.label }} <component :is="'feather-' + option.icon" />
</button>
</li>
</ul>
@ -49,6 +49,17 @@
export default {
name: 'EuroMat',
components: {
'feather-corner-up-right': () =>
import('vue-feather-icons/icons/CornerUpRightIcon' /* webpackChunkName: "icons" */),
'feather-circle': () =>
import('vue-feather-icons/icons/CircleIcon' /* webpackChunkName: "icons" */),
'feather-thumbs-up': () =>
import('vue-feather-icons/icons/ThumbsUpIcon' /* webpackChunkName: "icons" */),
'feather-thumbs-down': () =>
import('vue-feather-icons/icons/ThumbsDownIcon' /* webpackChunkName: "icons" */)
},
data () {
return {
currentThesis: 0,

View file

@ -26,7 +26,7 @@
<feather-zoom-in class="results-see-more" />
<party-percentage
<v-progress
class="result-percentage"
:value="party.score"
:max="totalScoredPoints"
@ -64,7 +64,6 @@
getScoringGrid
} from '@/app/euromat/scoring'
import { parties } from '@/data'
import Progress from '@/components/progress'
const addUp = (a, b) => a + b
@ -72,7 +71,10 @@
name: 'Results',
components: {
'party-percentage': Progress
'feather-zoom-in': () =>
import('vue-feather-icons/icons/ZoomInIcon' /* webpackChunkName: "icons" */),
'feather-rotate-cw': () =>
import('vue-feather-icons/icons/RotateCwIcon' /* webpackChunkName: "icons" */)
},
data () {

View file

@ -111,6 +111,13 @@
export default {
name: 'Imprint',
components: {
'feather-mail': () =>
import('vue-feather-icons/icons/MailIcon' /* webpackChunkName: "icons" */),
'feather-phone': () =>
import('vue-feather-icons/icons/PhoneIcon' /* webpackChunkName: "icons" */)
},
data () {
return {
social: {

View file

@ -23,6 +23,11 @@
export default {
name: 'Intro',
components: {
'feather-check-circle': () =>
import('vue-feather-icons/icons/CheckCircleIcon' /* webpackChunkName: "icons" */)
},
computed: {
thesesPath () {
return this.$i18n.locale === 'de'

View file

@ -32,7 +32,7 @@
<p>{{ $t('party.legend') }}:</p>
<ul>
<li v-for="option in options" :key="option.position">
<feather-icon :type="positionToIconName(option.position)" />
<component :is="'feather-' + positionToIconName(option.position)" />
<span>{{ $t(`euromat.options.${option.position}`) }}</span>
</li>
</ul>
@ -51,17 +51,17 @@
<div class="thesis-facts">
<div class="list-thesis" @click="toggleStatement(thesis.id)">
<div class="thesis-subline">
<feather-icon :type="chevronIcon(thesis.id)" />
<component :is="'feather-' + chevronIcon(thesis.id)" />
<span>{{ getCategory(thesis.category) }}</span>
</div>
<h3>{{ getThesis(thesis.thesis) }}</h3>
</div>
<div class="statements-party">
<feather-icon :type="getPartyPosition(thesis.id)" />
<component :is="'feather-' + getPartyPosition(thesis.id)" />
</div>
<div v-if="!!answers" class="statements-user">
<feather-icon :type="getUserPosition(thesis.id)" />
<component :is="'feather-' + getUserPosition(thesis.id)" />
</div>
</div>
@ -89,6 +89,25 @@
export default {
name: 'Party',
components: {
'feather-external-link': () =>
import('vue-feather-icons/icons/ExternalLinkIcon' /* webpackChunkName: "icons" */),
'feather-corner-up-left': () =>
import('vue-feather-icons/icons/CornerUpLeftIcon' /* webpackChunkName: "icons" */),
'feather-chevron-up': () =>
import('vue-feather-icons/icons/ChevronUpIcon' /* webpackChunkName: "icons" */),
'feather-chevron-down': () =>
import('vue-feather-icons/icons/ChevronDownIcon' /* webpackChunkName: "icons" */),
'feather-circle': () =>
import('vue-feather-icons/icons/CircleIcon' /* webpackChunkName: "icons" */),
'feather-thumbs-up': () =>
import('vue-feather-icons/icons/ThumbsUpIcon' /* webpackChunkName: "icons" */),
'feather-thumbs-down': () =>
import('vue-feather-icons/icons/ThumbsDownIcon' /* webpackChunkName: "icons" */),
'feather-x': () =>
import('vue-feather-icons/icons/XIcon' /* webpackChunkName: "icons" */)
},
data () {
let answers

View file

@ -11,7 +11,12 @@
<script>
export default {
name: 'Presse'
name: 'Presse',
components: {
'feather-mail': () =>
import('vue-feather-icons/icons/MailIcon' /* webpackChunkName: "icons" */)
}
}
</script>

View file

@ -1,16 +1,17 @@
<template>
<div class="footer">
<ul class="footer-social">
<li v-for="(item, index) of social"
:key="index"
:data-message="item.label === 'clipboard' ? item.message : ''"
:class="{ 'show-info': item.label === 'clipboard' && showClipboardInfo }"
<li v-for="item of social"
:key="item.label"
:data-message="getMessage(item)"
:class="getSocialClass(item)"
>
<button class="btn-dark" @click="share(item)">
<feather-icon :type="item.icon" />
<component :is="'feather-' + item.icon" />
</button>
</li>
</ul>
<ul class="footer-menu">
<li v-for="item of menu" :key="item.label">
<router-link tag="a" :to="item.route">
@ -25,6 +26,15 @@
export default {
name: 'AppFooter',
components: {
'feather-twitter': () =>
import('vue-feather-icons/icons/TwitterIcon' /* webpackChunkName: "icons" */),
'feather-facebook': () =>
import('vue-feather-icons/icons/FacebookIcon' /* webpackChunkName: "icons" */),
'feather-clipboard': () =>
import('vue-feather-icons/icons/ClipboardIcon' /* webpackChunkName: "icons" */)
},
props: {
menu: { type: Array, default: () => [] },
social: { type: Array, default: () => [] }
@ -39,6 +49,16 @@
},
methods: {
getMessage (item) {
return item.label === 'clipboard'
? item.message
: ''
},
getSocialClass (item) {
return {
'show-info': item.label === 'clipboard' && this.showClipboardInfo
}
},
// https://stackoverflow.com/a/16861050/1724106
getPopupDimensions (w = 800, h = 600) {
const { screenLeft, screenTop, innerWidth, innerHeight } = window
@ -96,8 +116,8 @@
this.showClipboardInfo = true
setTimeout(() => { this.showClipboardInfo = false }, this.infoTimeout)
}
} catch (err) {
console.log('Oops, unable to copy')
} catch (error) {
console.log('Oops, unable to copy', error)
}
document.body.removeChild($textarea)

1
src/config/index.js Normal file
View file

@ -0,0 +1 @@
export const DEFAULT_LOCALE = 'de'

View file

@ -3,7 +3,6 @@ import VueI18n from 'vue-i18n'
import { i18n as intro } from '@/app/intro'
import { i18n as euromat } from '@/app/euromat'
// import { i18n as glossary } from '@/app/glossary'
import { i18n as party } from '@/app/party'
import { i18n as about } from '@/app/about'
import { i18n as fourzerofour } from '@/app/404'
@ -12,16 +11,17 @@ import { i18n as press } from '@/app/press'
import { i18n as imprint } from '@/app/imprint'
import { i18n as privacy } from '@/app/privacy'
import { DEFAULT_LOCALE } from '@/config'
Vue.use(VueI18n)
export default new VueI18n({
locale: localStorage.getItem('euromat-locale') || 'de',
fallbackLocale: 'de',
locale: localStorage.getItem('euromat-locale') || DEFAULT_LOCALE,
fallbackLocale: DEFAULT_LOCALE,
messages: {
de: {
...intro.de,
...euromat.de,
// ...glossary.de,
...party.de,
...about.de,
...fourzerofour.de,
@ -33,7 +33,6 @@ export default new VueI18n({
en: {
...intro.en,
...euromat.en,
// ...glossary.en,
...party.en,
...about.en,
...fourzerofour.en,

View file

@ -1,16 +1,16 @@
import Vue from 'vue'
import VueSVGIcon from 'vue-svgicon'
import VueFeatherIcon from 'vue-feather-icon'
import App from '@/app/app'
import router from './router'
import i18n from './i18n'
import router from '@/router'
import i18n from '@/i18n'
import storage from '@/helper/storage'
import './registerServiceWorker'
import '@/registerComponents'
import '@/registerServiceWorker'
Vue.config.productionTip = false
Vue.use(VueSVGIcon)
Vue.use(VueFeatherIcon)
Vue.use(storage)
new Vue({

22
src/registerComponents.js Normal file
View file

@ -0,0 +1,22 @@
import Vue from 'vue'
/**
* Register all base components globally, as they will be used all over the
* codebase. This file loads all files from the 'src/components/' directory
* and normalizes their filename to become the components name.
* Examples:
* fileName => componentName
* ./AuthProviderList.vue => auth-provider-list
* ./Button.vue => v-button
*/
const requireComponent = require.context('./components', false, /\.vue$/)
const fileNameToComponentName = file => file.substr(2).replace(/\.vue/, '')
const pascalToKebab = name => name.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
const addPrefix = name => name.includes('-') ? name : `v-${name}`
for (const fileName of requireComponent.keys()) {
const componentConfig = requireComponent(fileName)
const componentName = addPrefix(pascalToKebab(fileNameToComponentName(fileName)))
Vue.component(componentName, componentConfig.default || componentConfig)
}

View file

@ -1,5 +1,7 @@
import { DEFAULT_LOCALE } from '@/config'
export default function getPageTitle (i18n = {}) {
const locale = localStorage.getItem('euromat-locale') || 'de'
const locale = localStorage.getItem('euromat-locale') || DEFAULT_LOCALE
const title = window.document.title.split('—')[0].trim()
return `${title}${i18n[locale]}`
}

View file

@ -4,7 +4,6 @@ import Router from 'vue-router'
import getPageTitle from './getPageTitle'
import { routes as intro } from '@/app/intro'
import { routes as euromat } from '@/app/euromat'
// import { routes as glossary } from '@/app/glossary'
import { routes as party } from '@/app/party'
import { routes as about } from '@/app/about'
import { routes as faq } from '@/app/faq'
@ -20,7 +19,6 @@ const router = new Router({
routes: [
...intro,
...euromat,
// ...glossary,
...party,
...about,
...faq,