forked from potsda.mn/mobilizon
Show cards on event card
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
690620cdff
commit
445619db8b
|
@ -76,6 +76,7 @@ export default class App extends Vue {
|
|||
@import "~bulma/sass/elements/title.sass";
|
||||
@import "~bulma/sass/elements/image.sass";
|
||||
@import "~bulma/sass/elements/box.sass";
|
||||
@import "~bulma/sass/elements/tag.sass";
|
||||
@import "~bulma/sass/components/navbar.sass";
|
||||
@import "~bulma/sass/components/modal.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/form";
|
||||
@import "~buefy/src/scss/components/dropdown";
|
||||
@import "~buefy/src/scss/components/tag";
|
||||
|
||||
.router-enter-active,
|
||||
.router-leave-active {
|
||||
|
|
|
@ -2,6 +2,9 @@
|
|||
<router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
|
||||
<div class="card-image" v-if="!event.image">
|
||||
<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">
|
||||
</figure>
|
||||
</div>
|
||||
|
@ -80,7 +83,7 @@ export default class EventCard extends Vue {
|
|||
return { ...this.defaultOptions, ...this.options };
|
||||
}
|
||||
|
||||
get actorDisplayName() {
|
||||
get actorDisplayName(): string {
|
||||
const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
|
||||
return actor.displayName();
|
||||
}
|
||||
|
@ -95,6 +98,28 @@ export default class EventCard extends Vue {
|
|||
border: none;
|
||||
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 {
|
||||
background: $secondary;
|
||||
}
|
||||
|
|
|
@ -111,7 +111,11 @@ export const FETCH_EVENTS = gql`
|
|||
category,
|
||||
participants {
|
||||
${participantQuery}
|
||||
}
|
||||
},
|
||||
tags {
|
||||
slug,
|
||||
title
|
||||
},
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { Actor, IActor } from './actor.model';
|
||||
import { IAddress } from '@/types/address.model';
|
||||
import { ITag } from '@/types/tag.model';
|
||||
|
||||
export enum EventStatus {
|
||||
TENTATIVE,
|
||||
|
|
4
js/src/types/tag.model.ts
Normal file
4
js/src/types/tag.model.ts
Normal file
|
@ -0,0 +1,4 @@
|
|||
export interface ITag {
|
||||
slug: string;
|
||||
title: string;
|
||||
}
|
|
@ -1,5 +1,14 @@
|
|||
@import "~bulma/sass/utilities/_all";
|
||||
|
||||
$primary: #424056;
|
||||
$primary-invert: findColorInvert($primary);
|
||||
$secondary: #FAB12D;
|
||||
$secondary-invert: findColorInvert($secondary);
|
||||
|
||||
$colors: (
|
||||
"primary": ($primary, $primary-invert),
|
||||
"secondary": ($secondary, $secondary-invert),
|
||||
);
|
||||
|
||||
// Navbar
|
||||
$navbar-background-color: $secondary;
|
||||
|
|
Loading…
Reference in a new issue