2017-08-10 23:14:45 +02:00
< template >
< div id = "app" >
2017-08-22 23:01:17 +02:00
< header class = "app-header" >
2017-08-20 22:52:51 +02:00
< router -link : to = "{ path: '/' }" >
2019-03-20 23:39:49 +01:00
< img class = "header-logo"
: src = "euromatLogo"
: width = "logoSize"
: height = "logoSize / 2"
>
2017-08-20 22:52:51 +02:00
< / r o u t e r - l i n k >
2017-08-22 23:01:17 +02:00
< app -menu :main ="topMenu" :languages ="languages" / >
< / header >
2017-08-20 22:52:51 +02:00
2017-08-12 23:00:43 +02:00
< 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
2017-08-22 23:01:17 +02:00
< footer >
2017-08-26 02:03:31 +02:00
< app -footer :menu ="subMenu" :social ="socialMedia" / >
2017-08-22 23:01:17 +02:00
< / footer >
2019-03-30 23:57:10 +01:00
< section v-if ="showConsentLayer" id="analytics-consent" >
< div class = "consent-content" >
< p > Let ' s track a bit ? < / p >
< div class = "consent-actions" >
< button @click ="updateConsent(false)" >
Decline
< / button >
< button @click ="updateConsent(true)" >
Allow
< / button >
< / div >
< / div >
< / section >
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-03-30 23:57:10 +01:00
import { GA _COOKIE _NAME } from '@/config/analytics'
import { setCookie , getCookie } from '@/helper/cookies'
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
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' ,
faq : 'FAQ' ,
2017-08-26 18:38:47 +02:00
about : 'Über uns' ,
2017-08-15 20:26:34 +02:00
press : 'Presse'
} ,
subMenu : {
imprint : 'Impressum' ,
privacy : 'Datenschutz'
2017-08-26 02:19:47 +02:00
} ,
socialMedia : {
2017-08-29 00:17:48 +02:00
twitter : {
text : 'Cool! BTW17 kann jetzt auch Sterne. Neugierig was die Parteien zur EU sagen? Mach den EUROMAT & finde heraus mit wem du übereinstimmst!' ,
hashtags : 'BTW17,EUROMAT'
} ,
facebook : 'Cool! #BTW17 kann jetzt auch Sterne. Neugierig was die Parteien zur EU sagen? Mach den #EUROMAT & finde heraus mit wem du übereinstimmst!' ,
2017-08-26 02:19:47 +02:00
clipboard : 'In Zwischenablage kopiert'
2017-08-13 14:03:38 +02:00
}
} ,
en : {
2017-08-15 20:26:34 +02:00
topMenu : {
2017-08-21 23:22:33 +02:00
index : 'Landing page' ,
2017-08-13 14:03:38 +02:00
faq : 'FAQ' ,
2017-08-26 18:38:47 +02:00
about : 'About us' ,
2017-08-15 20:26:34 +02:00
press : 'Press'
} ,
subMenu : {
imprint : 'Imprint' ,
privacy : 'Data privacy'
2017-08-26 02:19:47 +02:00
} ,
socialMedia : {
2017-08-29 00:17:48 +02:00
twitter : {
2017-08-29 21:51:41 +02:00
text : 'Great! German election is star-spangled. Curious what parties say about EU? Compare views & see your match:' ,
hashtags : 'BTW17,EUROMAT'
2017-08-29 00:17:48 +02:00
} ,
facebook : 'Great! #GermanElections are now star-spangled. Curious what parties say about EU? Compare your views w/#EUROMAT & see who you match up with!' ,
2017-08-26 02:19:47 +02:00
clipboard : 'Copied to clipboard'
2017-08-13 14:03:38 +02:00
}
}
}
} ,
2017-08-12 21:28:33 +02:00
data ( ) {
return {
2019-03-30 23:57:10 +01:00
showConsentLayer : getCookie ( GA _COOKIE _NAME ) === null ,
2017-08-20 22:52:51 +02:00
euromatLogo : require ( '@/assets/svg/euromat-logo.svg' ) ,
2017-08-29 21:37:50 +02:00
logoSize : 220 ,
2017-08-13 14:03:38 +02:00
languages : [
2017-08-25 21:27:41 +02:00
{ icon : require ( '@/assets/svg/flag-de.svg' ) , locale : 'de' } ,
{ icon : require ( '@/assets/svg/flag-uk.svg' ) , locale : 'en' }
2017-08-13 14:03:38 +02:00
]
}
} ,
computed : {
2017-08-15 22:59:50 +02:00
isGermanLocale ( ) {
return this . $i18n . locale === 'de'
} ,
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
{
label : this . $t ( 'topMenu.index' ) ,
route : { path : '/' }
} ,
{
label : this . $t ( 'topMenu.faq' ) ,
route : { path : '/faq' }
} ,
2017-08-26 18:38:47 +02:00
{
label : this . $t ( 'topMenu.about' ) ,
2017-08-29 21:37:50 +02:00
route : { path : this . isGermanLocale ? '/uber-uns' : '/about-us' }
2017-08-26 18:38:47 +02:00
} ,
2017-08-15 22:59:50 +02:00
{
label : this . $t ( 'topMenu.press' ) ,
route : { path : this . isGermanLocale ? '/presse' : '/press' }
}
2017-08-15 20:26:34 +02:00
]
} ,
subMenu ( ) {
return [
2017-08-15 22:59:50 +02:00
{
label : this . $t ( 'subMenu.imprint' ) ,
route : { path : this . isGermanLocale ? '/impressum' : '/imprint' }
} ,
{
label : this . $t ( 'subMenu.privacy' ) ,
route : { path : this . isGermanLocale ? '/datenschutz' : '/privacy' }
}
2017-08-12 21:28:33 +02:00
]
2017-08-26 02:19:47 +02:00
} ,
socialMedia ( ) {
return [
2017-08-29 00:17:48 +02:00
{
label : 'twitter' ,
icon : 'twitter' ,
message : {
text : this . $t ( 'socialMedia.twitter.text' ) ,
hashtags : this . $t ( 'socialMedia.twitter.hashtags' )
}
} ,
{
label : 'facebook' ,
icon : 'facebook' ,
message : this . $t ( 'socialMedia.facebook' )
} ,
{
label : 'clipboard' ,
icon : 'clipboard' ,
message : this . $t ( 'socialMedia.clipboard' )
}
2017-08-26 02:19:47 +02:00
]
2017-08-12 21:28:33 +02:00
}
2019-03-30 23:57:10 +01:00
} ,
methods : {
updateConsent ( consent ) {
setCookie ( GA _COOKIE _NAME , consent )
this . showConsentLayer = false
}
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
2017-08-25 22:45:04 +02:00
$app - width : 930 px ;
2017-08-13 15:44:03 +02:00
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 : 100 vw ;
height : 100 vh ;
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 ;
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
}
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 : 768 px ) {
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 : 768 px ) {
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 150 ms $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 {
outline : none ;
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 : 100 vw ;
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
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
@ media ( max - width : 650 px ) {
flex - direction : column ;
justify - content : center ;
align - items : center ;
padding : $small - gap - 5 ;
}
}
. header - logo {
@ media ( max - width : 650 px ) {
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 : 1050 px ) {
margin - bottom : $base - gap * 2 ;
}
2017-08-25 23:28:07 +02:00
@ media ( max - width : 768 px ) {
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 : 1050 px ) {
2017-08-25 23:15:29 +02:00
position : static ;
justify - content : center ;
margin - top : $base - gap ;
}
}
2019-03-30 23:57:10 +01:00
# analytics - consent {
position : fixed ;
z - index : 4 ;
bottom : 0 ;
width : 100 vw ;
max - width : $app - width ;
background : $background - secondary ;
color : $text - color - secondary ;
display : flex ;
justify - content : center ;
padding : $small - gap ;
margin - bottom : $base - gap ;
border - radius : $border - radius ;
box - shadow : $button - shadow ;
@ media ( max - width : $app - width ) {
margin - bottom : 0 ;
border - radius : 0 ;
box - shadow : 0 ;
}
. consent - content {
max - width : $app - width ;
width : 100 % ;
display : flex ;
justify - content : space - between ;
align - items : center ;
& button {
margin - left : $small - gap ;
}
}
}
2017-08-10 23:14:45 +02:00
< / style >