Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

Make event header picture display as background cover 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-10 14:50:44 +02:00
parent a20f2612bc
commit 405331f7cb
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/src/views/Event/Event.vue
View File

@ -3,13 +3,13 @@
<b-loading :active.sync="$apollo.loading"></b-loading>
<transition appear name="fade" mode="out-in">
<div v-if="event">
<div class="header-picture container">
<figure class="image is-3by1" v-if="event.picture">
<div class="header-picture" :style="`background-image: url('${event.picture ? event.picture.url : 'https://picsum.photos/600/200/'}')`">
<!--<figure class="image is-3by1" v-if="event.picture">
<img :src="event.picture.url">
</figure>
<figure class="image is-3by1" v-else>
<img src="https://picsum.photos/600/200/">
</figure>
</figure>-->
</div>
<section>
<div class="title-and-participate-button">
@ -495,6 +495,14 @@ export default class Event extends EventMixin {
opacity: 0;
}
.header-picture {
height: 400px;
background-size: cover;
// background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
div.sidebar {
display: flex;
flex-wrap: wrap;