NB-Public/kandimat-user-app
14
0
Fork 0
Code Pull requests Releases 1 Activity

Added more party information

Browse source
This commit is contained in:
Moritz Kröger 2017-08-27 23:03:48 +02:00
parent 1a7d05a42e
commit ea9e1006ad
13 changed files with 237 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
src/app/about/components/index.vue
View file

@ -11,52 +11,58 @@
<div class="about-people">
<div class="people-group">
<h2>
<a :href="$t('about.teamLabel.polis.url')" target="_blank">
<svgicon class="team-logo" name="polis-logo" width="150" height="100" />
<span hidden>{{ $t('about.teamLabel.polis.label') }}</span>
</a>
</h2>
<ul>
<li v-for="(member, index) of $t('about.members.polis')">
<a v-if="member.profile" :href="$t(`about.members.polis[${index}].profile`)" target="_blank">
{{ $t(`about.members.polis[${index}].name`) }}
<feather-external-link />
<div class="group-inner">
<h2>
<a :href="$t('about.teamLabel.polis.url')" target="_blank">
<svgicon class="team-logo" name="polis-logo" width="150" height="100" />
<span hidden>{{ $t('about.teamLabel.polis.label') }}</span>
</a>
<span v-else>{{ $t(`about.members.polis[${index}].name`) }}</span>
</li>
</ul>
</h2>
<ul>
<li v-for="(member, index) of $t('about.members.polis')">
<a v-if="member.profile" :href="$t(`about.members.polis[${index}].profile`)" target="_blank">
{{ $t(`about.members.polis[${index}].name`) }}
<feather-external-link />
</a>
<span v-else>{{ $t(`about.members.polis[${index}].name`) }}</span>
</li>
</ul>
</div>
</div>
<div class="people-group">
<h2>
<a :href="$t('about.teamLabel.poe.url')" target="_blank">
<svgicon class="team-logo" name="poe-logo" width="400" height="60" />
<span hidden>{{ $t('about.teamLabel.poe.label') }}</span>
</a>
</h2>
<ul>
<li v-for="(member, index) of $t('about.members.poe')">
<a v-if="member.profile" :href="$t(`about.members.poe[${index}].profile`)" target="_blank">
{{ $t(`about.members.poe[${index}].name`) }}
<feather-external-link />
<div class="group-inner">
<h2>
<a :href="$t('about.teamLabel.poe.url')" target="_blank">
<svgicon class="team-logo" name="poe-logo" width="400" height="60" />
<span hidden>{{ $t('about.teamLabel.poe.label') }}</span>
</a>
<span v-else>{{ $t(`about.members.poe[${index}].name`) }}</span>
</li>
</ul>
</h2>
<ul>
<li v-for="(member, index) of $t('about.members.poe')">
<a v-if="member.profile" :href="$t(`about.members.poe[${index}].profile`)" target="_blank">
{{ $t(`about.members.poe[${index}].name`) }}
<feather-external-link />
</a>
<span v-else>{{ $t(`about.members.poe[${index}].name`) }}</span>
</li>
</ul>
</div>
</div>
<div class="people-group">
<h2>{{ $t('about.teamLabel.dev') }}</h2>
<ul>
<li v-for="(member, index) of $t('about.members.dev')">
<a v-if="member.profile" :href="$t(`about.members.dev[${index}].profile`)" target="_blank">
{{ $t(`about.members.dev[${index}].name`) }}
<feather-external-link />
</a>
<span v-else>{{ $t(`about.members.dev[${index}].name`) }}</span>
</li>
</ul>
<div class="group-inner dark">
<h2>{{ $t('about.teamLabel.dev') }}</h2>
<ul>
<li v-for="(member, index) of $t('about.members.dev')">
<a v-if="member.profile" :href="$t(`about.members.dev[${index}].profile`)" target="_blank">
{{ $t(`about.members.dev[${index}].name`) }}
<feather-external-link />
</a>
<span v-else>{{ $t(`about.members.dev[${index}].name`) }}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
@ -80,6 +86,7 @@
}
svg.team-logo {
width: 100% !important;
stroke: none !important;
path,
@ -105,11 +112,11 @@
h2 {
margin-bottom: $small-gap;
color: $text-color-secondary;
}
ul {
list-style: none;
margin-bottom: $base-gap;
}
li:not(:last-child) {
@ -122,4 +129,34 @@
height: 1em;
}
}
.group-inner {
width: calc(100% - #{$base-gap});
background: $background-secondary;
border-radius: $border-radius / 2;
box-shadow: $button-shadow;
padding: $small-gap;
color: $text-color-secondary;
margin-bottom: $base-gap;
&.dark {
background: $dark-blue;
h2,
a,
span {
color: $text-color-base;
}
}
a,
span {
color: $text-color-secondary;
font-weight: 700;
}
svg:not(.team-logo) {
stroke: $blue !important;
}
}
</style>

8
src/app/about/i18n.js
View file

@ -5,13 +5,13 @@ export default {
members: {
polis: [
{ name: 'Susanne Zels', profile: 'https://www.linkedin.com/in/susannezels/' },
{ name: 'Stephan Kreutzner', profile: 'https://www.linkedin.com/in/stephan-kreutzer-905a0635/' },
{ name: 'Stephan Kreutzer', profile: 'https://www.linkedin.com/in/stephan-kreutzer-905a0635/' },
{ name: 'Ben Lenzing', profile: false },
{ name: 'Johannes John', profile: false }
],
poe: [
{ name: 'Eva Podgoršek', profile: 'https://twitter.com/evapodg' },
{ name: 'Peter Funk', profile: 'http://linkedin.com/in/peter-funk-047a899' }
{ name: 'Peter Funk', profile: 'https://twitter.com/funk67' }
],
dev: [
{ name: 'Moritz Kröger', profile: 'http://moritz.berlin' }
@ -42,13 +42,13 @@ export default {
members: {
polis: [
{ name: 'Susanne Zels', profile: 'https://www.linkedin.com/in/susannezels/' },
{ name: 'Stephan Kreutzner', profile: 'https://www.linkedin.com/in/stephan-kreutzer-905a0635/' },
{ name: 'Stephan Kreutzer', profile: 'https://www.linkedin.com/in/stephan-kreutzer-905a0635/' },
{ name: 'Ben Lenzing', profile: false },
{ name: 'Johannes John', profile: false }
],
poe: [
{ name: 'Eva Podgoršek', profile: 'https://twitter.com/evapodg' },
{ name: 'Peter Funk', profile: 'http://linkedin.com/in/peter-funk-047a899' }
{ name: 'Peter Funk', profile: 'https://twitter.com/funk67' }
],
dev: [
{ name: 'Moritz Kröger', profile: 'http://moritz.berlin' }

47
src/app/app.vue
View file

@ -15,15 +15,6 @@
<footer>
<app-footer :menu="subMenu" :social="socialMedia" />
</footer>
<div class="app-background">
<svgicon
name="european-stars"
width="10em"
height="10em"
scale="8"
color="#fee872" />
</div>
</div>
</template>
@ -45,7 +36,7 @@
de: {
topMenu: {
index: 'Startseite',
glossary: 'Glossar',
// glossary: 'Glossar',
faq: 'FAQ',
about: 'Über uns',
press: 'Presse'
@ -61,7 +52,7 @@
en: {
topMenu: {
index: 'Landing page',
glossary: 'Glossary',
// glossary: 'Glossary',
faq: 'FAQ',
about: 'About us',
press: 'Press'
@ -98,10 +89,10 @@
label: this.$t('topMenu.index'),
route: { path: '/' }
},
{
label: this.$t('topMenu.glossary'),
route: { path: this.isGermanLocale ? '/glossar' : '/glossary' }
},
// {
// label: this.$t('topMenu.glossary'),
// route: { path: this.isGermanLocale ? '/glossar' : '/glossary' }
// },
{
label: this.$t('topMenu.faq'),
route: { path: '/faq' }
@ -215,16 +206,6 @@
}
}
svg {
stroke: $text-color-base;
filter: drop-shadow($text-shadow);
path,
polyline {
stroke: $button-color;
}
}
::selection {
color: $text-color-base;
background: $text-color-special;
@ -249,6 +230,8 @@
align-items: flex-start;
padding: $base-gap $small-gap 0 $base-gap;
margin-bottom: $base-gap;
position: relative;
z-index: 2;
@media (max-width: 650px) {
flex-direction: column;
@ -295,18 +278,4 @@
margin-top: $base-gap;
}
}
.app-background {
display: none;
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
svg {
position: absolute;
top: 0;
transform: translate(-65%, -53%);
}
}
</style>

1
src/app/euromat/components/euromat.vue
View file

@ -119,6 +119,7 @@
this.answers.push({ thesis: thesis.id, position: option.position })
this.currentThesis += 1
event && event.target.blur()
window.scrollTo(0, 0)
if (this.currentThesis === this.thesesCount) {
this.forwardToResults()

1
src/app/euromat/components/results.vue
View file

@ -17,6 +17,7 @@
</div>
<feather-zoom-in class="results-see-more" />
<party-percentage
class="result-percentage"
:value="party.score"

33
src/app/intro/components/index.vue
View file

@ -1,17 +1,19 @@
<template>
<section>
<h1>{{ $t('intro.headline') }}</h1>
<section class="intro">
<div class="intro-content">
<h1>{{ $t('intro.headline') }}</h1>
<p
v-for="(txt, index) of $t('intro.content')"
:class="{ 'small': index === $t('intro.content').length -1 }">
{{ txt }}
</p>
<p
v-for="(txt, index) of $t('intro.content')"
:class="{ 'small': index === $t('intro.content').length -1 }">
{{ txt }}
</p>
<router-link class="btn" :to="{ path: thesesPath }">
{{ $t('intro.button') }}
<feather-check-circle />
</router-link>
<router-link class="btn" :to="{ path: thesesPath }">
{{ $t('intro.button') }}
<feather-check-circle />
</router-link>
</div>
</section>
</template>
@ -40,4 +42,13 @@
p.small {
font-size: $font-size-small;
}
.intro {
position: relative;
}
.intro-content {
position: relative;
z-index: 1;
}
</style>

22
src/app/party/components/index.vue
View file

@ -11,6 +11,10 @@
<feather-corner-up-left />
</router-link>
<h1>{{ partyName }}</h1>
<a class="btn" :href="partyProgramLink" target="_blank">
{{ $t('party.partyProgram') }}
<feather-external-link />
</a>
</div>
</header>
@ -79,6 +83,9 @@
},
partyName () {
return this.party.name[this.$i18n.locale]
},
partyProgramLink () {
return this.party.program[this.$i18n.locale]
}
},
@ -123,6 +130,16 @@
$table-column-large: 70%;
$table-column-small: 15%;
svg {
stroke: $text-color-base;
filter: drop-shadow($text-shadow);
path,
polyline {
stroke: $button-color;
}
}
.party-header {
display: flex;
align-items: flex-start;
@ -139,6 +156,10 @@
}
}
h1 {
margin-bottom: $small-gap;
}
.party-header-logo {
margin-right: $small-gap;
background: $background-secondary;
@ -236,6 +257,7 @@
color: $text-color-secondary;
margin-bottom: $small-gap / 2;
display: inline-block;
font-weight: 700;
}
}

2
src/app/party/i18n.js
View file

@ -3,6 +3,7 @@ export default {
party: {
pageTitle: 'Partei',
back: 'Zurück zum Ergebnis',
partyProgram: 'Zum Parteiprogramm',
legend: 'Legende',
table: {
thesis: 'Thesis',
@ -14,6 +15,7 @@ export default {
party: {
pageTitle: 'Party',
back: 'Back to results',
partyProgram: 'To party program',
legend: 'Legend',
table: {
thesis: 'Theses',

90
src/data/parties.json
View file

@ -5,6 +5,24 @@
"en": "Christian Democratic Union of Germany"
},
"token": "CDU",
"european_profile": {
"members": [
29,
96
],
"party": {
"de": "Europäische Volkspartei (EVP)",
"en": "European People's Party (EPP)"
},
"group": {
"de": "Europäische Volkspartei (EVP)",
"en": "European People's Party (EPP)"
}
},
"program": {
"de": "https://google.de",
"en": "https://google.co.uk"
},
"id": 0,
"positions": [
{
@ -165,6 +183,24 @@
"en": "Social Democratic Party of Germany"
},
"token": "SPD",
"european_profile": {
"members": [
27,
96
],
"party": {
"de": "Sozialdemokratische Partei Europas (SPE)",
"en": "Party of European Socialists (PES)"
},
"group": {
"de": "Progressive Allianz der Sozialdemokraten im Europäischen Parlament (S&D)",
"en": "European Progressive Alliance of Socialists and Democrats (S&D)"
}
},
"program": {
"de": "https://google.de",
"en": "https://google.co.uk"
},
"id": 1,
"positions": [
{
@ -325,6 +361,24 @@
"en": "The Left"
},
"token": "LINKE",
"european_profile": {
"members": [
7,
96
],
"party": {
"de": "Europäische Linke (EL)",
"en": "Party of the European Left (EL"
},
"group": {
"de": "Konföderale Fraktion der Vereinten Europäischen Linken/Nordische Grüne Linke (GUE/NGL)",
"en": "European United Left–Nordic Green Left (GUE/NGL)"
}
},
"program": {
"de": "https://google.de",
"en": "https://google.co.uk"
},
"id": 2,
"positions": [
{
@ -485,6 +539,24 @@
"en": "Alliance 90/The Greens"
},
"token": "GRÜNE",
"european_profile": {
"members": [
11,
96
],
"party": {
"de": "Europäische Grüne Partei (EGP)",
"en": "European Green Party (EGP)"
},
"group": {
"de": "Die Grünen/Europäische Freie Allianz (Grüne/EFA)",
"en": "Greens/European Free Alliance (Grüne/EFA)"
}
},
"program": {
"de": "https://google.de",
"en": "https://google.co.uk"
},
"id": 3,
"positions": [
{
@ -645,6 +717,24 @@
"en": "Free Democratic Party"
},
"token": "FDP",
"european_profile": {
"members": [
3,
96
],
"party": {
"de": "Allianz der Liberalen und Demokraten für Europa (ALDE)",
"en": "Alliance of Liberals and Democrats for Europe (ALDE)"
},
"group": {
"de": "Allianz der Liberalen und Demokraten für Europa (ALDE)",
"en": "Alliance of Liberals and Democrats for Europe (ALDE)"
}
},
"program": {
"de": "https://google.de",
"en": "https://google.co.uk"
},
"id": 4,
"positions": [
{

6
src/i18n/index.js
View file

@ -3,7 +3,7 @@ import VueI18n from 'vue-i18n'
import { i18n as intro } from '@/app/intro'
import { i18n as euromat } from '@/app/euromat'
import { i18n as glossary } from '@/app/glossary'
// import { i18n as glossary } from '@/app/glossary'
import { i18n as party } from '@/app/party'
import { i18n as about } from '@/app/about'
import { i18n as fourzerofour } from '@/app/404'
@ -21,7 +21,7 @@ export default new VueI18n({
de: {
...intro.de,
...euromat.de,
...glossary.de,
// ...glossary.de,
...party.de,
...about.de,
...fourzerofour.de,
@ -33,7 +33,7 @@ export default new VueI18n({
en: {
...intro.en,
...euromat.en,
...glossary.en,
// ...glossary.en,
...party.en,
...about.en,
...fourzerofour.en,

4
src/router/index.js
View file

@ -4,7 +4,7 @@ import Router from 'vue-router'
import getPageTitle from './getPageTitle'
import { routes as intro } from '@/app/intro'
import { routes as euromat } from '@/app/euromat'
import { routes as glossary } from '@/app/glossary'
// import { routes as glossary } from '@/app/glossary'
import { routes as party } from '@/app/party'
import { routes as about } from '@/app/about'
import { routes as faq } from '@/app/faq'
@ -20,7 +20,7 @@ const router = new Router({
routes: [
...intro,
...euromat,
...glossary,
// ...glossary,
...party,
...about,
...faq,

5
src/styles/buttons.scss
View file

@ -58,6 +58,11 @@ button,
height: 16px;
filter: drop-shadow($button-text-shadow);
margin-left: $small-gap / 2;
path,
polyline {
stroke: $button-color;
}
}
&[disabled] {

2
src/styles/fonts.scss
View file

@ -10,7 +10,7 @@ $fontAssistant: 'Assistant', Avenir, Helvetica, Arial, sans-serif;
url($fontPath + 'hinted-Assistant-Bold.eot?#iefix') format('embedded-opentype'),
url($fontPath + 'hinted-Assistant-Bold.woff') format('woff'),
url($fontPath + 'hinted-Assistant-Bold.ttf') format('truetype');
font-weight: bold;
font-weight: 700;
font-style: normal;
}