2017-08-10 23:14:45 +02:00
|
|
|
<template>
|
2019-05-05 16:39:12 +02:00
|
|
|
<div id="app" :class="{ 'is-embedded': isEmbedded }">
|
|
|
|
<header v-if="!isEmbedded" class="app-header">
|
2019-04-12 22:54:08 +02:00
|
|
|
<router-link :to="{ path: `/${$i18n.locale}/` }">
|
2019-03-20 23:39:49 +01:00
|
|
|
<img class="header-logo"
|
2022-02-02 23:14:59 +01:00
|
|
|
alt="KANDIMAT Logo"
|
2019-03-20 23:39:49 +01:00
|
|
|
:src="euromatLogo"
|
|
|
|
:width="logoSize"
|
|
|
|
:height="logoSize / 2"
|
|
|
|
>
|
2017-08-20 22:52:51 +02:00
|
|
|
</router-link>
|
2017-08-22 23:01:17 +02:00
|
|
|
|
|
|
|
<app-menu :main="topMenu" :languages="languages" />
|
|
|
|
</header>
|
2017-08-20 22:52:51 +02:00
|
|
|
|
2019-04-19 10:00:00 +02:00
|
|
|
<main id="main">
|
2019-03-20 23:39:49 +01:00
|
|
|
<router-view />
|
2017-08-10 23:14:45 +02:00
|
|
|
</main>
|
2017-08-20 22:52:51 +02:00
|
|
|
|
2019-05-05 16:39:12 +02:00
|
|
|
<footer v-if="!isEmbedded">
|
2020-04-03 00:12:09 +02:00
|
|
|
<app-footer :menu="subMenu" />
|
2017-08-22 23:01:17 +02:00
|
|
|
</footer>
|
2017-08-10 23:14:45 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2017-08-12 23:00:43 +02:00
|
|
|
import '@/assets/icons/european-stars'
|
2019-04-12 22:29:36 +02:00
|
|
|
import { SUPPORTED_LOCALES } from '@/config'
|
2019-05-10 18:16:37 +02:00
|
|
|
import { getTranslatedUrl } from '@/i18n/helper'
|
2017-08-12 23:00:43 +02:00
|
|
|
|
2017-08-10 23:14:45 +02:00
|
|
|
export default {
|
2017-08-15 22:25:25 +02:00
|
|
|
name: 'App',
|
2017-08-12 21:28:33 +02:00
|
|
|
|
|
|
|
data () {
|
|
|
|
return {
|
2022-02-02 15:01:15 +01:00
|
|
|
euromatLogo: require('@/assets/kandimat-logo.png'),
|
2017-08-29 21:37:50 +02:00
|
|
|
logoSize: 220,
|
2019-04-12 22:29:36 +02:00
|
|
|
languages: SUPPORTED_LOCALES.map(([locale, language]) => ({
|
2019-04-10 23:30:40 +02:00
|
|
|
icon: require(`@/assets/svg/flag-${locale}.svg`),
|
|
|
|
locale,
|
|
|
|
language
|
|
|
|
}))
|
2017-08-13 14:03:38 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
2017-08-15 20:26:34 +02:00
|
|
|
topMenu () {
|
2017-08-13 14:03:38 +02:00
|
|
|
return [
|
2017-08-15 22:59:50 +02:00
|
|
|
{
|
2019-04-08 08:04:25 +02:00
|
|
|
label: this.$t('meta.topMenu.index'),
|
2019-04-12 22:29:36 +02:00
|
|
|
route: { path: `/${this.$i18n.locale}/` }
|
2017-08-15 22:59:50 +02:00
|
|
|
},
|
|
|
|
{
|
2019-04-08 08:04:25 +02:00
|
|
|
label: this.$t('meta.topMenu.faq'),
|
2019-04-12 22:29:36 +02:00
|
|
|
route: { path: getTranslatedUrl('faq') }
|
2017-08-15 22:59:50 +02:00
|
|
|
},
|
2017-08-26 18:38:47 +02:00
|
|
|
{
|
2019-04-08 08:04:25 +02:00
|
|
|
label: this.$t('meta.topMenu.about'),
|
2019-04-12 22:29:36 +02:00
|
|
|
route: { path: getTranslatedUrl('about') }
|
2017-08-26 18:38:47 +02:00
|
|
|
},
|
2019-05-05 17:16:11 +02:00
|
|
|
{
|
|
|
|
label: this.$t('meta.topMenu.partner'),
|
|
|
|
route: { path: getTranslatedUrl('partner') }
|
|
|
|
},
|
2017-08-15 22:59:50 +02:00
|
|
|
{
|
2019-04-24 22:41:22 +02:00
|
|
|
label: this.$t('meta.topMenu.contact'),
|
|
|
|
route: { path: getTranslatedUrl('contact') }
|
2017-08-15 22:59:50 +02:00
|
|
|
}
|
2017-08-15 20:26:34 +02:00
|
|
|
]
|
|
|
|
},
|
|
|
|
subMenu () {
|
|
|
|
return [
|
2017-08-15 22:59:50 +02:00
|
|
|
{
|
2019-04-08 08:04:25 +02:00
|
|
|
label: this.$t('meta.footerMenu.imprint'),
|
2019-04-12 22:29:36 +02:00
|
|
|
route: { path: getTranslatedUrl('imprint') }
|
2017-08-15 22:59:50 +02:00
|
|
|
},
|
|
|
|
{
|
2019-04-08 08:04:25 +02:00
|
|
|
label: this.$t('meta.footerMenu.privacy'),
|
2019-04-12 22:29:36 +02:00
|
|
|
route: { path: getTranslatedUrl('privacy') }
|
2017-08-15 22:59:50 +02:00
|
|
|
}
|
2017-08-12 21:28:33 +02:00
|
|
|
]
|
2017-08-26 02:19:47 +02:00
|
|
|
},
|
2019-05-05 16:39:12 +02:00
|
|
|
isEmbedded () {
|
|
|
|
return (
|
|
|
|
this.$route.query.embedded &&
|
|
|
|
this.$route.query.embedded === 'iframe'
|
|
|
|
)
|
2017-08-12 21:28:33 +02:00
|
|
|
}
|
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2019-03-20 23:19:13 +01:00
|
|
|
@import "~@/../node_modules/normalize.css/normalize";
|
|
|
|
@import "~@/styles/animations";
|
|
|
|
@import "~@/styles/fonts";
|
|
|
|
@import "~@/styles/buttons";
|
|
|
|
@import "~@/styles/colors";
|
|
|
|
@import "~@/styles/layout";
|
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;
|
2017-08-12 21:28:33 +02:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
2017-08-12 23:00:43 +02:00
|
|
|
align-items: flex-start;
|
2019-04-11 09:50:53 +02:00
|
|
|
|
|
|
|
&.no-scroll {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
|
|
|
|
2017-08-10 23:47:40 +02:00
|
|
|
body {
|
2017-08-12 21:28:33 +02:00
|
|
|
background: $background-primary;
|
|
|
|
color: $text-color-base;
|
2017-08-27 19:10:45 +02:00
|
|
|
font-family: $fontAssistant;
|
2017-08-21 21:57:31 +02:00
|
|
|
font-weight: normal;
|
2017-08-25 22:45:04 +02:00
|
|
|
font-size: $font-size-base;
|
2017-08-10 23:14:45 +02:00
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
2017-08-13 15:44:03 +02:00
|
|
|
overflow-x: hidden;
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
2019-04-19 10:00:00 +02:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-12 23:00:43 +02:00
|
|
|
h1 {
|
2017-08-25 21:27:41 +02:00
|
|
|
font-size: $font-size-xlarge;
|
|
|
|
line-height: 110%;
|
|
|
|
font-weight: 600;
|
2017-08-27 16:16:05 +02:00
|
|
|
text-shadow: $text-shadow;
|
2017-08-12 23:00:43 +02:00
|
|
|
margin: 0;
|
2017-08-25 21:27:41 +02:00
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
font-size: $font-size-large;
|
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
}
|
2017-08-10 23:47:40 +02:00
|
|
|
|
2017-08-25 22:45:04 +02:00
|
|
|
h2 {
|
|
|
|
font-size: $font-size-large;
|
|
|
|
color: $text-color-secondary;
|
2017-08-25 23:28:07 +02:00
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
font-size: $font-size-large - 50%;
|
|
|
|
}
|
2017-08-25 22:45:04 +02:00
|
|
|
}
|
|
|
|
|
2017-08-16 22:48:38 +02:00
|
|
|
p {
|
|
|
|
line-height: 150%;
|
|
|
|
}
|
|
|
|
|
2017-08-12 21:28:33 +02:00
|
|
|
a {
|
2017-08-12 23:00:43 +02:00
|
|
|
color: $text-color-base;
|
2017-08-25 23:15:29 +02:00
|
|
|
text-decoration: none;
|
2017-08-27 00:50:47 +02:00
|
|
|
transition: color 150ms $easeOutBack;
|
2017-08-13 18:26:20 +02:00
|
|
|
|
2017-08-26 00:45:59 +02:00
|
|
|
&:not(.btn):hover {
|
2017-08-12 23:00:43 +02:00
|
|
|
color: $text-color-special;
|
|
|
|
}
|
2017-08-26 16:41:40 +02:00
|
|
|
|
|
|
|
&:not(.btn):focus {
|
2019-04-19 10:00:00 +02:00
|
|
|
outline: 2px solid $orange;
|
2017-08-26 16:41:40 +02:00
|
|
|
color: $text-color-special;
|
|
|
|
}
|
2017-08-12 21:28:33 +02:00
|
|
|
}
|
|
|
|
|
2017-08-27 15:59:17 +02:00
|
|
|
::selection {
|
|
|
|
color: $text-color-base;
|
|
|
|
background: $text-color-special;
|
|
|
|
}
|
|
|
|
|
2017-08-12 21:28:33 +02:00
|
|
|
#app {
|
2017-08-22 23:01:17 +02:00
|
|
|
width: 100vw;
|
2017-08-12 23:00:43 +02:00
|
|
|
display: flex;
|
2017-08-22 23:01:17 +02:00
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2017-08-12 23:00:43 +02:00
|
|
|
position: relative;
|
2017-08-20 22:52:51 +02:00
|
|
|
|
2019-05-05 16:39:12 +02:00
|
|
|
&.is-embedded {
|
|
|
|
padding-top: $small-gap;
|
|
|
|
}
|
|
|
|
|
2017-08-26 02:03:31 +02:00
|
|
|
header {
|
2017-08-22 23:01:17 +02:00
|
|
|
width: 100%;
|
|
|
|
}
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
2017-08-22 23:01:17 +02:00
|
|
|
.app-header {
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
2017-08-25 21:27:41 +02:00
|
|
|
align-items: flex-start;
|
|
|
|
padding: $base-gap $small-gap 0 $base-gap;
|
2017-08-25 23:28:07 +02:00
|
|
|
margin-bottom: $base-gap;
|
2017-08-27 23:03:48 +02:00
|
|
|
position: relative;
|
|
|
|
z-index: 2;
|
2017-08-25 23:04:02 +02:00
|
|
|
|
2019-05-05 20:00:53 +02:00
|
|
|
@media (max-width: 730px) {
|
2017-08-25 23:04:02 +02:00
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
padding: $small-gap - 5;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.header-logo {
|
|
|
|
@media (max-width: 650px) {
|
|
|
|
margin-bottom: $small-gap;
|
|
|
|
}
|
2017-08-12 23:00:43 +02:00
|
|
|
}
|
|
|
|
|
2017-08-25 23:28:07 +02:00
|
|
|
main {
|
|
|
|
width: 100%;
|
|
|
|
max-width: $app-width;
|
|
|
|
padding: 0 $small-gap;
|
|
|
|
position: relative;
|
|
|
|
z-index: 1;
|
|
|
|
margin-bottom: $base-gap * 3;
|
|
|
|
|
2017-08-26 16:41:40 +02:00
|
|
|
@media (max-width: 1050px) {
|
|
|
|
margin-bottom: $base-gap * 2;
|
|
|
|
}
|
|
|
|
|
2017-08-25 23:28:07 +02:00
|
|
|
@media (max-width: 768px) {
|
|
|
|
margin-bottom: $base-gap;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-08-25 23:15:29 +02:00
|
|
|
footer {
|
|
|
|
position: fixed;
|
2017-08-26 00:18:00 +02:00
|
|
|
z-index: 2;
|
2017-08-25 23:15:29 +02:00
|
|
|
bottom: 0;
|
2017-08-26 02:03:31 +02:00
|
|
|
right: 0;
|
2017-08-25 23:15:29 +02:00
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
2017-08-26 16:41:40 +02:00
|
|
|
@media (max-width: 1050px) {
|
2017-08-25 23:15:29 +02:00
|
|
|
position: static;
|
2019-04-11 09:50:53 +02:00
|
|
|
z-index: 0;
|
2017-08-25 23:15:29 +02:00
|
|
|
justify-content: center;
|
|
|
|
margin-top: $base-gap;
|
|
|
|
}
|
|
|
|
}
|
2017-08-10 23:14:45 +02:00
|
|
|
</style>
|