gaiety/gaiety-life
1
0
Fork 0
Code Activity

Post cover image max-height and blur

Browse source
This commit is contained in:
Joe Wroten 2019-06-22 15:57:11 -05:00
parent 0b1fccce9c
commit 02c4c30946
1 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/PostCard.vue
View file

@ -2,6 +2,7 @@
<div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}"> <div class="post-card content-box" :class="{'post-card--has-poster' : post.poster}">
<div class="post-card__header"> <div class="post-card__header">
<g-image alt="Cover image" v-if="post.coverImage" class="post-card__image" :src="post.coverImage" /> <g-image alt="Cover image" v-if="post.coverImage" class="post-card__image" :src="post.coverImage" />
<g-image alt="" v-if="post.coverImage" class="post-card__image__bgblur" :src="post.coverImage" />
</div> </div>
<div class="post-card__content"> <div class="post-card__content">
<h2 class="post-card__title" v-html="post.title" /> <h2 class="post-card__title" v-html="post.title" />
@ -40,6 +41,7 @@ export default {
margin-top: calc(var(--space) * -1); margin-top: calc(var(--space) * -1);
overflow: hidden; overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0; border-radius: var(--radius) var(--radius) 0 0;
position: relative;
&:empty { &:empty {
display: none; display: none;
@ -47,7 +49,22 @@ export default {
} }
&__image { &__image {
min-width: 100%; max-height: 75vh;
margin: 0 auto;
display: block !important;
position: relative;
z-index: 2;
}
&__image__bgblur {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
transform: scale(1.5);
filter: blur(30px);
} }
&__title { &__title {
@ -76,4 +93,4 @@ export default {
z-index: 0; z-index: 0;
} }
} }
</style> </style>