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/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/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 @@
-
\ No newline at end of file
+
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 @@
@@ -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 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 @@
-
+