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: '/' }" >
2017-08-29 21:37:50 +02: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 >
2017-08-10 23:14:45 +02:00
< router -view > < / r o u t e r - v i e w >
< / 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 >
2017-08-10 23:14:45 +02:00
< / div >
< / template >
< script >
2017-08-25 23:15:29 +02:00
import AppMenu from '@/components/app-menu'
import AppFooter from '@/components/app-footer'
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' ,
2017-08-12 21:28:33 +02:00
components : {
2017-08-25 23:15:29 +02:00
'app-menu' : AppMenu ,
'app-footer' : AppFooter
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' ,
2017-08-27 23:03:48 +02:00
// glossary: 'Glossar',
2017-08-13 14:03:38 +02:00
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-27 23:03:48 +02:00
// glossary: 'Glossary',
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 {
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 : '/' }
} ,
2017-08-27 23:03:48 +02:00
// {
// label: this.$t('topMenu.glossary'),
// route: { path: this.isGermanLocale ? '/glossar' : '/glossary' }
// },
2017-08-15 22:59:50 +02:00
{
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
}
}
2017-08-10 23:14:45 +02:00
}
< / script >
< style lang = "scss" >
@ import "~node_modules/normalize.css/normalize" ;
2017-08-25 22:54:13 +02:00
@ import "~styles/animations" ;
2017-08-21 21:57:31 +02:00
@ import "~styles/fonts" ;
2017-08-13 14:03:38 +02:00
@ import "~styles/buttons" ;
2017-08-12 21:28:33 +02:00
@ import "~styles/colors" ;
2017-08-12 23:00:43 +02:00
@ 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 ;
}
}
2017-08-10 23:14:45 +02:00
< / style >