diff --git a/js/package.json b/js/package.json index 57abe688c..85f287c8a 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/App.vue b/js/src/App.vue index 69ac8798e..5df5c8f2b 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/assets/mobilizon_logo.svg b/js/src/assets/mobilizon_logo.svg index 1130b11f0..a60db4c88 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/Event/EventCard.vue b/js/src/components/Event/EventCard.vue index 55b0906d1..1fcd23f72 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/components/Footer.vue b/js/src/components/Footer.vue index 195b1a707..4f7cbb001 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 0102e10a8..17e7d9270 100644 --- a/js/src/components/Logo.vue +++ b/js/src/components/Logo.vue @@ -1,5 +1,5 @@