Merge branch 'front/show-tags-on-event-card' into 'master'

Front/show tags on event card

Closes #114

See merge request framasoft/mobilizon!124
This commit is contained in:
Thomas Citharel 2019-04-24 21:00:18 +02:00
commit 7cd4df0ce9
12 changed files with 118 additions and 10 deletions

View file

@ -60,6 +60,7 @@
"tslint": "^5.16.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.4.3",
"vue-svg-inline-loader": "^1.2.15",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.30.0",
"webpack-bundle-analyzer": "^3.3.2"

View file

@ -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 {

View file

@ -1 +1,33 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78"><title>Fichier 1</title><g id="e11b986d-bcba-4466-9834-a5e44ebfe12a" data-name="Calque 2"><g id="ab18705c-9f78-4d57-8f04-bd2f1ccdd04c" data-name="header"><path d="M0,46.07,3.18,5.27a29.88,29.88,0,0,1,5.07-.36,27.74,27.74,0,0,1,4.95.36l4.86,17.16A92.19,92.19,0,0,1,20.4,32.51h.36A92.19,92.19,0,0,1,23.1,22.43L28,5.27a29.23,29.23,0,0,1,5-.36,29.23,29.23,0,0,1,5,.36l3.18,40.8a13.61,13.61,0,0,1-3.63.42,23.41,23.41,0,0,1-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84H31.8L24.48,40a25.62,25.62,0,0,1-4,.3,23.36,23.36,0,0,1-3.84-.3L9.36,13.49H9q-.3,8.94-.48,12.84L7.26,46.25a22.47,22.47,0,0,1-3.6.24A13.75,13.75,0,0,1,0,46.07Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M74,31.31q0,8-4.26,12.3a12.21,12.21,0,0,1-9,3.42,12.21,12.21,0,0,1-9-3.42q-4.26-4.26-4.26-12.3T51.72,19a12.21,12.21,0,0,1,9-3.42,12.21,12.21,0,0,1,9,3.42Q74,23.27,74,31.31ZM60.75,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T60.75,21.23Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M103.2,20q2.7,4.11,2.7,11.28T102,42.56a13.18,13.18,0,0,1-10,4.11,31.41,31.41,0,0,1-11.34-2V2.45L81.06,2h2.76A4,4,0,0,1,87,3.08a5.38,5.38,0,0,1,.93,3.57V18.59a12.08,12.08,0,0,1,7.56-2.7A8.71,8.71,0,0,1,103.2,20ZM93.48,22a7.28,7.28,0,0,0-5.58,2.82v16a15,15,0,0,0,4.08.54,5.25,5.25,0,0,0,4.68-2.67q1.68-2.67,1.68-7.59Q98.34,22.07,93.48,22Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M121,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4,1.62A6.27,6.27,0,0,1,121,22.25Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M119.82,1.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,112.26,7a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,119.82,1.09Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M139.08,40.67h2a10.23,10.23,0,0,1,.6,3.18,9.24,9.24,0,0,1-.18,2.1,38.47,38.47,0,0,1-5.64.54q-6.48,0-6.48-7v-37l.36-.42h2.88a3.94,3.94,0,0,1,3.12,1.05,5.52,5.52,0,0,1,.9,3.57V38Q136.62,40.67,139.08,40.67Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M155.94,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4.05,1.62A6.27,6.27,0,0,1,155.94,22.25Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M154.8,3.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,147.24,9a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,154.8,3.09Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M163.08,39.47l8.76-11.82q1.32-1.8,4.8-5.7l-.18-.3a63.09,63.09,0,0,1-7.74.42H163a9.79,9.79,0,0,1-.24-2.34,15.8,15.8,0,0,1,.42-3.3h20.4a16.31,16.31,0,0,1,1,4.26,4.1,4.1,0,0,1-.78,2.34L175,34.91a64.65,64.65,0,0,1-4.56,5.7l.18.24q3.12-.3,5.22-.3h2.58a15.35,15.35,0,0,0,6.12-.9,9.4,9.4,0,0,1,.72,3.12q0,3.42-4.32,3.42h-18a14.27,14.27,0,0,1-.9-3.93A5.08,5.08,0,0,1,163.08,39.47Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M215.88,31.31q0,8-4.26,12.3a13.63,13.63,0,0,1-18.06,0q-4.26-4.26-4.26-12.3T193.56,19a13.63,13.63,0,0,1,18.06,0Q215.88,23.27,215.88,31.31ZM202.59,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T202.59,21.23Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M247,26.09V39.41a11,11,0,0,0,1.2,5.64,7,7,0,0,1-4.41,1.56q-2.43,0-3.33-1.14a5.69,5.69,0,0,1-.9-3.54V27.65a7.74,7.74,0,0,0-.72-3.87,2.78,2.78,0,0,0-2.58-1.17,8.62,8.62,0,0,0-6.3,3V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V16.49l.42-.36h2.76q3.42,0,4.08,3.6,4.38-3.84,8.73-3.84t6.42,2.82A12.17,12.17,0,0,1,247,26.09Z" transform="translate(0 -0.25)" style="fill:#3f3d56"/><path d="M57.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,57.26,11Z" transform="translate(0 -0.25)" style="fill:#fff"/><path d="M198.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,198.26,11Z" transform="translate(0 -0.25)" style="fill:#fff"/></g></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
<title>Fichier 1</title>
<g id="e11b986d-bcba-4466-9834-a5e44ebfe12a" data-name="Calque 2">
<g id="ab18705c-9f78-4d57-8f04-bd2f1ccdd04c" data-name="header">
<path d="M0,46.07,3.18,5.27a29.88,29.88,0,0,1,5.07-.36,27.74,27.74,0,0,1,4.95.36l4.86,17.16A92.19,92.19,0,0,1,20.4,32.51h.36A92.19,92.19,0,0,1,23.1,22.43L28,5.27a29.23,29.23,0,0,1,5-.36,29.23,29.23,0,0,1,5,.36l3.18,40.8a13.61,13.61,0,0,1-3.63.42,23.41,23.41,0,0,1-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84H31.8L24.48,40a25.62,25.62,0,0,1-4,.3,23.36,23.36,0,0,1-3.84-.3L9.36,13.49H9q-.3,8.94-.48,12.84L7.26,46.25a22.47,22.47,0,0,1-3.6.24A13.75,13.75,0,0,1,0,46.07Z"
transform="translate(0 -0.25)"/>
<path d="M74,31.31q0,8-4.26,12.3a12.21,12.21,0,0,1-9,3.42,12.21,12.21,0,0,1-9-3.42q-4.26-4.26-4.26-12.3T51.72,19a12.21,12.21,0,0,1,9-3.42,12.21,12.21,0,0,1,9,3.42Q74,23.27,74,31.31ZM60.75,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T60.75,21.23Z"
transform="translate(0 -0.25)"/>
<path d="M103.2,20q2.7,4.11,2.7,11.28T102,42.56a13.18,13.18,0,0,1-10,4.11,31.41,31.41,0,0,1-11.34-2V2.45L81.06,2h2.76A4,4,0,0,1,87,3.08a5.38,5.38,0,0,1,.93,3.57V18.59a12.08,12.08,0,0,1,7.56-2.7A8.71,8.71,0,0,1,103.2,20ZM93.48,22a7.28,7.28,0,0,0-5.58,2.82v16a15,15,0,0,0,4.08.54,5.25,5.25,0,0,0,4.68-2.67q1.68-2.67,1.68-7.59Q98.34,22.07,93.48,22Z"
transform="translate(0 -0.25)"/>
<path d="M121,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4,1.62A6.27,6.27,0,0,1,121,22.25Z"
transform="translate(0 -0.25)"/>
<path d="M119.82,1.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,112.26,7a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,119.82,1.09Z"
transform="translate(0 -0.25)" fill="#fff"/>
<path d="M139.08,40.67h2a10.23,10.23,0,0,1,.6,3.18,9.24,9.24,0,0,1-.18,2.1,38.47,38.47,0,0,1-5.64.54q-6.48,0-6.48-7v-37l.36-.42h2.88a3.94,3.94,0,0,1,3.12,1.05,5.52,5.52,0,0,1,.9,3.57V38Q136.62,40.67,139.08,40.67Z"
transform="translate(0 -0.25)"/>
<path d="M155.94,22.25V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V25q0-3.24-2.7-3.24h-.72a9.32,9.32,0,0,1-.3-2.58,10.7,10.7,0,0,1,.3-2.7,39.63,39.63,0,0,1,4.38-.24h1a5.19,5.19,0,0,1,4.05,1.62A6.27,6.27,0,0,1,155.94,22.25Z"
transform="translate(0 -0.25)"/>
<path d="M154.8,3.09a7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,147.24,9a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84A7.05,7.05,0,0,1,154.8,3.09Z"
transform="translate(0 -0.25)" fill="#fff"/>
<path d="M163.08,39.47l8.76-11.82q1.32-1.8,4.8-5.7l-.18-.3a63.09,63.09,0,0,1-7.74.42H163a9.79,9.79,0,0,1-.24-2.34,15.8,15.8,0,0,1,.42-3.3h20.4a16.31,16.31,0,0,1,1,4.26,4.1,4.1,0,0,1-.78,2.34L175,34.91a64.65,64.65,0,0,1-4.56,5.7l.18.24q3.12-.3,5.22-.3h2.58a15.35,15.35,0,0,0,6.12-.9,9.4,9.4,0,0,1,.72,3.12q0,3.42-4.32,3.42h-18a14.27,14.27,0,0,1-.9-3.93A5.08,5.08,0,0,1,163.08,39.47Z"
transform="translate(0 -0.25)"/>
<path d="M215.88,31.31q0,8-4.26,12.3a13.63,13.63,0,0,1-18.06,0q-4.26-4.26-4.26-12.3T193.56,19a13.63,13.63,0,0,1,18.06,0Q215.88,23.27,215.88,31.31ZM202.59,21.23q-5.67,0-5.67,10.08t5.67,10.08q5.67,0,5.67-10.08T202.59,21.23Z"
transform="translate(0 -0.25)"/>
<path d="M247,26.09V39.41a11,11,0,0,0,1.2,5.64,7,7,0,0,1-4.41,1.56q-2.43,0-3.33-1.14a5.69,5.69,0,0,1-.9-3.54V27.65a7.74,7.74,0,0,0-.72-3.87,2.78,2.78,0,0,0-2.58-1.17,8.62,8.62,0,0,0-6.3,3V46.19a20.85,20.85,0,0,1-3.66.3,23,23,0,0,1-3.78-.3V16.49l.42-.36h2.76q3.42,0,4.08,3.6,4.38-3.84,8.73-3.84t6.42,2.82A12.17,12.17,0,0,1,247,26.09Z"
transform="translate(0 -0.25)"/>
<path d="M57.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,57.26,11Z"
transform="translate(0 -0.25)" fill="#fff"/>
<path d="M198.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,198.26,11Z"
transform="translate(0 -0.25)" fill="#fff"/>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

View file

@ -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;
}

View file

@ -38,6 +38,7 @@ export default class Footer extends Vue {
align-items: center;
.logo {
fill: $secondary;
flex: 1;
}

View file

@ -1,5 +1,5 @@
<template>
<img src="../assets/mobilizon_logo.svg" alt="Mobilizon">
<img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}">
</template>
<script lang="ts">
@ -13,8 +13,12 @@ export default class Logo extends Vue {
<style lang="scss" scoped>
@import "../variables.scss";
img {
color: #403e56;
height: 80px;
svg {
fill: $primary;
height: 60px;
&.invert {
fill: $secondary;
}
}
</style>

View file

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

View file

@ -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,

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-invert: findColorInvert($primary);
$secondary: #FAB12D;
$secondary-invert: findColorInvert($secondary);
$colors: (
"primary": ($primary, $primary-invert),
"secondary": ($secondary, $secondary-invert),
);
// Navbar
$navbar-background-color: $secondary;

View file

@ -33,5 +33,11 @@ module.exports = {
};
return args
});
config.module
.rule("vue")
.use("vue-svg-inline-loader")
.loader("vue-svg-inline-loader")
.options({ /* ... */ });
}
};

View file

@ -570,6 +570,14 @@
"@babel/helper-regex" "^7.4.3"
regexpu-core "^4.5.4"
"@babel/polyfill@^7.2.5":
version "7.4.3"
resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.4.3.tgz#332dc6f57b718017c3a8b37b4eea8aa6eeac1187"
integrity sha512-rkv8WIvJshA5Ev8iNMGgz5WZkRtgtiPexiT7w5qevGTuT7ZBfM3de9ox1y9JR5/OXb/sWGBbWlHNa7vQKqku3Q==
dependencies:
core-js "^2.6.5"
regenerator-runtime "^0.13.2"
"@babel/preset-env@^7.0.0 < 7.4.0":
version "7.3.4"
resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1"
@ -627,7 +635,7 @@
core-js "^2.6.5"
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.0.0":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4":
version "7.4.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
@ -6034,7 +6042,7 @@ loader-utils@^0.2.16:
json5 "^0.5.0"
object-assign "^4.0.1"
loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@ -9467,7 +9475,7 @@ svg-tags@^1.0.0:
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
svgo@^1.0.0:
svgo@^1.0.0, svgo@^1.2.0:
version "1.2.2"
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.2.2.tgz#0253d34eccf2aed4ad4f283e11ee75198f9d7316"
integrity sha512-rAfulcwp2D9jjdGu+0CuqlrAUin6bBWrpoqXWwKDZZZJfXcUXQSxLJOFJCQCSA0x0pP2U0TxSlJu2ROq5Bq6qA==
@ -10257,6 +10265,17 @@ vue-style-loader@^4.1.0:
hash-sum "^1.0.2"
loader-utils "^1.0.2"
vue-svg-inline-loader@^1.2.15:
version "1.2.15"
resolved "https://registry.yarnpkg.com/vue-svg-inline-loader/-/vue-svg-inline-loader-1.2.15.tgz#762b7105354524749dda9e60bba8ce885613744f"
integrity sha512-LnP4zeZN36Hx7UniGgP7bCpKPAWpLWowFmzoGbOlWVAS2ciXtQIGHXvRoZKYxamNP4E8v+fWBguwyAHayd6h0g==
dependencies:
"@babel/polyfill" "^7.2.5"
"@babel/runtime" "^7.3.4"
loader-utils "^1.2.3"
schema-utils "^1.0.0"
svgo "^1.2.0"
vue-template-compiler@^2.5.16, vue-template-compiler@^2.6.10:
version "2.6.10"
resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"