event picture in list

This commit is contained in:
tykayn 2020-12-01 11:08:46 +01:00 committed by Baptiste Lemoine
parent ba66b7f677
commit c2fecb7b9a
2 changed files with 41 additions and 12 deletions

View File

@ -3,6 +3,7 @@
"version": "1.0.2",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --modern",
"test:unit": "vue-cli-service test:unit",

View File

@ -3,12 +3,38 @@
<div class="columns">
<div class="content column">
<div class="title-wrapper">
<div class="date-component">
<date-calendar-icon :date="participation.event.beginsOn" />
<div class="columns">
<div class="column is-narrow">
<figure
class="image is-16by9"
:style="`background-image: url('${
participation.event.picture
? participation.event.picture.url
: '/img/mobilizon_default_card.png'
}')`"
>
<div class="tag-container" v-if="event.tags">
<router-link
:to="{ name: RouteName.TAG, params: { tag: tag.title } }"
v-for="tag in participation.event.tags.slice(0, 3)"
:key="tag.slug"
>
<b-tag type="is-light">{{ tag.title }}</b-tag>
</router-link>
</div>
</figure>
</div>
<div class="column">
<div class="date-component">
<date-calendar-icon :date="participation.event.beginsOn" />
</div>
<router-link
:to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
>
<h3 class="title">{{ participation.event.title }}</h3>
</router-link>
</div>
</div>
<router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
<h3 class="title">{{ participation.event.title }}</h3>
</router-link>
</div>
<div class="participation-actor has-text-grey">
<span>
@ -121,8 +147,8 @@
})
"
icon-left="pencil"
>{{ $t("Edit") }}</b-button
>
>{{ $t("Edit") }}
</b-button>
</li>
<li v-if="participation.role === ParticipantRole.CREATOR">
<b-button
@ -146,7 +172,7 @@
"
@click="openDeleteEventModalWrapper"
>
<b-button type="is-text" icon-left="delete">{{ $t("Delete") }}</b-button>
<b-button type="is-text" icon-left="delete">{{ $t("Delete") }} </b-button>
</li>
<li
v-if="
@ -164,8 +190,8 @@
})
"
icon-left="account-multiple-plus"
>{{ $t("Manage participations") }}</b-button
>
>{{ $t("Manage participations") }}
</b-button>
</li>
<li>
<b-button
@ -173,8 +199,8 @@
icon-left="view-compact"
type="is-text"
:to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
>{{ $t("View event page") }}</b-button
>
>{{ $t("View event page") }}
</b-button>
</li>
</ul>
</div>
@ -293,6 +319,7 @@ article.box {
line-height: 1.75em;
}
}
div.content {
padding: 5px;
@ -336,6 +363,7 @@ article.box {
.actions {
ul li {
margin: 0 auto;
.is-link {
cursor: pointer;
}