Show cards on event card

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-04-24 20:49:52 +02:00
parent 690620cdff
commit 445619db8b
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
6 changed files with 47 additions and 2 deletions

View File

@ -76,6 +76,7 @@ export default class App extends Vue {
@import "~bulma/sass/elements/title.sass"; @import "~bulma/sass/elements/title.sass";
@import "~bulma/sass/elements/image.sass"; @import "~bulma/sass/elements/image.sass";
@import "~bulma/sass/elements/box.sass"; @import "~bulma/sass/elements/box.sass";
@import "~bulma/sass/elements/tag.sass";
@import "~bulma/sass/components/navbar.sass"; @import "~bulma/sass/components/navbar.sass";
@import "~bulma/sass/components/modal.sass"; @import "~bulma/sass/components/modal.sass";
@import "~bulma/sass/grid/_all.sass"; @import "~bulma/sass/grid/_all.sass";
@ -86,6 +87,7 @@ export default class App extends Vue {
@import "~buefy/src/scss/components/modal"; @import "~buefy/src/scss/components/modal";
@import "~buefy/src/scss/components/form"; @import "~buefy/src/scss/components/form";
@import "~buefy/src/scss/components/dropdown"; @import "~buefy/src/scss/components/dropdown";
@import "~buefy/src/scss/components/tag";
.router-enter-active, .router-enter-active,
.router-leave-active { .router-leave-active {

View File

@ -2,6 +2,9 @@
<router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }"> <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
<div class="card-image" v-if="!event.image"> <div class="card-image" v-if="!event.image">
<figure class="image is-16by9"> <figure class="image is-16by9">
<div class="tag-container">
<b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag>
</div>
<img src="https://picsum.photos/g/400/225/?random"> <img src="https://picsum.photos/g/400/225/?random">
</figure> </figure>
</div> </div>
@ -80,7 +83,7 @@ export default class EventCard extends Vue {
return { ...this.defaultOptions, ...this.options }; return { ...this.defaultOptions, ...this.options };
} }
get actorDisplayName() { get actorDisplayName(): string {
const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor); const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
return actor.displayName(); return actor.displayName();
} }
@ -95,6 +98,28 @@ export default class EventCard extends Vue {
border: none; border: none;
background: $secondary; background: $secondary;
div.tag-container {
position: absolute;
top: 10px;
right: 0;
margin-right: -5px;
z-index: 10;
max-width: 40%;
span.tag {
margin: 5px auto;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
/*word-break: break-all;*/
text-overflow: ellipsis;
overflow: hidden;
display: block;
/*text-align: right;*/
font-size: 1em;
/*padding: 0 1px;*/
line-height: 1.75em;
}
}
div.card-image { div.card-image {
background: $secondary; background: $secondary;
} }

View File

@ -111,7 +111,11 @@ export const FETCH_EVENTS = gql`
category, category,
participants { participants {
${participantQuery} ${participantQuery}
} },
tags {
slug,
title
},
} }
} }
`; `;

View File

@ -1,5 +1,6 @@
import { Actor, IActor } from './actor.model'; import { Actor, IActor } from './actor.model';
import { IAddress } from '@/types/address.model'; import { IAddress } from '@/types/address.model';
import { ITag } from '@/types/tag.model';
export enum EventStatus { export enum EventStatus {
TENTATIVE, TENTATIVE,

View File

@ -0,0 +1,4 @@
export interface ITag {
slug: string;
title: string;
}

View File

@ -1,5 +1,14 @@
@import "~bulma/sass/utilities/_all";
$primary: #424056; $primary: #424056;
$primary-invert: findColorInvert($primary);
$secondary: #FAB12D; $secondary: #FAB12D;
$secondary-invert: findColorInvert($secondary);
$colors: (
"primary": ($primary, $primary-invert),
"secondary": ($secondary, $secondary-invert),
);
// Navbar // Navbar
$navbar-background-color: $secondary; $navbar-background-color: $secondary;