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

275 lines
5.5 KiB
Vue

<template>
<div id="app" :class="{ 'is-embedded': isEmbedded }">
<header v-if="!isEmbedded" class="app-header">
<router-link :to="{ path: `/${$i18n.locale}/` }">
<img class="header-logo"
alt="EUROMAT Logo"
:src="euromatLogo"
:width="logoSize"
:height="logoSize / 2"
>
</router-link>
<app-menu :main="topMenu" :languages="languages" />
</header>
<main id="main">
<router-view />
</main>
<footer v-if="!isEmbedded">
<app-footer :menu="subMenu" />
</footer>
</div>
</template>
<script>
import '@/assets/icons/european-stars'
import { SUPPORTED_LOCALES } from '@/config'
import { getTranslatedUrl } from '@/i18n/helper'
export default {
name: 'App',
data () {
return {
euromatLogo: require('@/assets/kandimat-logo.png'),
logoSize: 220,
languages: SUPPORTED_LOCALES.map(([locale, language]) => ({
icon: require(`@/assets/svg/flag-${locale}.svg`),
locale,
language
}))
}
},
computed: {
topMenu () {
return [
{
label: this.$t('meta.topMenu.index'),
route: { path: `/${this.$i18n.locale}/` }
},
{
label: this.$t('meta.topMenu.faq'),
route: { path: getTranslatedUrl('faq') }
},
{
label: this.$t('meta.topMenu.about'),
route: { path: getTranslatedUrl('about') }
},
{
label: this.$t('meta.topMenu.partner'),
route: { path: getTranslatedUrl('partner') }
},
{
label: this.$t('meta.topMenu.contact'),
route: { path: getTranslatedUrl('contact') }
}
]
},
subMenu () {
return [
{
label: this.$t('meta.footerMenu.imprint'),
route: { path: getTranslatedUrl('imprint') }
},
{
label: this.$t('meta.footerMenu.privacy'),
route: { path: getTranslatedUrl('privacy') }
}
]
},
isEmbedded () {
return (
this.$route.query.embedded &&
this.$route.query.embedded === 'iframe'
)
}
}
}
</script>
<style lang="scss">
@import "~@/../node_modules/normalize.css/normalize";
@import "~@/styles/animations";
@import "~@/styles/fonts";
@import "~@/styles/buttons";
@import "~@/styles/colors";
@import "~@/styles/layout";
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
&.no-scroll {
overflow: hidden;
}
}
body {
background: $background-primary;
color: $text-color-base;
font-family: $fontAssistant;
font-weight: normal;
font-size: $font-size-base;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
.visuallyhidden:not(:focus):not(:active) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
white-space: nowrap;
clip-path: inset(100%);
clip: rect(0 0 0 0);
overflow: hidden;
}
.go-to-main.visuallyhidden {
position: absolute;
background: $background-secondary;
left: 0;
top: 0;
padding: calc(#{$small-gap} / 2);
z-index: 100;
&:focus {
color: $text-color-secondary;
}
}
h1 {
font-size: $font-size-xlarge;
line-height: 110%;
font-weight: 600;
text-shadow: $text-shadow;
margin: 0;
@media (max-width: 768px) {
font-size: $font-size-large;
}
}
h2 {
font-size: $font-size-large;
color: $text-color-secondary;
@media (max-width: 768px) {
font-size: $font-size-large - 50%;
}
}
p {
line-height: 150%;
}
a {
color: $text-color-base;
text-decoration: none;
transition: color 150ms $easeOutBack;
&:not(.btn):hover {
color: $text-color-special;
}
&:not(.btn):focus {
outline: 2px solid $orange;
color: $text-color-special;
}
}
::selection {
color: $text-color-base;
background: $text-color-special;
}
#app {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
&.is-embedded {
padding-top: $small-gap;
}
header {
width: 100%;
}
}
.app-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: $base-gap $small-gap 0 $base-gap;
margin-bottom: $base-gap;
position: relative;
z-index: 2;
@media (max-width: 730px) {
flex-direction: column;
justify-content: center;
align-items: center;
padding: $small-gap - 5;
}
}
.header-logo {
@media (max-width: 650px) {
margin-bottom: $small-gap;
}
}
main {
width: 100%;
max-width: $app-width;
padding: 0 $small-gap;
position: relative;
z-index: 1;
margin-bottom: $base-gap * 3;
@media (max-width: 1050px) {
margin-bottom: $base-gap * 2;
}
@media (max-width: 768px) {
margin-bottom: $base-gap;
}
}
footer {
position: fixed;
z-index: 2;
bottom: 0;
right: 0;
display: flex;
justify-content: flex-end;
@media (max-width: 1050px) {
position: static;
z-index: 0;
justify-content: center;
margin-top: $base-gap;
}
}
</style>