kandimat-user-app/src/app/about/components/index.vue
2019-08-31 17:23:59 +02:00

210 lines
4.3 KiB
Vue

<template>
<section>
<h1>{{ $t('about.headline') }}</h1>
<div class="about-content">
<div class="about-text">
<v-markdown :source="$t('about.content')" />
</div>
<div class="about-people">
<div class="people-group polis">
<div class="group-inner">
<h2>
<a :href="teamLabel.polis.url" target="_blank">
<img
class="team-logo polis"
:src="polisLogo"
:alt="teamLabel.polis.label"
width="150"
height="100"
>
<span hidden>{{ teamLabel.polis.label }}</span>
</a>
</h2>
</div>
</div>
<div class="people-group poe">
<div class="group-inner">
<h2>
<a :href="teamLabel.poe.url" target="_blank">
<img
class="team-logo poe"
:alt="teamLabel.poe.label"
:src="poeLogo"
width="400"
height="60"
>
<span hidden>{{ teamLabel.poe.label }}</span>
</a>
</h2>
</div>
</div>
<div class="people-group dev">
<div class="group-inner dark">
<h2>{{ $t('about.devDesign') }}</h2>
<ul>
<li v-for="(member, index) of members.dev" :key="'member-dev-' + index">
<a
v-if="member.profile"
:href="member.profile"
target="_blank"
>
{{ member.name }}
<feather-external-link />
</a>
<span v-else>{{ member.name }}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import '@/assets/icons'
export default {
name: 'About',
components: {
'feather-external-link': () =>
import('vue-feather-icons/icons/ExternalLinkIcon' /* webpackChunkName: "icons" */)
},
data () {
return {
polisLogo: require('@/assets/svg/polis-colored-logo.svg'),
poeLogo: require('@/assets/svg/poe-colored-logo.svg'),
members: {
dev: [
{ name: 'Moritz Kröger', profile: 'http://moritz.berlin' }
]
},
teamLabel: {
polis: {
label: 'Polis180',
url: 'https://polis180.org/'
},
poe: {
label: 'Pulse of Europe',
url: 'https://pulseofeurope.eu'
}
}
}
}
}
</script>
<style lang="scss" scoped>
@import "~@/styles/colors";
@import "~@/styles/layout";
$breakpoint: 630px;
h1,
p {
margin-bottom: $base-gap;
}
.team-logo.poe {
width: 100%;
height: auto;
}
.about-content {
display: flex;
flex-direction: column;
}
.about-text {
margin-bottom: $base-gap;
}
.about-people {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
@media (max-width: $breakpoint) {
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.people-group {
flex: 0 0 50%;
text-align: center;
@media (max-width: $breakpoint) {
flex: 0 0 100%;
width: 100%;
}
}
h2 {
color: $text-color-secondary;
}
ul {
list-style: none;
}
li:not(:last-child) {
margin-bottom: $small-gap;
}
svg:not(.team-logo) {
stroke: $transparent-white;
width: 1em;
height: 1em;
}
}
.people-group.dev h2 {
margin-bottom: $small-gap;
}
.group-inner {
width: calc(100% - #{$base-gap});
background: $background-secondary;
border-radius: $border-radius-medium;
box-shadow: $button-shadow;
padding: $base-gap;
color: $text-color-secondary;
margin-bottom: $base-gap;
@media (max-width: $breakpoint) {
width: 100%;
}
&.dark {
background: $dark-blue;
h2,
a,
span {
color: $text-color-base;
}
}
a,
span {
color: $text-color-secondary;
font-weight: 700;
}
a:hover {
color: $text-color-special;
}
svg:not(.team-logo) {
stroke: $green !important;
}
}
</style>