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

✨ Finished layout for partner page

Browse source
This commit is contained in:
Moritz Kröger 2019-05-05 19:57:11 +02:00
parent eb8c283026
commit ad2c5c22ed
19 changed files with 202 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -172,7 +172,7 @@
.group-inner {
width: calc(100% - #{$base-gap});
background: $background-secondary;
border-radius: $border-radius / 4;
border-radius: $border-radius-medium;
box-shadow: $button-shadow;
padding: $base-gap;
color: $text-color-secondary;

86
src/app/partner/components/index.vue
View file

@ -6,20 +6,28 @@
<ul class="partners-list">
<li v-for="partner in $t('partner.partners')" :key="partner.name">
<h2>
<a
:href="partner.url"
target="_blank"
rel="noopener"
<a
class="partners-list-logo"
:href="partner.url"
target="_blank"
rel="noopener"
>
<img
:src="getPartnerLogo(partner.name)"
:alt="partner.name"
:title="partner.name"
>
</a>
<div class="partners-list-content">
<h2>
{{ partner.name }}
</a>
</h2>
<p>{{ partner.description }}</p>
</h2>
<v-markdown v-if="!!partner.description" :source="partner.description" />
</div>
</li>
</ul>
<ul class="communications-list">
<!-- <ul class="communications-list">
<li v-for="communicationPartner in $t('partner.communication')" :key="communicationPartner.name">
<h2>
<a
@ -32,13 +40,20 @@
</h2>
<p>{{ communicationPartner.description }}</p>
</li>
</ul>
</ul> -->
</section>
</template>
<script>
export default {
name: 'Partner'
name: 'Partner',
methods: {
getPartnerLogo (token) {
const name = token.toLowerCase().replace(/\s/g, '-')
return require(`@/assets/${name}-logo.png`)
}
}
}
</script>
@ -46,30 +61,65 @@
@import "~@/styles/colors";
@import "~@/styles/layout";
$breakpoint: 630px;
.partner-page {
h1 {
margin-bottom: $base-gap;
}
}
.partners-list {
.partners-list,
.communications-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
justify-content: center;
list-style: none;
width: 100%;
margin-top: $base-gap;
& li {
width: calc(25% - #{$base-gap});
flex: 1 0 auto;
border: 1px solid red;
li {
width: calc(50% - #{$base-gap});
flex: 0 0 auto;
background: $medium-blue;
border-radius: $border-radius-medium;
margin-bottom: $base-gap;
&:not(:nth-of-type(4n)) {
&:not(:nth-of-type(even)):not(:last-child) {
margin-right: $base-gap;
}
img {
width: 100%;
}
@media (max-width: $breakpoint) {
margin-right: 0;
flex: 0 0 100%;
width: 100%;
&:not(:nth-of-type(even)):not(:last-child) {
margin-right: 0;
}
}
}
h2 {
color: $text-color-base;
margin-bottom: calc(#{$base-gap} / 2);
}
.partners-list-logo {
background: $background-secondary;
border-radius: $border-radius-medium;
padding: $base-gap;
margin-bottom: calc(#{$base-gap} / 2);
display: block;
}
.partners-list-content {
padding: 0 $base-gap $base-gap;
}
}
</style>

16
src/app/partner/content/cz.json
View file

@ -1,44 +1,44 @@
{
"language": "cz",
"url": "partner",
"title": "[CZ] Partner",
"title": "Partner",
"headline": "Partner",
"content": "We could provide the EUROMAT in 10 European countries thanks to the support of our friends and partners all over Europe.",
"partners": [
{
"name": "POLIS180",
"url": "https://polis180.org/",
"description": "foo"
"description": "«Polis180» was the first spin-off of foraus. Polis programmes create innovative debating formats that enable a better discussion of the questions that bother us most."
},
{
"name": "Pulse of Europe",
"url": "https://pulseofeurope.eu/",
"description": "foo"
"description": "We want to contribute our share to ensure that Europe, now and in the future, remains united and democratic and continues to be a community in which regard for human rights, the rule of law, freedom of speech and assembly as well as tolerance and respect remain integral parts of its essence."
},
{
"name": "ARGO",
"url": "http://argothinktank.org/en/",
"description": "foo"
"description": "In the European super election year 2017, foraus’ and Polis180’s new sister think tank, «Argo», sets foot in France. Argo is set out on March 23rd with their official launch press conference, in Paris."
},
{
"name": "PONTO",
"url": "http://www.pontothinktank.org/",
"description": "foo"
"description": "A small group in Vienna brings the grassroots concept to Austria's think tank landscape. Vienna as a melting pot of cultures and its position as a mediator between the «West» and the «East», Vienna as a hub for global politics and last but not least all the challenges in Austria's national political sphere - all that requires a new democratic voice."
},
{
"name": "JEF",
"url": "https://www.mladievropane.cz/",
"description": "foo"
"description": "Naším cílem je silná Evropa, která nám umožní uchovat naše hodnoty i v chaotickém světě."
},
{
"name": "THINKTANK EUROPA",
"url": "http://english.thinkeuropa.dk/think-tank-europa",
"description": "foo"
"description": "We are an independent think tank focusing on European issues. We are dedicated to finding constructive and forward-looking answers to Denmark’s role in the European Union."
},
{
"name": "INSTITUTE for POLITICAL MANAGEMENT",
"url": "https://ipm.si/en/homepage/",
"description": "foo"
"description": "Think tank, established with a purpose of researching, developing and applied operation in the field of political management."
}
],
"communication": [

14
src/app/partner/content/de.json
View file

@ -8,37 +8,37 @@
{
"name": "POLIS180",
"url": "https://polis180.org/",
"description": "foo"
"description": "«Polis180» was the first spin-off of foraus. Polis programmes create innovative debating formats that enable a better discussion of the questions that bother us most."
},
{
"name": "Pulse of Europe",
"url": "https://pulseofeurope.eu/",
"description": "foo"
"description": "We want to contribute our share to ensure that Europe, now and in the future, remains united and democratic and continues to be a community in which regard for human rights, the rule of law, freedom of speech and assembly as well as tolerance and respect remain integral parts of its essence."
},
{
"name": "ARGO",
"url": "http://argothinktank.org/en/",
"description": "foo"
"description": "In the European super election year 2017, foraus’ and Polis180’s new sister think tank, «Argo», sets foot in France. Argo is set out on March 23rd with their official launch press conference, in Paris."
},
{
"name": "PONTO",
"url": "http://www.pontothinktank.org/",
"description": "foo"
"description": "A small group in Vienna brings the grassroots concept to Austria's think tank landscape. Vienna as a melting pot of cultures and its position as a mediator between the «West» and the «East», Vienna as a hub for global politics and last but not least all the challenges in Austria's national political sphere - all that requires a new democratic voice."
},
{
"name": "JEF",
"url": "https://www.mladievropane.cz/",
"description": "foo"
"description": "Naším cílem je silná Evropa, která nám umožní uchovat naše hodnoty i v chaotickém světě."
},
{
"name": "THINKTANK EUROPA",
"url": "http://english.thinkeuropa.dk/think-tank-europa",
"description": "foo"
"description": "We are an independent think tank focusing on European issues. We are dedicated to finding constructive and forward-looking answers to Denmark’s role in the European Union."
},
{
"name": "INSTITUTE for POLITICAL MANAGEMENT",
"url": "https://ipm.si/en/homepage/",
"description": "foo"
"description": "Think tank, established with a purpose of researching, developing and applied operation in the field of political management."
}
],
"communication": [

16
src/app/partner/content/dk.json
View file

@ -1,44 +1,44 @@
{
"language": "dk",
"url": "partner",
"title": "[DK] Partner",
"title": "Partner",
"headline": "Partner",
"content": "We could provide the EUROMAT in 10 European countries thanks to the support of our friends and partners all over Europe.",
"partners": [
{
"name": "POLIS180",
"url": "https://polis180.org/",
"description": "foo"
"description": "«Polis180» was the first spin-off of foraus. Polis programmes create innovative debating formats that enable a better discussion of the questions that bother us most."
},
{
"name": "Pulse of Europe",
"url": "https://pulseofeurope.eu/",
"description": "foo"
"description": "We want to contribute our share to ensure that Europe, now and in the future, remains united and democratic and continues to be a community in which regard for human rights, the rule of law, freedom of speech and assembly as well as tolerance and respect remain integral parts of its essence."
},
{
"name": "ARGO",
"url": "http://argothinktank.org/en/",
"description": "foo"
"description": "In the European super election year 2017, foraus’ and Polis180’s new sister think tank, «Argo», sets foot in France. Argo is set out on March 23rd with their official launch press conference, in Paris."
},
{
"name": "PONTO",
"url": "http://www.pontothinktank.org/",
"description": "foo"
"description": "A small group in Vienna brings the grassroots concept to Austria's think tank landscape. Vienna as a melting pot of cultures and its position as a mediator between the «West» and the «East», Vienna as a hub for global politics and last but not least all the challenges in Austria's national political sphere - all that requires a new democratic voice."
},
{
"name": "JEF",
"url": "https://www.mladievropane.cz/",
"description": "foo"
"description": "Naším cílem je silná Evropa, která nám umožní uchovat naše hodnoty i v chaotickém světě."
},
{
"name": "THINKTANK EUROPA",
"url": "http://english.thinkeuropa.dk/think-tank-europa",
"description": "foo"
"description": "We are an independent think tank focusing on European issues. We are dedicated to finding constructive and forward-looking answers to Denmark’s role in the European Union."
},
{
"name": "INSTITUTE for POLITICAL MANAGEMENT",
"url": "https://ipm.si/en/homepage/",
"description": "foo"
"description": "Think tank, established with a purpose of researching, developing and applied operation in the field of political management."
}
],
"communication": [

14
src/app/partner/content/en.json
View file

@ -8,37 +8,37 @@
{
"name": "POLIS180",
"url": "https://polis180.org/",
"description": "foo"
"description": "«Polis180» was the first spin-off of foraus. Polis programmes create innovative debating formats that enable a better discussion of the questions that bother us most."
},
{
"name": "Pulse of Europe",
"url": "https://pulseofeurope.eu/",
"description": "foo"
"description": "We want to contribute our share to ensure that Europe, now and in the future, remains united and democratic and continues to be a community in which regard for human rights, the rule of law, freedom of speech and assembly as well as tolerance and respect remain integral parts of its essence."
},
{
"name": "ARGO",
"url": "http://argothinktank.org/en/",
"description": "foo"
"description": "In the European super election year 2017, foraus’ and Polis180’s new sister think tank, «Argo», sets foot in France. Argo is set out on March 23rd with their official launch press conference, in Paris."
},
{
"name": "PONTO",
"url": "http://www.pontothinktank.org/",
"description": "foo"
"description": "A small group in Vienna brings the grassroots concept to Austria's think tank landscape. Vienna as a melting pot of cultures and its position as a mediator between the «West» and the «East», Vienna as a hub for global politics and last but not least all the challenges in Austria's national political sphere - all that requires a new democratic voice."
},
{
"name": "JEF",
"url": "https://www.mladievropane.cz/",
"description": "foo"
"description": "Naším cílem je silná Evropa, která nám umožní uchovat naše hodnoty i v chaotickém světě."
},
{
"name": "THINKTANK EUROPA",
"url": "http://english.thinkeuropa.dk/think-tank-europa",
"description": "foo"
"description": "We are an independent think tank focusing on European issues. We are dedicated to finding constructive and forward-looking answers to Denmark’s role in the European Union."
},
{
"name": "INSTITUTE for POLITICAL MANAGEMENT",
"url": "https://ipm.si/en/homepage/",
"description": "foo"
"description": "Think tank, established with a purpose of researching, developing and applied operation in the field of political management."
}
],
"communication": [

16
src/app/partner/content/fr.json
View file

@ -1,44 +1,44 @@
{
"language": "fr",
"url": "partner",
"title": "[FR] Partner",
"title": "Partner",
"headline": "Partner",
"content": "We could provide the EUROMAT in 10 European countries thanks to the support of our friends and partners all over Europe.",
"partners": [
{
"name": "POLIS180",
"url": "https://polis180.org/",
"description": "foo"
"description": "«Polis180» was the first spin-off of foraus. Polis programmes create innovative debating formats that enable a better discussion of the questions that bother us most."
},
{
"name": "Pulse of Europe",
"url": "https://pulseofeurope.eu/",
"description": "foo"
"description": "We want to contribute our share to ensure that Europe, now and in the future, remains united and democratic and continues to be a community in which regard for human rights, the rule of law, freedom of speech and assembly as well as tolerance and respect remain integral parts of its essence."
},
{
"name": "ARGO",
"url": "http://argothinktank.org/en/",
"description": "foo"
"description": "In the European super election year 2017, foraus’ and Polis180’s new sister think tank, «Argo», sets foot in France. Argo is set out on March 23rd with their official launch press conference, in Paris."
},
{
"name": "PONTO",
"url": "http://www.pontothinktank.org/",
"description": "foo"
"description": "A small group in Vienna brings the grassroots concept to Austria's think tank landscape. Vienna as a melting pot of cultures and its position as a mediator between the «West» and the «East», Vienna as a hub for global politics and last but not least all the challenges in Austria's national political sphere - all that requires a new democratic voice."
},
{
"name": "JEF",
"url": "https://www.mladievropane.cz/",
"description": "foo"
"description": "Naším cílem je silná Evropa, která nám umožní uchovat naše hodnoty i v chaotickém světě."
},
{
"name": "THINKTANK EUROPA",
"url": "http://english.thinkeuropa.dk/think-tank-europa",
"description": "foo"
"description": "We are an independent think tank focusing on European issues. We are dedicated to finding constructive and forward-looking answers to Denmark’s role in the European Union."
},
{
"name": "INSTITUTE for POLITICAL MANAGEMENT",
"url": "https://ipm.si/en/homepage/",
"description": "foo"
"description": "Think tank, established with a purpose of researching, developing and applied operation in the field of political management."
}
],
"communication": [

16
src/app/partner/content/si.json
View file

@ -1,44 +1,44 @@
{
"language": "si",
"url": "partner",
"title": "[SI] Partner",
"title": "Partner",
"headline": "Partner",
"content": "We could provide the EUROMAT in 10 European countries thanks to the support of our friends and partners all over Europe.",
"partners": [
{
"name": "POLIS180",
"url": "https://polis180.org/",
"description": "foo"
"description": "«Polis180» was the first spin-off of foraus. Polis programmes create innovative debating formats that enable a better discussion of the questions that bother us most."
},
{
"name": "Pulse of Europe",
"url": "https://pulseofeurope.eu/",
"description": "foo"
"description": "We want to contribute our share to ensure that Europe, now and in the future, remains united and democratic and continues to be a community in which regard for human rights, the rule of law, freedom of speech and assembly as well as tolerance and respect remain integral parts of its essence."
},
{
"name": "ARGO",
"url": "http://argothinktank.org/en/",
"description": "foo"
"description": "In the European super election year 2017, foraus’ and Polis180’s new sister think tank, «Argo», sets foot in France. Argo is set out on March 23rd with their official launch press conference, in Paris."
},
{
"name": "PONTO",
"url": "http://www.pontothinktank.org/",
"description": "foo"
"description": "A small group in Vienna brings the grassroots concept to Austria's think tank landscape. Vienna as a melting pot of cultures and its position as a mediator between the «West» and the «East», Vienna as a hub for global politics and last but not least all the challenges in Austria's national political sphere - all that requires a new democratic voice."
},
{
"name": "JEF",
"url": "https://www.mladievropane.cz/",
"description": "foo"
"description": "Naším cílem je silná Evropa, která nám umožní uchovat naše hodnoty i v chaotickém světě."
},
{
"name": "THINKTANK EUROPA",
"url": "http://english.thinkeuropa.dk/think-tank-europa",
"description": "foo"
"description": "We are an independent think tank focusing on European issues. We are dedicated to finding constructive and forward-looking answers to Denmark’s role in the European Union."
},
{
"name": "INSTITUTE for POLITICAL MANAGEMENT",
"url": "https://ipm.si/en/homepage/",
"description": "foo"
"description": "Think tank, established with a purpose of researching, developing and applied operation in the field of political management."
}
],
"communication": [

BIN
src/assets/argo-logo.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

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

@ -20,6 +20,7 @@ require('./flag-fr')
require('./flag-pl')
require('./flag-si')
require('./grune-logo')
require('./jef-logo')
require('./linke-logo')
require('./neos-logo')
require('./ovld-logo')

10
src/assets/icons/jef-logo.js Normal file
View file

@ -0,0 +1,10 @@
/* eslint-disable */
var icon = require('vue-svgicon')
icon.register({
'jef-logo': {
width: 16,
height: 16,
viewBox: '0 0 200 200',
data: '<circle pid="0" cx="134.649" cy="134.649" r="134.649" id="circle" _fill="#0c6"/><path pid="1" d="M67.324 101.841H212.6V68.18H67.324v33.662z" id="block1" _fill="#fff"/><path pid="2" d="M33.662 151.507h145.275v-33.661H33.662v33.661z" id="block2" _fill="#fff"/><path pid="3" d="M67.324 201.115H212.6v-33.662H67.324v33.662z" id="block3" _fill="#fff"/><text x="302.289" y="102.848" id="text1" style="text-align:start;line-height:100%" _fill="#0c6" font-family="ProximaNova-Regular,\'Proxima Nova Regular\',proximanova" font-size="50" font-style="normal" font-variant="normal" font-weight="400" font-stretch="normal" letter-spacing="0" word-spacing="0" writing-mode="lr-tb" text-anchor="start" fill-opacity="1" _stroke="none"><tspan x="302.289" y="102.848" id="t_word_1">MLADÍ</tspan> <tspan x="302.289" y="152.848" id="t_word_2">EVROPANÉ</tspan> <tspan x="302.289" y="202.848" id="t_word_3">JEF CZ</tspan></text>'
}
})

BIN
src/assets/institute-for-political-management-logo.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.4 KiB

BIN
src/assets/jef-logo.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

BIN
src/assets/polis180-logo.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 145 KiB

BIN
src/assets/ponto-logo.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
src/assets/pulse-of-europe-logo.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

75
src/assets/svg/jef-logo.svg Normal file
View file

@ -0,0 +1,75 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/)
width="184.55293mm"
height="76.00074mm"
viewBox="0 0 653.92771 269.29396"
-->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
id="svg2">
<style type="text/css">
@font-face {
font-family: ProximaNova-Regular;
src: url('/www/htdocs/v092564/jef-logo/ProximaNova.otf') format('truetype');
}
.logofont {
font-family: ProximaNova-Regular, 'Proxima Nova Regular', proximanova;
font-size: 50px;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
text-align: start;
line-height: 100%;
letter-spacing: 0px;
word-spacing: 0px;
writing-mode: lr-tb;
text-anchor: start;
fill-opacity: 1;
stroke: none;
}
.black { fill: #231f20; }
.grey { fill: #717171; }
.green { fill: #00CC66; }
.white { fill: #FFFFFF; }
</style>
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<circle class="green"
cx="134.64896" cy="134.64896" r="134.64896" id="circle" />
<path class="white"
d="m 67.324159,101.84125 145.275001,0 0,-33.66213 -145.275001,0 0,33.66213 z"
id="block1" />
<path class="white"
d="m 33.66216,151.50737 145.275,0 0,-33.66162 -145.275,0 0,33.66162 z"
id="block2" />
<path class="white"
d="m 67.324159,201.11475 145.275001,0 0,-33.66213 -145.275001,0 0,33.66213 z"
id="block3" />
<text class="green logofont"
x="302.28943" y="102.84766"
id="text1"
space="preserve">
<tspan x="302.28943" y="102.84766" id="t_word_1">MLADÍ</tspan>
<tspan x="302.28943" y="152.84766" id="t_word_2">EVROPANÉ</tspan>
<tspan x="302.28943" y="202.84766" id="t_word_3">JEF CZ</tspan>
</text>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
src/assets/thinktank-europa-logo.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.1 KiB

1
src/styles/layout.scss
View file

@ -8,5 +8,6 @@ $font-size-xlarge: 275%;
$small-gap: 20px;
$base-gap: 30px;
$border-radius: 100px;
$border-radius-medium: 20px;
$app-width: 930px;