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

Make event header picture display as background cover

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-10-10 14:50:44 +02:00
parent 117b517f6e
commit 78ed388442
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> <b-loading :active.sync="$apollo.loading"></b-loading>
<transition appear name="fade" mode="out-in"> <transition appear name="fade" mode="out-in">
<div v-if="event"> <div v-if="event">
<div class="header-picture container"> <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"> <!--<figure class="image is-3by1" v-if="event.picture">
<img :src="event.picture.url"> <img :src="event.picture.url">
</figure> </figure>
<figure class="image is-3by1" v-else> <figure class="image is-3by1" v-else>
<img src="https://picsum.photos/600/200/"> <img src="https://picsum.photos/600/200/">
</figure> </figure>-->
</div> </div>
<section> <section>
<div class="title-and-participate-button"> <div class="title-and-participate-button">
@ -495,6 +495,14 @@ export default class Event extends EventMixin {
opacity: 0; opacity: 0;
} }
.header-picture {
height: 400px;
background-size: cover;
// background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
}
div.sidebar { div.sidebar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;