From 445619db8b6c327e6656e35ec24aec25beab2d6b Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Wed, 24 Apr 2019 20:49:52 +0200 Subject: [PATCH 1/2] Show cards on event card Signed-off-by: Thomas Citharel --- js/src/App.vue | 2 ++ js/src/components/Event/EventCard.vue | 27 ++++++++++++++++++++++++++- js/src/graphql/event.ts | 6 +++++- js/src/types/event.model.ts | 1 + js/src/types/tag.model.ts | 4 ++++ js/src/variables.scss | 9 +++++++++ 6 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 js/src/types/tag.model.ts diff --git a/js/src/App.vue b/js/src/App.vue index 69ac8798..5df5c8f2 100644 --- a/js/src/App.vue +++ b/js/src/App.vue @@ -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 { diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue index 55b0906d..1fcd23f7 100644 --- a/js/src/components/Event/EventCard.vue +++ b/js/src/components/Event/EventCard.vue @@ -2,6 +2,9 @@
+
+ {{ tag.title }} +
@@ -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; } diff --git a/js/src/graphql/event.ts b/js/src/graphql/event.ts index 66a1a046..b2a9c77d 100644 --- a/js/src/graphql/event.ts +++ b/js/src/graphql/event.ts @@ -111,7 +111,11 @@ export const FETCH_EVENTS = gql` category, participants { ${participantQuery} - } + }, + tags { + slug, + title + }, } } `; diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts index a243dd67..c5f9cafb 100644 --- a/js/src/types/event.model.ts +++ b/js/src/types/event.model.ts @@ -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, diff --git a/js/src/types/tag.model.ts b/js/src/types/tag.model.ts new file mode 100644 index 00000000..1c4a1d01 --- /dev/null +++ b/js/src/types/tag.model.ts @@ -0,0 +1,4 @@ +export interface ITag { + slug: string; + title: string; +} diff --git a/js/src/variables.scss b/js/src/variables.scss index 8439fd44..cb109f98 100644 --- a/js/src/variables.scss +++ b/js/src/variables.scss @@ -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; From f75d853b197ced0b113d4d8a5a5bd8e2104fbecd Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Wed, 24 Apr 2019 20:50:05 +0200 Subject: [PATCH 2/2] Fix logo on footer by allowing custom fill color Signed-off-by: Thomas Citharel --- js/package.json | 1 + js/src/assets/mobilizon_logo.svg | 34 +++++++++++++++++++++++++++++++- js/src/components/Footer.vue | 1 + js/src/components/Logo.vue | 12 +++++++---- js/vue.config.js | 6 ++++++ js/yarn.lock | 25 ++++++++++++++++++++--- 6 files changed, 71 insertions(+), 8 deletions(-) diff --git a/js/package.json b/js/package.json index 57abe688..85f287c8 100644 --- a/js/package.json +++ b/js/package.json @@ -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" diff --git a/js/src/assets/mobilizon_logo.svg b/js/src/assets/mobilizon_logo.svg index 1130b11f..a60db4c8 100644 --- a/js/src/assets/mobilizon_logo.svg +++ b/js/src/assets/mobilizon_logo.svg @@ -1 +1,33 @@ -Fichier 1 \ No newline at end of file + + Fichier 1 + + + + + + + + + + + + + + + + + + diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue index 195b1a70..4f7cbb00 100644 --- a/js/src/components/Footer.vue +++ b/js/src/components/Footer.vue @@ -38,6 +38,7 @@ export default class Footer extends Vue { align-items: center; .logo { + fill: $secondary; flex: 1; } diff --git a/js/src/components/Logo.vue b/js/src/components/Logo.vue index 0102e10a..17e7d927 100644 --- a/js/src/components/Logo.vue +++ b/js/src/components/Logo.vue @@ -1,5 +1,5 @@