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

Added custom page titles and more updates

Browse source
This commit is contained in:
Moritz Kröger 2017-08-27 13:40:07 +02:00
parent be611a497b
commit 743e0d7d2b
25 changed files with 238 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,7 @@
export default {
de: {
fourzerofour: {
pageTitle: '404',
headline: '404 — Oops! Da ist wohl etwas falsch gelaufen.',
content: 'Einführung und Aufbau müssen noch definiert werden.',
button: 'Zurück zur Startseite'
@ -8,6 +9,7 @@ export default {
},
en: {
fourzerofour: {
pageTitle: '404',
headline: '404 — Whoops! Something went wrong.',
content: 'Content to be written.',
button: 'Back to main page'

9
src/app/404/routes.js
View file

@ -1,9 +1,16 @@
import FourZeroFour from './components/index'
import i18n from './i18n'
export default [
{
path: '*',
name: '404',
component: FourZeroFour
component: FourZeroFour,
meta: {
title: {
de: i18n.de.fourzerofour.pageTitle,
en: i18n.en.fourzerofour.pageTitle
}
}
}
]

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

@ -19,10 +19,11 @@
</h2>
<ul>
<li v-for="(member, index) of $t('about.members.polis')">
<a :href="$t(`about.members.polis[${index}].profile`)" target="_blank">
<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>
@ -36,10 +37,11 @@
</h2>
<ul>
<li v-for="(member, index) of $t('about.members.poe')">
<a :href="$t(`about.members.poe[${index}].profile`)" target="_blank">
<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>
@ -48,15 +50,18 @@
<h2>{{ $t('about.teamLabel.dev') }}</h2>
<ul>
<li v-for="(member, index) of $t('about.members.dev')">
<a :href="$t(`about.members.dev[${index}].profile`)" target="_blank">
<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>
</section>
</template>

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

@ -1,16 +1,17 @@
export default {
de: {
about: {
pageTitle: 'Über uns',
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: 'Ben Lenzing', profile: 'https://google.de' },
{ name: 'Johannes John', profile: 'https://google.de' }
{ name: 'Ben Lenzing', profile: false },
{ name: 'Johannes John', profile: false }
],
poe: [
{ name: 'Eva Podgorsek', profile: 'https://twitter.com/evapodg' },
{ name: 'Peter Funk', profile: 'https://google.de' }
{ name: 'Eva Podgoršek', profile: 'https://twitter.com/evapodg' },
{ name: 'Peter Funk', profile: 'http://linkedin.com/in/peter-funk-047a899' }
],
dev: [
{ name: 'Moritz Kröger', profile: 'http://moritz.berlin' }
@ -37,16 +38,17 @@ export default {
},
en: {
about: {
pageTitle: 'About',
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: 'Ben Lenzing', profile: 'https://google.de' },
{ name: 'Johannes John', profile: 'https://google.de' }
{ name: 'Ben Lenzing', profile: false },
{ name: 'Johannes John', profile: false }
],
poe: [
{ name: 'Eva Podgorsek', profile: 'https://twitter.com/evapodg' },
{ name: 'Peter Funk', profile: 'https://google.de' }
{ name: 'Eva Podgoršek', profile: 'https://twitter.com/evapodg' },
{ name: 'Peter Funk', profile: 'http://linkedin.com/in/peter-funk-047a899' }
],
dev: [
{ name: 'Moritz Kröger', profile: 'http://moritz.berlin' }

9
src/app/about/routes.js
View file

@ -1,10 +1,17 @@
import About from './components/index'
import i18n from './i18n'
export default [
{
path: '/über-uns',
alias: '/about-us',
name: 'about',
component: About
component: About,
meta: {
title: {
de: i18n.de.about.pageTitle,
en: i18n.en.about.pageTitle
}
}
}
]

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

@ -11,6 +11,9 @@
{{ party.token }}
<span>({{ getScorePercentage(party.score) }}%)</span>
</h2>
<feather-zoom-in class="results-see-more" />
<!-- <svgicon :name="getPartyLogoName(item.token)" width="50" height="50" /> -->
<party-percentage
class="result-percentage"
@ -21,12 +24,15 @@
</ul>
<div class="results-ctrls">
<router-link tag="a" class="btn" :to="{ path: '/' }">
{{ $t('euromat.results.buttons.index') }}
</router-link>
<router-link
tag="a"
class="btn"
class="btn btn-dark btn-small"
:to="{ path: this.isGermanLocale ? '/thesen' : '/theses' }">
{{ $t('euromat.results.buttons.back') }}
<feather-corner-up-left />
{{ $t('euromat.results.buttons.startover') }}
<feather-rotate-cw />
</router-link>
</div>
</section>
@ -170,6 +176,7 @@
</script>
<style lang="scss" scoped>
@import "~styles/animations";
@import "~styles/colors";
@import "~styles/layout";
@ -195,6 +202,10 @@
margin-bottom: $base-gap;
position: relative;
&:hover .results-see-more {
opacity: 1;
}
&::before {
counter-increment: result;
content: counter(result) ".";
@ -213,14 +224,18 @@
width: 92%;
position: relative;
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: center;
padding: $small-gap;
padding: $small-gap $base-gap;
}
h2,
.results-see-more {
position: relative;
z-index: 1;
}
h2 {
position: relative;
z-index: 1;
color: $text-color-base;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
@ -230,6 +245,15 @@
}
}
.results-see-more {
stroke: $text-color-base;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
height: 32px;
width: 32px;
opacity: 0;
transition: opacity 150ms $easeOutBack;
}
.result-percentage {
height: 100%;
position: absolute;

12
src/app/euromat/i18n.js
View file

@ -8,15 +8,19 @@ export default {
skipped: 'These überspringen'
},
euromat: {
pageTitle: 'Thesen',
back: 'Zurück'
},
results: {
pageTitle: 'Ergebnis',
headline: 'Dein Ergebnis',
buttons: {
back: 'Zurück zum Anfang'
startover: 'Euromat wiederholen',
index: 'Zur Startseite'
}
},
emphasis: {
pageTitle: 'Thesengewichtung',
headline: 'Welche Thesen sind dir wichtig?',
content: 'Markiere Thesen die doppelt gewertet sollen.',
button: 'Weiter'
@ -32,15 +36,19 @@ export default {
skipped: 'Skip thesis'
},
euromat: {
pageTitle: 'Theses',
back: 'Back'
},
results: {
pageTitle: 'Results',
headline: 'Your results',
buttons: {
back: 'Back to beginning'
startover: 'Start over',
index: 'Back to landing page'
}
},
emphasis: {
pageTitle: 'Emphasis',
headline: 'Which theses are important for you?',
content: 'Mark the theses which should count double.',
button: 'Continue'

25
src/app/euromat/routes.js
View file

@ -2,6 +2,7 @@ import Index from './components/index'
import EuroMat from './components/euromat'
import Emphasis from './components/emphasis'
import Results from './components/results'
import i18n from './i18n'
function hasAnswers (to, from, next) {
if (!sessionStorage.getItem('euromat-answers')) {
@ -19,21 +20,39 @@ export default [
{
path: '',
name: 'euromat',
component: EuroMat
component: EuroMat,
meta: {
title: {
de: i18n.de.euromat.euromat.pageTitle,
en: i18n.en.euromat.euromat.pageTitle
}
}
},
{
path: 'gewichtung',
alias: 'emphasis',
name: 'emphasis',
component: Emphasis,
beforeEnter: hasAnswers
beforeEnter: hasAnswers,
meta: {
title: {
de: i18n.de.euromat.emphasis.pageTitle,
en: i18n.en.euromat.emphasis.pageTitle
}
}
},
{
path: 'ergebnis',
alias: 'results',
name: 'results',
component: Results,
beforeEnter: hasAnswers
beforeEnter: hasAnswers,
meta: {
title: {
de: i18n.de.euromat.results.pageTitle,
en: i18n.en.euromat.results.pageTitle
}
}
}
]
}

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

@ -1,6 +1,7 @@
export default {
de: {
faq: {
pageTitle: 'FAQ',
headline: 'FAQ',
questions: [
{
@ -27,6 +28,7 @@ export default {
},
en: {
faq: {
pageTitle: 'FAQ',
headline: 'FAQ',
questions: [
{

9
src/app/faq/routes.js
View file

@ -1,10 +1,17 @@
import FAQ from './components/index'
import i18n from './i18n'
export default [
{
path: '/faq',
alias: '/alias',
name: 'faq',
component: FAQ
component: FAQ,
meta: {
title: {
de: i18n.de.faq.pageTitle,
en: i18n.en.faq.pageTitle
}
}
}
]

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

@ -1,11 +1,13 @@
export default {
de: {
glossary: {
pageTitle: 'Glossar',
headline: 'Glossar'
}
},
en: {
glossary: {
pageTitle: 'Glossary',
headline: 'Glossary'
}
}

9
src/app/glossary/routes.js
View file

@ -1,10 +1,17 @@
import Glossary from './components/index'
import i18n from './i18n'
export default [
{
path: '/glossar',
alias: '/glossary',
name: 'glossary',
component: Glossary
component: Glossary,
meta: {
title: {
de: i18n.de.glossary.pageTitle,
en: i18n.en.glossary.pageTitle
}
}
}
]

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

@ -1,6 +1,7 @@
export default {
de: {
imprint: {
pageTitle: 'Impressum',
headline: 'Impressum',
address: {
label: 'Adresse',
@ -86,6 +87,7 @@ export default {
},
en: {
imprint: {
pageTitle: 'Imprint',
headline: 'Imprint',
address: {
label: 'Address',

9
src/app/imprint/routes.js
View file

@ -1,10 +1,17 @@
import Imprint from './components/index'
import i18n from './i18n'
export default [
{
path: '/impressum',
alias: '/imprint',
name: 'imprint',
component: Imprint
component: Imprint,
meta: {
title: {
de: i18n.de.imprint.pageTitle,
en: i18n.en.imprint.pageTitle
}
}
}
]

13
src/app/intro/i18n.js
View file

@ -1,20 +1,20 @@
export default {
de: {
intro: {
pageTitle: 'Startseite',
headline: 'Willkommen beim Euromat zur Bundestagswahl 2017!',
content: [
'Sie fragen sich, was ein Euromat ist? Der Euromat nicht einfach nur ein Wahlomat. Sondern Ihr digitaler Wahl-Freund, der Ihnen einen Eindruck von den europapolitischen Positionen der Parteien vermittelt.',
'Sie möchten erfahren, was die Parteien vor der Bundestagswahl zu Europa allgemein und zur Zukunft der EUkonkretzu sagen haben?',
'Wir haben für Sie bei CDU/CSU, SPD, Bündnis90/Die Grünen, DIE LINKE und FDP nachgefragt.*Mit unserem Euromat können Sie Ihre eigene Einstellung mit den Antworten der Positionen vergleichen.',
'MitwelcherParteihabenSiediegrößteÜbereinstimmungbeiFragenzum Thema Europa? Finden Sie es heraus!',
'Zu guter Letzt: Wie immer Ihr Ergebnis ausfällt, der Euromat stellt keine Wahlempfehlung dar.UnserEuromatsollvorallemeines:Ihnen vor der Wahl Spaß bereiten und dabei die wichtigsten Informationen zur Europapolitik der Parteienliefern.'
'Sie fragen sich, was ein Euromat ist? Der Euromat ist nicht einfach nur ein Wahlomat. Sondern Ihr digitaler Wahl-Freund, der Ihnen einen Eindruck von den europapolitischen Positionen der Parteien vermittelt.',
'Sie fragen sich, was die deutschen Parteien zu Europa sagen? Wir haben für Sie bei CDU/CSU, SPD, Bündnis90/Die Grünen, DIE LINKE und FDP nachgefragt.*',
'Mit welcher Partei haben Sie die größte Übereinstimmung bei Fragen zum Thema Europa? Finden Sie es heraus!',
'Zu guter Letzt: Wie immer Ihr Ergebnis ausfällt, der Euromat stellt keine Wahlempfehlung dar. Unser Euromat soll vor allem eines: Ihnen vor der Wahl Spaß bereiten und dabei die wichtigsten Informationen zur Europapolitik der Parteien liefern'
],
note: 'Mehr zur Methodik und den angefragten Parteien finden Sie auf unserer FAQ-Seite.',
button: 'Start'
}
},
en: {
intro: {
pageTitle: 'Landing page',
headline: 'Welcome! This is your Euromat for the German Federal Elections 2017!',
content: [
'You‘re thinking: What‘s a Euromat? The Euromat is not a regular voting advice application. On the contrary, it is your digital election buddy navigating you through the positions of the German parties with regard to European politics.',
@ -23,7 +23,6 @@ export default {
'With which party do you agree the most on questions regarding Europe? Don‘t hesitate, find out now!',
'Last but not least: Whatever your result, you make the final choice who to vote on 24.September. Our Euromat focuses mainly on one thing – making your voting experience fun while providing you with all essential information on the German parties‘ stance towards European politics.'
],
note: 'You can find more about the methodology and contacted parties on our FAQ page.',
button: 'Start'
}
}

9
src/app/intro/routes.js
View file

@ -1,9 +1,16 @@
import Intro from './components/index'
import i18n from './i18n'
export default [
{
path: '/',
name: 'intro',
component: Intro
component: Intro,
meta: {
title: {
de: i18n.de.intro.pageTitle,
en: i18n.en.intro.pageTitle
}
}
}
]

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

@ -1,6 +1,7 @@
export default {
de: {
press: {
pageTitle: 'Presse',
headline: 'Kontakt',
content: 'Sie sind Journalist, oder ein/e interessierte/r BürgerIn? Dann treten Sie gern mit uns in Kontakt!',
contact: 'Ihre Anfragen nehmen wir gerne unter folgender Email-Adresse entgegen:',
@ -9,6 +10,7 @@ export default {
},
en: {
press: {
pageTitle: 'Press',
headline: 'Get in touch!',
content: 'Whether you’re a journalist or an interested citizen, feel free to reach out to us.',
contact: 'We take your inquiries at any time. Send a message to:',

9
src/app/press/routes.js
View file

@ -1,10 +1,17 @@
import Press from './components/index'
import i18n from './i18n'
export default [
{
path: '/presse',
alias: '/press',
name: 'press',
component: Press
component: Press,
meta: {
title: {
de: i18n.de.press.pageTitle,
en: i18n.en.press.pageTitle
}
}
}
]

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

@ -1,6 +1,7 @@
export default {
de: {
privacy: {
pageTitle: 'Datenschutz',
headline: 'Datenschutz',
topics: [
{
@ -61,6 +62,7 @@ export default {
},
en: {
privacy: {
pageTitle: 'Data privacy',
headline: 'Data privacy',
topics: [
{

9
src/app/privacy/routes.js
View file

@ -1,10 +1,17 @@
import Privacy from './components/index'
import i18n from './i18n'
export default [
{
path: '/datenschutz',
alias: '/privacy',
name: 'privacy',
component: Privacy
component: Privacy,
meta: {
title: {
de: i18n.de.privacy.pageTitle,
en: i18n.en.privacy.pageTitle
}
}
}
]

1
src/assets/icons/index.js
View file

@ -10,3 +10,4 @@ require('./linke-logo')
require('./poe-logo')
require('./polis-logo')
require('./spd-logo')
require('./star')

11
src/assets/icons/star.js Normal file
View file

@ -0,0 +1,11 @@
/* eslint-disable */
var icon = require('vue-svgicon')
icon.register({
'star': {
width: 182,
height: 172,
viewBox: '0 0 182 172',
data: '<g fill-rule="nonzero"><path pid="0" d="M90.964 1.784L66.1 78.311l38.374 12.468"/><path pid="1" d="M91.036 1.784L115.9 78.311 77.527 90.779"/><path pid="2" d="M167.627 57.362H87.16v40.35"/><path pid="3" d="M167.649 57.43l-65.098 47.297-23.716-32.643"/><path pid="4" d="M138.394 147.358l-24.865-76.527L75.155 83.3"/><path pid="5" d="M138.336 147.4l-65.098-47.296 23.716-32.643"/><g><path pid="6" d="M43.664 147.4l65.098-47.296-23.716-32.643"/><path pid="7" d="M43.606 147.358l24.865-76.527L106.845 83.3"/></g><g><path pid="8" d="M14.351 57.43l65.098 47.297 23.716-32.643"/><path pid="9" d="M14.373 57.362H94.84v40.35"/></g></g>'
}
})

53
src/assets/svg/star.svg Normal file
View file

@ -0,0 +1,53 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="182px" height="172px" viewBox="0 0 182 172" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
<title>star</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="star" fill-rule="nonzero" fill="#FEE872">
<g id="s-link" transform="translate(91.000000, 86.500000) rotate(-0.000000) translate(-91.000000, -86.500000) translate(1.000000, 1.000000)">
<g id="s" transform="translate(0.000000, 0.000000)">
<g id="c" transform="translate(50.453293, 0.000000)">
<polyline id="t" transform="translate(46.265218, 45.281792) rotate(18.000000) translate(-46.265218, -45.281792) " points="26.0908742 5.04923388 26.0908742 85.5143502 66.4395612 85.5143502"></polyline>
<g id="t-link" transform="translate(32.988808, 45.000000) scale(-1, 1) translate(-32.988808, -45.000000) translate(0.988808, 0.000000)">
<polyline id="t" transform="translate(32.160612, 45.281792) rotate(18.000000) translate(-32.160612, -45.281792) " points="11.9862681 5.04923388 11.9862681 85.5143502 52.3349551 85.5143502"></polyline>
</g>
</g>
<g id="c-link" transform="translate(124.416978, 69.540080) rotate(72.000000) translate(-124.416978, -69.540080) translate(85.416978, 24.540080)">
<g id="c" transform="translate(-0.000000, 0.000000)">
<polyline id="t" transform="translate(46.265218, 45.281792) rotate(18.000000) translate(-46.265218, -45.281792) " points="26.0908742 5.04923388 26.0908742 85.5143502 66.4395612 85.5143502"></polyline>
<g id="t-link" transform="translate(32.988808, 45.000000) scale(-1, 1) translate(-32.988808, -45.000000) translate(0.988808, 0.000000)">
<polyline id="t" transform="translate(32.160612, 45.281792) rotate(18.000000) translate(-32.160612, -45.281792) " points="11.9862681 5.04923388 11.9862681 85.5143502 52.3349551 85.5143502"></polyline>
</g>
</g>
</g>
<g id="c-link" transform="translate(111.817569, 110.286641) rotate(144.000000) translate(-111.817569, -110.286641) translate(72.817569, 65.286641)">
<g id="c" transform="translate(0.000000, -0.000000)">
<polyline id="t" transform="translate(46.265218, 45.281792) rotate(18.000000) translate(-46.265218, -45.281792) " points="26.0908742 5.04923388 26.0908742 85.5143502 66.4395612 85.5143502"></polyline>
<g id="t-link" transform="translate(32.988808, 45.000000) scale(-1, 1) translate(-32.988808, -45.000000) translate(0.988808, -0.000000)">
<polyline id="t" transform="translate(32.160612, 45.281792) rotate(18.000000) translate(-32.160612, -45.281792) " points="11.9862681 5.04923388 11.9862681 85.5143502 52.3349551 85.5143502"></polyline>
</g>
</g>
</g>
<g id="c-link" transform="translate(69.067021, 110.929320) rotate(-144.000000) translate(-69.067021, -110.929320) translate(30.067021, 65.929320)">
<g id="c" transform="translate(-0.000000, -0.000000)">
<polyline id="t" transform="translate(46.265218, 45.281792) rotate(18.000000) translate(-46.265218, -45.281792) " points="26.0908742 5.04923388 26.0908742 85.5143502 66.4395612 85.5143502"></polyline>
<g id="t-link" transform="translate(32.988808, 45.000000) scale(-1, 1) translate(-32.988808, -45.000000) translate(0.988808, 0.000000)">
<polyline id="t" transform="translate(32.160612, 45.281792) rotate(18.000000) translate(-32.160612, -45.281792) " points="11.9862681 5.04923388 11.9862681 85.5143502 52.3349551 85.5143502"></polyline>
</g>
</g>
</g>
<g id="c-link" transform="translate(55.245139, 70.579957) rotate(-72.000000) translate(-55.245139, -70.579957) translate(16.245139, 25.579957)">
<g id="c">
<polyline id="t" transform="translate(46.265218, 45.281792) rotate(18.000000) translate(-46.265218, -45.281792) " points="26.0908742 5.04923388 26.0908742 85.5143502 66.4395612 85.5143502"></polyline>
<g id="t-link" transform="translate(32.988808, 45.000000) scale(-1, 1) translate(-32.988808, -45.000000) translate(0.988808, 0.000000)">
<polyline id="t" transform="translate(32.160612, 45.281792) rotate(18.000000) translate(-32.160612, -45.281792) " points="11.9862681 5.04923388 11.9862681 85.5143502 52.3349551 85.5143502"></polyline>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

5
src/router/getPageTitle.js Normal file
View file

@ -0,0 +1,5 @@
export default function getPageTitle (i18n = {}) {
const locale = window.localStorage.getItem('euromat-locale')
const title = window.document.title.split('—')[0].trim()
return `${title} — ${i18n[locale]}`
}

5
src/router/index.js
View file

@ -1,6 +1,7 @@
import Vue from 'vue'
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'
@ -31,6 +32,10 @@ const router = new Router({
})
router.beforeEach((to, from, next) => {
if (to.meta.title && to.meta.title.de && to.meta.title.en) {
window.document.title = getPageTitle(to.meta.title)
}
window.scrollTo(0, 0)
next()
})