kandimat-user-app/src/app/app.vue

195 lines
3.7 KiB
Vue
Raw Normal View History

2017-08-10 23:14:45 +02:00
<template>
<div id="app">
2017-08-16 22:48:38 +02:00
<app-menu
:main="topMenu"
:sub="subMenu"
:languages="languages"
:socialMedia="socialMedia" />
2017-08-12 23:00:43 +02:00
<main>
2017-08-10 23:14:45 +02:00
<router-view></router-view>
</main>
2017-08-12 23:00:43 +02:00
<div class="app-background">
<svgicon
name="european-stars"
width="10em"
height="10em"
scale="4"
color="black" />
</div>
2017-08-10 23:14:45 +02:00
</div>
</template>
<script>
import Menu from '@/components/menu'
2017-08-12 23:00:43 +02:00
import '@/assets/icons/european-stars'
2017-08-10 23:14:45 +02:00
export default {
2017-08-15 22:25:25 +02:00
name: 'App',
components: {
'app-menu': Menu
},
2017-08-13 14:03:38 +02:00
i18n: {
messages: {
de: {
2017-08-15 20:26:34 +02:00
topMenu: {
2017-08-13 14:03:38 +02:00
index: 'Startseite',
2017-08-15 20:26:34 +02:00
about: 'Über uns',
2017-08-13 14:03:38 +02:00
faq: 'FAQ',
2017-08-15 20:26:34 +02:00
press: 'Presse'
},
subMenu: {
imprint: 'Impressum',
privacy: 'Datenschutz'
2017-08-13 14:03:38 +02:00
}
},
en: {
2017-08-15 20:26:34 +02:00
topMenu: {
2017-08-13 14:03:38 +02:00
index: 'Main page',
2017-08-15 20:26:34 +02:00
about: 'About us',
2017-08-13 14:03:38 +02:00
faq: 'FAQ',
2017-08-15 20:26:34 +02:00
press: 'Press'
},
subMenu: {
imprint: 'Imprint',
privacy: 'Data privacy'
2017-08-13 14:03:38 +02:00
}
}
}
},
data () {
return {
2017-08-13 14:03:38 +02:00
languages: [
{ label: '🇩🇪', locale: 'de' },
{ label: '🇬🇧', locale: 'en' }
2017-08-16 22:48:38 +02:00
],
socialMedia: [
{ label: 'Twitter' },
{ label: 'Facebook' },
{ label: 'Clipboard' }
2017-08-13 14:03:38 +02:00
]
}
},
computed: {
isGermanLocale () {
return this.$i18n.locale === 'de'
},
2017-08-15 20:26:34 +02:00
topMenu () {
2017-08-13 14:03:38 +02:00
return [
{
label: this.$t('topMenu.index'),
route: { path: '/' }
},
{
label: this.$t('topMenu.about'),
route: { path: this.isGermanLocale ? '/über-uns' : '/about-us' }
},
{
label: this.$t('topMenu.faq'),
route: { path: '/faq' }
},
{
label: this.$t('topMenu.press'),
route: { path: this.isGermanLocale ? '/presse' : '/press' }
}
2017-08-15 20:26:34 +02:00
]
},
subMenu () {
return [
{
label: this.$t('subMenu.imprint'),
route: { path: this.isGermanLocale ? '/impressum' : '/imprint' }
},
{
label: this.$t('subMenu.privacy'),
route: { path: this.isGermanLocale ? '/datenschutz' : '/privacy' }
}
]
}
}
2017-08-10 23:14:45 +02:00
}
</script>
<style lang="scss">
@import "~node_modules/normalize.css/normalize";
2017-08-13 14:03:38 +02:00
@import "~styles/buttons";
@import "~styles/colors";
2017-08-12 23:00:43 +02:00
@import "~styles/layout";
2017-08-10 23:14:45 +02:00
$app-width: 850px;
2017-08-10 23:14:45 +02:00
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
2017-08-10 23:47:40 +02:00
html,
2017-08-10 23:14:45 +02:00
body {
2017-08-10 23:47:40 +02:00
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
2017-08-12 23:00:43 +02:00
align-items: flex-start;
2017-08-10 23:14:45 +02:00
}
2017-08-10 23:47:40 +02:00
body {
background: $background-primary;
color: $text-color-base;
2017-08-10 23:14:45 +02:00
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-size: 16px;
2017-08-10 23:14:45 +02:00
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
2017-08-12 23:00:43 +02:00
}
h1 {
margin: 0;
2017-08-10 23:14:45 +02:00
}
2017-08-10 23:47:40 +02:00
2017-08-16 22:48:38 +02:00
p {
line-height: 150%;
}
a {
2017-08-12 23:00:43 +02:00
color: $text-color-base;
2017-08-13 18:26:20 +02:00
2017-08-12 23:00:43 +02:00
&:hover {
color: $text-color-special;
}
}
#app {
max-width: $app-width;
width: 95vw;
2017-08-12 23:00:43 +02:00
display: flex;
align-items: flex-start;
position: relative;
margin: $base-gap * 3 0;
2017-08-12 23:00:43 +02:00
}
main {
2017-08-13 18:26:20 +02:00
background: transparentize($background-primary, 0.5);
2017-08-12 23:00:43 +02:00
width: 100%;
position: relative;
z-index: 1;
}
.app-background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
svg {
position: absolute;
top: 0;
transform: translate(-65%, -53%);
2017-08-13 18:26:20 +02:00
opacity: 0.2;
2017-08-12 23:00:43 +02:00
}
2017-08-10 23:47:40 +02:00
}
2017-08-10 23:14:45 +02:00
</style>