ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Refactor and update news teasers on start page

This commit is contained in:
Ramon Wenger 2020-06-30 18:05:45 +02:00
parent a2bbb6b26a
commit f4f9b7c1a1
10 changed files with 224 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
client/src/components/NewsTeasers.vue
View File

@ -1,103 +0,0 @@
<template>
<div class="news-teasers">
<div
:key="teaser.id"
class="news-teasers__teaser teaser"
v-for="teaser in newsTeasers">
<a :href="teaser.newsArticleUrl">
<img
:src="teaser.imageUrl"
class="teaser__image">
<p class="teaser__image-source">
<a
:href="teaser.imageSource"
class="tiny-text">Quelle {{ teaser.imageSource }}</a></p>
<h4 class="teaser__title">{{ teaser.title }}</h4>
<p class="teaser__description">{{ teaser.description }}</p>
<p class="teaser__date">{{ teaser.displayDate }}</p>
</a>
</div>
</div>
</template>
<script>
import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
export default {
components: {},
data() {
return {
newsTeasers: []
};
},
apollo: {
$client: 'publicClient',
newsTeasers: {
query: NEWS_TEASER_QUERY,
update(data) {
return this.$getRidOfEdges(data).newsTeasers;
}
}
}
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import "@/styles/_mixins.scss";
$news_width: 550px;
$image_height: 254px;
.teasers {
display: block;
@include desktop {
@supports (display: grid) {
display: grid;
display: -ms-grid;
}
grid-template-columns: repeat(auto-fit, minmax(320px, $news_width));
grid-gap: 40px;
grid-auto-rows: minmax(400px, auto);
grid-template-rows: auto auto;
-ms-grid-columns: $news_width $news_width;
}
}
.teaser {
margin-bottom: $large-spacing;
position: relative;
&__image {
display: block;
max-width: 100%;
height: auto;
@include desktop {
max-width: $news_width;
}
}
&__image-source {
line-height: 25px;
}
&__description {
margin-bottom: $large-spacing;
}
&__date {
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-silver-dark;
position: absolute;
bottom: 0;
left: 0;
}
}
</style>

67
client/src/components/news/NewsTeaser.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<div class="news-teaser">
<a :href="teaser.newsArticleUrl">
<img
:src="teaser.imageUrl"
class="news-news-teaser__image">
<p class="news-teaser__image-source">
<a
:href="teaser.imageSource"
class="tiny-text">Quelle {{ teaser.imageSource }}</a></p>
<h4 class="news-teaser__title">{{ teaser.title }}</h4>
<p class="news-teaser__description">{{ teaser.description }}</p>
<p class="news-teaser__date">{{ teaser.displayDate }}</p>
</a>
</div>
</template>
<script>
export default {
props: {
teaser: {
type: Object,
default: () => {
return {}
}
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import "@/styles/_mixins.scss";
.news-teaser {
position: relative;
padding-bottom: $large-spacing;
&__image {
display: block;
max-width: 100%;
height: auto;
@include desktop {
max-width: $news_width;
}
}
&__image-source {
line-height: 25px;
}
&__description {
margin-bottom: $large-spacing;
}
&__date {
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-silver-dark;
position: absolute;
bottom: 0;
left: 0;
}
}
</style>

0
client/src/components/NewsTeaser.vue → client/src/components/news/NewsTeaserOld.vue
View File

48
client/src/components/news/NewsTeasers.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="news-teasers">
<news-teaser
:key="teaser.id"
:teaser="teaser"
class="news-teasers__teaser teaser"
v-for="teaser in newsTeasers"/>
</div>
</template>
<script>
import NewsTeaser from '@/components/news/NewsTeaser';
import news from '@/mixins/news'
export default {
mixins: [news],
components: {
NewsTeaser
},
};
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
@import "@/styles/_mixins.scss";
$image_height: 254px;
.news-teasers {
display: -ms-grid;
@supports (display: grid) {
display: grid;
}
margin-bottom: $large-spacing;
grid-gap: 40px;
@include desktop {
grid-column-gap: 40px;
grid-template-columns: repeat(auto-fit, minmax(320px, $news_width));
grid-auto-rows: minmax(400px, auto);
grid-template-rows: auto auto;
-ms-grid-columns: $news_width $news_width;
}
}
</style>

18
client/src/mixins/news.js Normal file
View File

@ -0,0 +1,18 @@
import NEWS_TEASER_QUERY from '@/graphql/gql/newsTeasersQuery.gql';
export default {
data() {
return {
newsTeasers: []
};
},
apollo: {
newsTeasers: {
query: NEWS_TEASER_QUERY,
update(data) {
return this.$getRidOfEdges(data).newsTeasers;
},
client: 'publicClient',
}
}
}

4
client/src/pages/news.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="news">
<h1 class="news__heading">News</h1>
<NewsTeasers />
<news-teasers />
</div>
</template>
<script>
import NewsTeasers from '@/components/NewsTeasers';
import NewsTeasers from '@/components/news/NewsTeasers';
export default {
components: {NewsTeasers},

2
client/src/pages/start-old.vue
View File

@ -56,7 +56,7 @@
</template>
<script>
import SectionBlock from '@/components/SectionBlock.vue';
import NewsTeaser from '@/components/NewsTeaser.vue';
import NewsTeaser from '@/components/news/NewsTeaserOld.vue';
import HeaderBar from '@/components/HeaderBar';
import ContentsIllustration from '@/components/illustrations/ContentsIllustration';

139
client/src/pages/start.vue
View File

@ -1,40 +1,49 @@
<template>
<div class="start-page">
<header-bar class="start-page__header"/>
<div class="start-page__content">
<div
class="start-page__modules start-sections"
data-cy="start-modules-list">
<h2 class="start-page__heading">Letzte Module</h2>
<div class="start-page__modules-list">
<module-teaser
:key="index"
:meta-title="module.metaTitle"
:title="module.title"
:hero-image="module.heroImage"
:slug="module.slug"
data-cy="start-module-teaser"
v-for="(module, index) in me.recentModules"/>
<div
class="start-page__modules start-sections"
data-cy="start-modules-list">
<module-teaser
:key="index"
:meta-title="module.metaTitle"
:title="module.title"
:hero-image="module.heroImage"
:slug="module.slug"
data-cy="start-module-teaser"
v-for="(module, index) in me.recentModules"/>
</div>
<div class="start-page__news news">
<h2 class="news__title">News</h2>
<news-teaser
date="27. Mai 2020"
title="Lockdown"
url="https://myskillbox-abu-news.webflow.io/lockdown"/>
<news-teaser
date="11. März 2020"
title="Brexit"
url="https://myskillbox-abu-news.webflow.io/brexit"/>
<news-teaser
date="20. Dezember 2019"
title="Blockchain"
url="https://myskillbox-abu-news.webflow.io/blockchain"/>
<div class="news__more">Mehr...</div>
</div>
<router-link
:to="topicRoute"
tag="div"
class="button">Alle Module anzeigen
</router-link>
</div>
<div class="start-page__news news">
<h2 class="start-page__heading">News</h2>
<div class="news__list">
<news-teaser
:teaser="teaser"
:key="teaser.id"
v-for="teaser in teasers"/>
</div>
<router-link
:to="{name: 'news'}"
class="button">Alle News anzeigen
</router-link>
</div>
</div>
</div>
</template>
<script>
import SectionBlock from '@/components/SectionBlock.vue';
import NewsTeaser from '@/components/NewsTeaser.vue';
import NewsTeaser from '@/components/news/NewsTeaser.vue';
import NewsTeasers from '@/components/news/NewsTeasers.vue';
import HeaderBar from '@/components/HeaderBar';
import ModuleTeaser from '@/components/modules/ModuleTeaser';
@ -44,16 +53,19 @@
import MobileHeader from '@/components/MobileHeader';
import meMixin from '@/mixins/me';
import meQuery from '@/mixins/me';
import news from '@/mixins/news';
export default {
mixins: [meMixin],
mixins: [meQuery, news],
components: {
MobileHeader,
HeaderBar,
SectionBlock,
NewsTeaser,
NewsTeasers,
ContentsIllustration,
PortfolioIllustration,
RoomsIllustration,
@ -72,6 +84,9 @@
return 'Aktuelles Modul anzeigen';
}
return 'Alle Inhalte anzeigen'
},
teasers() {
return this.newsTeasers.slice(0, 2);
}
},
@ -96,10 +111,6 @@
width: 100vw;
box-sizing: border-box;
&__header {
}
&__title {
color: $color-brand;
text-align: center;
@ -121,25 +132,45 @@
1px 1px 0 $color-brand;*/
}
&__heading {
width: 100%;
@include meta-title;
}
&__content {
padding-top: 2*$large-spacing;
box-sizing: border-box;
max-width: 100%;
@include desktop {
max-width: 1200px;
margin: 0 auto;
}
}
&__modules {
margin: 0 30px;
margin-bottom: $large-spacing;
}
&__modules-list {
/*margin: 0 30px;*/
display: -ms-grid;
-ms-grid-column-align: center;
-ms-grid-columns: 1fr 1fr 1fr;
margin-bottom: 90px;
width: 100%;
margin-bottom: $large-spacing;
@supports (display: grid) {
display: grid;
}
@include desktop {
padding-left: 120px;
padding-right: 120px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: max-content;
}
grid-row-gap: 15px;
grid-column-gap: 50px;
justify-items: start;
align-items: center;
align-items: center;
/*
* For IE10+
@ -162,22 +193,24 @@
}
.news {
background-color: $color-charcoal-dark;
color: $color-white;
padding-top: $large-spacing;
padding-bottom: $large-spacing;
display: flex;
justify-content: space-around;
-ms-grid-columns: 1fr 1fr 1fr;
@supports (display: grid) {
display: grid;
grid-template-columns: 1fr;
}
grid-row-gap: $large-spacing;
& &__list {
display: flex;
@include desktop {
grid-template-columns: repeat(5, 1fr);
grid-row-gap: $large-spacing;
grid-column-gap: $large-spacing;
margin-bottom: $large-spacing;
@supports (display: grid) {
display: grid;
grid-template-columns: 1fr;
}
@include desktop {
grid-template-columns: repeat(2, 1fr);
}
}
/*

2
client/src/router/index.js
View File

@ -47,7 +47,7 @@ const routes = [
path: '/',
name: 'home',
component: start,
meta: {layout: 'blank'}
// meta: {layout: 'blank'}
},
{
path: '/login',

1
client/src/styles/_variables.scss
View File

@ -77,3 +77,4 @@ $default-heading-line-height: 1.2;
$popover-default-bottom: -110px;
$footer-width: 800px;
$news_width: 550px;