Various UI stuff (mainly implement mookup)

Fix lint

Disable modern mode

Fixes

UI fixes

Fixes

Ignore .po~ files

Fixes

Fix homepage

Fixes

Fixes

Mix format

Fix tests

Fix tests (yeah…)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
master
Thomas Citharel 4 years ago
parent 2dcd65ea78
commit da2a0593ca
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
  1. 2
      .gitignore
  2. 1
      config/config.exs
  3. 21
      js/fragmentTypes.json
  4. 2
      js/get_union_json.ts
  5. 15025
      js/package-lock.json
  6. 21
      js/package.json
  7. 4
      js/public/index.html
  8. 96
      js/src/App.vue
  9. 134
      js/src/assets/Circle-icons-calendar.svg
  10. BIN
      js/src/assets/footer.png
  11. 748
      js/src/assets/texting.svg
  12. 1
      js/src/assets/undraw_events.svg
  13. 29
      js/src/components/Event/DateCalendarIcon.vue
  14. 133
      js/src/components/Event/EventCard.vue
  15. 36
      js/src/components/Event/EventFullDate.vue
  16. 60
      js/src/components/Footer.vue
  17. 14
      js/src/components/Group/GroupCard.vue
  18. 32
      js/src/components/Logo.vue
  19. 30
      js/src/components/Map.vue
  20. 168
      js/src/components/NavBar.vue
  21. 22
      js/src/components/SearchField.vue
  22. 30
      js/src/graphql/actor.ts
  23. 1
      js/src/graphql/config.ts
  24. 7
      js/src/graphql/event.ts
  25. 2
      js/src/graphql/search.ts
  26. 439
      js/src/i18n/locale/en_US/LC_MESSAGES/app.po
  27. 30
      js/src/i18n/locale/en_US/LC_MESSAGES/app.po~
  28. 446
      js/src/i18n/locale/fr_FR/LC_MESSAGES/app.po
  29. 30
      js/src/i18n/locale/fr_FR/LC_MESSAGES/app.po~
  30. 2
      js/src/i18n/translations.json
  31. 4
      js/src/main.ts
  32. 2
      js/src/router/actor.ts
  33. 2
      js/src/router/guards/register-guard.ts
  34. 21
      js/src/router/index.ts
  35. 17
      js/src/types/actor.model.ts
  36. 1
      js/src/types/config.model.ts
  37. 8
      js/src/types/event.model.ts
  38. 3
      js/src/types/search.model.ts
  39. 15
      js/src/variables.scss
  40. 185
      js/src/views/Account/Profile.vue
  41. 18
      js/src/views/Error.vue
  42. 2
      js/src/views/Event/Create.vue
  43. 587
      js/src/views/Event/Event.vue
  44. 116
      js/src/views/Group/Group.vue
  45. 4
      js/src/views/Group/GroupList.vue
  46. 61
      js/src/views/Home.vue
  47. 65
      js/src/views/PageNotFound.vue
  48. 140
      js/src/views/Search.vue
  49. 32
      js/src/views/User/Login.vue
  50. 15
      js/src/views/User/Register.vue
  51. 4
      js/src/views/User/ResendConfirmation.vue
  52. 4
      js/src/views/User/SendPasswordReset.vue
  53. 13
      js/src/vue-apollo.ts
  54. 11150
      js/yarn.lock
  55. 5
      lib/mobilizon/common-config.ex
  56. 7
      lib/mobilizon_web/resolvers/config.ex
  57. 4
      lib/mobilizon_web/resolvers/group.ex
  58. 15
      lib/mobilizon_web/resolvers/member.ex
  59. 1
      lib/mobilizon_web/router.ex
  60. 6
      lib/mobilizon_web/schema/actors/group.ex
  61. 4
      lib/mobilizon_web/schema/actors/member.ex
  62. 1
      lib/mobilizon_web/schema/config.ex
  63. 3
      lib/service/export/icalendar.ex
  64. 2
      mix.exs
  65. 2
      mix.lock
  66. 16
      test/mobilizon_web/resolvers/member_resolver_test.exs

2
.gitignore vendored

@ -31,3 +31,5 @@ cover/
uploads/*
!uploads/.gitkeep
.idea
*.mo
*.po~

@ -11,6 +11,7 @@ config :mobilizon,
config :mobilizon, :instance,
name: System.get_env("MOBILIZON_INSTANCE_NAME") || "Localhost",
description: System.get_env("MOBILIZON_INSTANCE_DESCRIPTION") || "This is a Mobilizon instance",
version: "1.0.0-dev",
registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN") || false

@ -0,0 +1,21 @@
{"__schema":
{"types":[
{
"possibleTypes":[
{"name":"Person"},
{"name":"Group"}
],
"name":"Actor",
"kind":"INTERFACE"
},
{
"possibleTypes":[
{"name":"Event"},
{"name":"Person"},
{"name":"Group"}
],
"name":"SearchResult",
"kind":"UNION"}
]
}
}

@ -1,7 +1,7 @@
const fetch = require('node-fetch');
const fs = require('fs');
fetch(`http://localhost:4000/graphiql`, {
fetch(`http://localhost:4001`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({

15025
js/package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"scripts": {
"build": "vue-cli-service build --modern",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"analyze-bundle": "npm run build -- --report-json && webpack-bundle-analyzer ../priv/static/report.json",
"dev": "vue-cli-service serve",
@ -23,19 +23,21 @@
"graphql": "^14.2.1",
"graphql-tag": "^2.10.1",
"leaflet": "^1.4.0",
"line-clamp": "0.0.9",
"lodash": "^4.17.11",
"material-design-icons": "^3.0.1",
"ngeohash": "^0.6.3",
"npm-check-updates": "^3.1.3",
"npm-check-updates": "^3.1.7",
"register-service-worker": "^1.6.2",
"typeface-signika": "0.0.72",
"vue": "^2.6.10",
"vue-apollo": "^3.0.0-beta.28",
"vue-class-component": "^7.0.2",
"vue-gettext": "^2.1.2",
"vue-gettext": "^2.1.3",
"vue-property-decorator": "^8.1.0",
"vue-router": "^3.0.2",
"vue-router": "^3.0.3",
"vue-simple-markdown": "^1.0.9",
"vue2-leaflet": "^2.0.2",
"vue2-leaflet": "^2.0.3",
"vuex": "^3.1.0"
},
"devDependencies": {
@ -53,13 +55,16 @@
"@vue/test-utils": "^1.0.0-beta.29",
"chai": "^4.2.0",
"dotenv-webpack": "^1.7.0",
"eslint": "^5.16.0",
"node-sass": "^4.11.0",
"patch-package": "^6.1.0",
"patch-package": "^6.1.1",
"sass-loader": "^7.1.0",
"tslint": "^5.15.0",
"tslint-config-airbnb": "^5.11.1",
"typescript": "^3.4.1",
"typescript": "^3.4.3",
"vue-template-compiler": "^2.6.10",
"webpack-bundle-analyzer": "^3.1.0"
"webpack": "^4.29.6",
"webpack-bundle-analyzer": "^3.3.0"
},
"browserslist": [
"> 1%",

@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="//cdn.materialdesignicons.com/2.5.94/css/materialdesignicons.min.css">
<link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">
<title>mobilizon</title>
<!--server-generated-meta-->
</head>
@ -19,4 +19,4 @@
<!-- built files will be auto injected -->
</body>
</html>
</html>

@ -1,18 +1,10 @@
<template>
<div id="mobilizon">
<NavBar></NavBar>
<main class="container">
<router-view></router-view>
<NavBar />
<main>
<router-view />
</main>
<footer class="footer">
<div class="content has-text-centered">
<span
v-translate="{
date: new Date().getFullYear(),
}"
>© The Mobilizon Contributors %{date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks</span>
</div>
</footer>
<mobilizon-footer />
</div>
</template>
@ -22,6 +14,8 @@ import { Component, Vue } from 'vue-property-decorator';
import { AUTH_TOKEN, AUTH_USER_ACTOR, AUTH_USER_EMAIL, AUTH_USER_ID } from '@/constants';
import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from '@/graphql/user';
import { ICurrentUser } from '@/types/current-user.model';
import Footer from '@/components/Footer.vue';
import Logo from '@/components/Logo.vue';
@Component({
apollo: {
@ -30,63 +24,24 @@ import { ICurrentUser } from '@/types/current-user.model';
},
},
components: {
Logo,
NavBar,
'mobilizon-footer': Footer,
},
})
export default class App extends Vue {
drawer = false;
fab = false;
items = [
{
icon: 'poll',
text: 'Events',
route: 'EventList',
role: null,
},
{
icon: 'group',
text: 'Groups',
route: 'GroupList',
role: null,
},
{ icon: 'settings', text: 'Settings', role: 'ROLE_USER' },
{ icon: 'chat_bubble', text: 'Send feedback', role: 'ROLE_USER' },
{ icon: 'help', text: 'Help', role: null },
{ icon: 'phonelink', text: 'App downloads', role: null },
];
error = {
timeout: 3000,
show: false,
text: '',
};
currentUser!: ICurrentUser;
actor = localStorage.getItem(AUTH_USER_ACTOR);
mounted () {
this.initializeCurrentUser();
}
get displayed_name () {
// FIXME: load actor
return 'no implemented';
// return this.actor.display_name === null ? this.actor.username : this.actor.display_name
}
showMenuItem(elem) {
// FIXME: load actor
return false;
// return elem !== null && this.user && this.user.roles !== undefined ? this.user.roles.includes(elem) : true
async mounted () {
await this.initializeCurrentUser();
}
getUser (): ICurrentUser|false {
return this.currentUser.id ? this.currentUser : false;
}
toggleDrawer() {
this.drawer = !this.drawer;
}
private initializeCurrentUser() {
const userId = localStorage.getItem(AUTH_USER_ID);
const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
@ -106,7 +61,32 @@ export default class App extends Vue {
}
</script>
<style>
<style lang="scss">
@import "variables";
// Import Bulma and Buefy styles
@import "~bulma/sass/utilities/_all";
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/button.sass";
@import "~bulma/sass/elements/container.sass";
@import "~bulma/sass/components/card.sass";
@import "~bulma/sass/components/pagination.sass";
@import "~bulma/sass/elements/form.sass";
@import "~bulma/sass/layout/hero.sass";
@import "~bulma/sass/elements/title.sass";
@import "~bulma/sass/elements/image.sass";
@import "~bulma/sass/elements/box.sass";
@import "~bulma/sass/components/navbar.sass";
@import "~bulma/sass/components/modal.sass";
@import "~bulma/sass/grid/_all.sass";
@import "~bulma/sass/layout/section.sass";
@import "~bulma/sass/layout/footer.sass";
@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/datepicker";
@import "~buefy/src/scss/components/modal";
@import "~buefy/src/scss/components/form";
@import "~buefy/src/scss/components/dropdown";
.router-enter-active,
.router-leave-active {
transition-property: opacity;
@ -121,4 +101,8 @@ export default class App extends Vue {
.router-leave-active {
opacity: 0;
}
body {
background: #f6f7f8;
}
</style>

@ -0,0 +1,134 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 64 64"
style="enable-background:new 0 0 64 64;"
xml:space="preserve"
id="svg4965"
sodipodi:docname="Circle-icons-calendar.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14"><metadata
id="metadata4971"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs4969" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1018"
id="namedview4967"
showgrid="false"
inkscape:zoom="10.429825"
inkscape:cx="30.416304"
inkscape:cy="28.788016"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-maximized="1"
inkscape:current-layer="g4961" />
<style
type="text/css"
id="style4919">
.st0{fill:#77B3D4;}
.st1{opacity:0.2;}
.st2{fill:#231F20;}
.st3{fill:#FFFFFF;}
.st4{fill:#C75C5C;}
.st5{fill:#4F5D73;}
.st6{fill:#E0E0D1;}
</style>
<g
id="Layer_1">
<g
id="g4923">
<circle
class="st0"
cx="32"
cy="32"
r="32"
id="circle4921" />
</g>
<g
id="g4961">
<g
class="st1"
id="g4927">
<path
class="st2"
d="M12,25v25c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V25H12z"
id="path4925" />
</g>
<g
id="g4931">
<path
class="st3"
d="M12,23v25c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V23H12z"
id="path4929" />
</g>
<g
class="st1"
id="g4935">
<path
class="st2"
d="M48,14H16c-2.2,0-4,1.8-4,4v7h40v-7C52,15.8,50.2,14,48,14z"
id="path4933" />
</g>
<g
id="g4939">
<path
class="st4"
d="M48,12H16c-2.2,0-4,1.8-4,4v7h40v-7C52,13.8,50.2,12,48,12z"
id="path4937" />
</g>
<g
class="st1"
id="g4947">
<path
class="st2"
d="M20,21c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C22,20.1,21.1,21,20,21L20,21z"
id="path4945" />
</g>
<g
class="st1"
id="g4951">
<path
class="st2"
d="M45,21c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C47,20.1,46.1,21,45,21L45,21z"
id="path4949" />
</g>
<g
id="g4955">
<path
class="st6"
d="M20,19c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C22,18.1,21.1,19,20,19L20,19z"
id="path4953" />
</g>
<g
id="g4959">
<path
class="st6"
d="M45,19c-1.1,0-2-0.9-2-2v-7c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v7C47,18.1,46.1,19,45,19L45,19z"
id="path4957" />
</g>
</g>
</g>
<g
id="Layer_2">
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

@ -0,0 +1,748 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="abd2d575-db47-4a01-ab9c-7ced98725eec"
data-name="Layer 1"
width="1162"
height="716.89"
viewBox="0 0 1162 716.89"
version="1.1"
sodipodi:docname="texting.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<metadata
id="metadata4844">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs4842" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1018"
id="namedview4840"
showgrid="false"
inkscape:zoom="2.2625507"
inkscape:cx="839.50648"
inkscape:cy="437.82829"
inkscape:window-x="0"
inkscape:window-y="34"
inkscape:window-maximized="1"
inkscape:current-layer="abd2d575-db47-4a01-ab9c-7ced98725eec" />
<title
id="title4701">texting</title>
<path
d="M19,808.44H1142S1240.45,681,1124.57,550c-43-48.58-46.27-108.65-33.39-165C1126,232.68,986.65,97.88,835.46,137.44c-2.88.76-5.79,1.53-8.72,2.33-227.89,62.15-414.47-.31-486.28-31.23a206.52,206.52,0,0,0-90.8-16.78c-80.59,3.6-202.72,34.64-89.28,205.62C320.31,538.42,19,808.44,19,808.44Z"
transform="translate(-19 -91.56)"
fill="#6c63ff"
opacity="0.1"
id="path4703" />
<ellipse
cx="270.5"
cy="666.44"
rx="22.5"
ry="29.45"
fill="#3f3d56"
id="ellipse4705" />
<ellipse
cx="270.5"
cy="630.44"
rx="22.5"
ry="29.45"
fill="#3f3d56"
id="ellipse4707" />
<ellipse
cx="270.5"
cy="594.44"
rx="22.5"
ry="29.45"
fill="#3f3d56"
id="ellipse4709" />
<ellipse
cx="270.5"
cy="558.44"
rx="22.5"
ry="29.45"
fill="#3f3d56"
id="ellipse4711" />
<ellipse
cx="270.5"
cy="522.44"
rx="22.5"
ry="29.45"
fill="#3f3d56"
id="ellipse4713" />
<ellipse
cx="270.5"
cy="486.44"
rx="22.5"
ry="29.45"
fill="#3f3d56"
id="ellipse4715" />
<ellipse
cx="270.5"
cy="450.44"
rx="22.5"
ry="29.45"
fill="#3f3d56"
id="ellipse4717" />
<ellipse
cx="457.5"
cy="675.44"
rx="12.5"
ry="16.36"
fill="#3f3d56"
id="ellipse4719" />
<ellipse
cx="457.5"
cy="655.44"
rx="12.5"
ry="16.36"
fill="#3f3d56"
id="ellipse4721" />
<ellipse
cx="457.5"
cy="635.44"
rx="12.5"
ry="16.36"
fill="#3f3d56"
id="ellipse4723" />
<ellipse
cx="457.5"
cy="615.44"
rx="12.5"
ry="16.36"
fill="#3f3d56"
id="ellipse4725" />
<ellipse
cx="457.5"
cy="595.44"
rx="12.5"
ry="16.36"
fill="#3f3d56"
id="ellipse4727" />
<ellipse
cx="457.5"
cy="575.44"
rx="12.5"
ry="16.36"
fill="#3f3d56"
id="ellipse4729" />
<ellipse
cx="457.5"
cy="555.44"
rx="12.5"
ry="16.36"
fill="#3f3d56"
id="ellipse4731" />
<path
d="M373.73,295.64a109.12,109.12,0,0,0,8.38-12.33L323,273.6l63.94.47A108,108,0,0,0,389,188.68l-85.79,44.5L382.31,175a107.78,107.78,0,1,0-178,120.62A107.91,107.91,0,0,0,192,315.3l76.74,39.87L186.93,327.7a107.81,107.81,0,0,0,17.38,101.21,107.77,107.77,0,1,0,169.42,0,107.81,107.81,0,0,0,0-133.27Z"
transform="translate(-19 -91.56)"
fill="#6c63ff"
id="path4733" />
<path
d="M181.24,362.28a107.29,107.29,0,0,0,23.07,66.63,107.77,107.77,0,1,0,169.42,0C388.17,410.57,181.24,350.18,181.24,362.28Z"
transform="translate(-19 -91.56)"
opacity="0.1"
id="path4735" />
<path
d="M420.28,465.61a70.68,70.68,0,0,1-5.58-8.22l39.41-6.48-42.63.32a72,72,0,0,1-1.37-56.93L467.3,424,414.56,385.2a71.85,71.85,0,1,1,118.67,80.41,71.62,71.62,0,0,1,8.19,13.1l-51.16,26.58L544.81,487a71.85,71.85,0,0,1-11.58,67.48,71.85,71.85,0,1,1-113,0,71.89,71.89,0,0,1,0-88.85Z"
transform="translate(-19 -91.56)"
fill="#6c63ff"
id="path4737" />
<path
d="M548.61,510a71.57,71.57,0,0,1-15.38,44.43,71.85,71.85,0,1,1-113,0C410.65,542.23,548.61,502,548.61,510Z"
transform="translate(-19 -91.56)"
opacity="0.1"
id="path4739" />
<path
d="M19,808.44s120.52-117,162.24-77.64,217.87,49.83,234.1,47.51,111.25-6.95,164.56-1.16,542.35-16.22,562.05,31.29Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4741" />
<path
d="M800.08,236h-54.2a9.23,9.23,0,0,0,2-5.8,9.33,9.33,0,0,0-.68-3.47h25a9.27,9.27,0,0,0,0-18.54H622.77a9.3,9.3,0,0,0-9.27,9.27,9.1,9.1,0,0,0,.69,3.47h-25a9.28,9.28,0,0,0,0,18.55h54.2a9.2,9.2,0,0,0-2,5.79,9.3,9.3,0,0,0,9.27,9.27H800.08a9.27,9.27,0,0,0,0-18.54Z"
transform="translate(-19 -91.56)"
fill="#6c63ff"
opacity="0.1"
id="path4743" />
<path
d="M1044.6,369.23H990.4a9.23,9.23,0,0,0,2.05-5.8,9.13,9.13,0,0,0-.68-3.47h25a9.27,9.27,0,0,0,0-18.54H867.3a9.3,9.3,0,0,0-9.27,9.27,9.09,9.09,0,0,0,.68,3.47h-25a9.28,9.28,0,0,0,0,18.55h54.2a9.2,9.2,0,0,0-2,5.79,9.3,9.3,0,0,0,9.27,9.27H1044.6a9.27,9.27,0,1,0,0-18.54Z"
transform="translate(-19 -91.56)"
fill="#6c63ff"
opacity="0.1"
id="path4745" />
<path
d="M555.92,312.84H524.17a5.39,5.39,0,0,0,1.2-3.39,5.53,5.53,0,0,0-.4-2h14.66a5.43,5.43,0,0,0,0-10.86H452a5.45,5.45,0,0,0-5.43,5.43,5.34,5.34,0,0,0,.41,2H432.36a5.43,5.43,0,1,0,0,10.86h31.75a5.39,5.39,0,0,0-1.2,3.39,5.45,5.45,0,0,0,5.43,5.44h87.58a5.44,5.44,0,0,0,0-10.87Z"
transform="translate(-19 -91.56)"
fill="#6c63ff"
opacity="0.1"
id="path4747" />
<path
d="M708.47,755.55a23.78,23.78,0,0,1-1.74,6A43,43,0,0,0,717.34,764a1,1,0,0,0,.68-.1c.27-.21.23-.63.19-1a13.29,13.29,0,0,1,1.1-5.76q3-8.35,5.92-16.72c-3.46-1.57-10.62-.62-13.54,2C709,744.84,709.12,752.17,708.47,755.55Z"
transform="translate(-19 -91.56)"
fill="#a1616a"
id="path4749" />
<path
d="M758.09,764.88a1.92,1.92,0,0,0-.18.74c0,.89,1.18,1.2,2.07,1.28a56.67,56.67,0,0,1,12.62,2.63c.5-1.48-.2-3.07-.22-4.62,0-2.16,1.27-4.08,2.06-6.09,1.41-3.55,1.3-7.49,1.17-11.31-3.42.23-11.58-1.35-13.49,2.19-1.06,2-1,5-1.48,7.2A55.7,55.7,0,0,1,758.09,764.88Z"
transform="translate(-19 -91.56)"
fill="#a1616a"
id="path4751" />
<path
d="M737.75,611.19l-9,.53a2.58,2.58,0,0,0-1.64.48,2.46,2.46,0,0,0-.61,1.57c-1.2,9,.91,18.19-.21,27.19-.45,3.54-1.39,7-2.12,10.48-1.23,5.81-1.9,11.72-2.57,17.62a40.19,40.19,0,0,0-.34,8.83c.26,2.48,1,4.9,1.09,7.39a25.7,25.7,0,0,1-1.52,8.64,94,94,0,0,1-5.6,13.87c-1.93,3.87-4.14,7.64-5.31,11.8-1.86,6.62-1,13.83-3.21,20.34-.55,1.6-1.29,3.25-1,4.91.39,2.15,2.48,3.68,4.63,4.09a16.44,16.44,0,0,0,6.49-.49c3.51-.75,7.24-1.62,9.71-4.22a17.78,17.78,0,0,0,3.24-5.82c1.63-4,3.25-8.06,4.74-12.14a46.12,46.12,0,0,1,2.3-5.65c.82-1.56,1.84-3,2.71-4.56a46.34,46.34,0,0,0,3.48-8.4c6.42-19.7,8.38-41,18.08-59.3.46-.87.52-2,1-2.82a29.14,29.14,0,0,1,1.34,9.21,193.59,193.59,0,0,1-.51,21.27c-.4,5.16-1,10.31-1.12,15.49,0,2.36,0,4.73.05,7.1l0,1.93c.08,3.37.16,6.74.49,10.09,1.41,13.84-2.95,27.3-1.38,41.12a2.39,2.39,0,0,0,.46,1.36c.67.72,1.86.33,2.77-.06a29.76,29.76,0,0,1,9.46-2.36,6.38,6.38,0,0,0,2.87-.64c1.44-.86,1.85-2.73,2.11-4.39q3.27-20.19,6.53-40.38a96.54,96.54,0,0,0,1.24-9.73c.25-4.24-.06-8.5.35-12.72.57-6,3-11.7,4.82-17.4.94-3,1.89-5.95,2.75-8.95s1.65-6.11,2.35-9.19c1.2-5.36,2.14-10.89,1.31-16.32s-3.69-10.79-8.51-13.41c-3.53-1.93-7.67-2.22-11.66-2.66-11.39-1.25-22.74-4-34.15-3C741.68,612.07,739.79,611.07,737.75,611.19Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4753" />
<path
d="M712.51,794.74a12.83,12.83,0,0,0,1.42-3l3.69-10a86.92,86.92,0,0,0,3-9.13,42.77,42.77,0,0,0,1.22-11.32,42.15,42.15,0,0,1-11.11-1.56,17.17,17.17,0,0,0-4.22-.89,7.34,7.34,0,0,0-7.12,7.77,11.19,11.19,0,0,1,.16,1.82,5.69,5.69,0,0,1-.52,1.75l-3.94,9.6a21.07,21.07,0,0,0-2,7.4C692.81,796.16,706.84,802.91,712.51,794.74Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4755" />
<path
d="M750.51,793.87a17.17,17.17,0,0,0,0,4.53c.78,4.23,4.87,7.44,9.16,7.74a13.13,13.13,0,0,0,11.11-5.47,11.8,11.8,0,0,0,1.85-3.55,18.43,18.43,0,0,0,.62-3.77l1.59-16.83c.23-2.36,1.19-5.77,0-8-1-1.89-3.43-2.51-5.3-3.22a20.85,20.85,0,0,0-9.82-1.47c-5.83.49-5.77,6.44-6.65,11.19Q751.35,784.4,750.51,793.87Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4757" />
<path
d="M752.24,452.06c-2.69,3.77-6.61,6.54-9.25,10.35a19.45,19.45,0,0,0-3.41,11.85c.09,2.16.54,4.37,0,6.46A11.49,11.49,0,0,1,737,485a35.94,35.94,0,0,1-16.43,10.92c-.77.24-1.73.76-1.54,1.54a1.59,1.59,0,0,0,.71.81l13,9.31c7.63,5.47,15.3,11,23.74,15.09a84.34,84.34,0,0,0,48.5,7.63,25.29,25.29,0,0,1-3.85-11c-.5-4.7.34-9.44.25-14.17a36.62,36.62,0,0,0-3-14c-1.12-2.57-2.54-5-3.4-7.67a39.68,39.68,0,0,1-1.44-10l-.67-11.19a22.58,22.58,0,0,0-.93-6.13,15.19,15.19,0,0,0-2.38-4.22c-4.76-6.22-12-8.88-19.58-9.53-3.31-.28-7.36-.55-10.41.89C755.92,445.07,754.44,449,752.24,452.06Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4759" />
<path
d="M751,492.42a7.43,7.43,0,0,1-4.69,4.36,22.12,22.12,0,0,1-6.54,1L735,498a2.08,2.08,0,0,0-1.47.44,1.72,1.72,0,0,0-.42,1.07c-.3,2.54,1.18,4.91,2.66,7,4.74,6.64,10.42,12.95,17.83,16.34a29.41,29.41,0,0,0,33.9-6.84,3,3,0,0,0,.94-1.67A2.81,2.81,0,0,0,787,512c-1.58-1.17-3.44-1.93-5-3.09a15,15,0,0,1-5.43-8.21,24.7,24.7,0,0,1-.45-9.95c-5.93-1.69-12.39-.35-18.33-2-1.39-.38-4-1.84-5.46-1S751.46,491,751,492.42Z"
transform="translate(-19 -91.56)"
fill="#a1616a"
id="path4761" />
<path
d="M751,492.42a7.43,7.43,0,0,1-4.69,4.36,22.12,22.12,0,0,1-6.54,1L735,498a2.08,2.08,0,0,0-1.47.44,1.72,1.72,0,0,0-.42,1.07c-.3,2.54,1.18,4.91,2.66,7,4.74,6.64,10.42,12.95,17.83,16.34a29.41,29.41,0,0,0,33.9-6.84,3,3,0,0,0,.94-1.67A2.81,2.81,0,0,0,787,512c-1.58-1.17-3.44-1.93-5-3.09a15,15,0,0,1-5.43-8.21,24.7,24.7,0,0,1-.45-9.95c-5.93-1.69-12.39-.35-18.33-2-1.39-.38-4-1.84-5.46-1S751.46,491,751,492.42Z"
transform="translate(-19 -91.56)"
opacity="0.1"
id="path4763" />
<circle
cx="747.07"
cy="390.79"
r="19.97"
fill="#a1616a"
id="circle4765" />
<path
d="M780.6,502.7a65.52,65.52,0,0,1-11.46,3.72,22.06,22.06,0,0,1-11.9-.65,41.43,41.43,0,0,1-7.37-4.2c-4.14-2.65-8.66-5-13.56-5.48-2.29-.24-4.79,0-6.6,1.42a9,9,0,0,0-2.91,6c-.66,4.76.47,9.56,1.48,14.26,3.83,17.85,6,36.52,1.71,54.28-2.25,9.43.18,19.24.51,28.93a34.62,34.62,0,0,0,1.31,9.85c1.05,3.15,3.17,6.1,6.23,7.39,2.85,1.2,6.08.83,9.16.58,3.67-.29,7.5-.34,10.83,1.2,2.36,1.1,4.57,3,7.15,2.77,1.32-.12,2.52-.8,3.83-1,2.63-.44,5.15,1,7.54,2.18a46.66,46.66,0,0,0,19,4.81c3.37-7.93,1.63-16.85,2-25.46.15-3.22.63-6.42.82-9.64a107.82,107.82,0,0,0-.15-11.65L797,555.81c-.35-7.13,3.29-14.11,3-21.23a64.26,64.26,0,0,0-1.37-9.86c-.22-1.1-.45-2.19-.76-3.26-2.2-7.51-8.53-13-14.58-17.93A2.93,2.93,0,0,0,780.6,502.7Z"
transform="translate(-19 -91.56)"
fill="#6c63ff"
id="path4767" />
<path
d="M747.22,619.63c.08,7-2.44,13.77-4.91,20.34-.76,2-1.69,4.22-3.63,5.15s-4.11.33-6-.41a40.37,40.37,0,0,1-5.13-2.37c-1.74-1-3.7-2.07-5.57-1.43-2.29.78-3,3.63-3.31,6a63.45,63.45,0,0,1-9.35-.57,1.76,1.76,0,0,1-.82-.26,1.73,1.73,0,0,1-.52-1.12c-.32-1.67-.65-3.33-1-5-.1-.52-.48-1.21-1-1,.42-6.48-.93-12.93-1.42-19.4a51.45,51.45,0,0,1,.1-9.85,95.42,95.42,0,0,1,1.88-9.73c1.54-6.86,4.5-13.83,4.67-20.79a23.49,23.49,0,0,0-.27-4.18q-2.12-13.09-4.22-26.2c-.36-2.18-.71-4.38-1.22-6.53-.38-1.6-.74-3.15-1.15-4.69-.25-.94-.52-1.87-.83-2.81q4-11,8-22a40.43,40.43,0,0,1,2.2-5.27,20.62,20.62,0,0,1,8.95-8.73,8.07,8.07,0,0,0,3-2c.39-.51.63-1.13,1-1.66,1.41-2,4.3-2.16,6.71-1.72,2.21.39,4.5,1.23,5.84,3A11.77,11.77,0,0,1,740.5,499q2.4,5.82,4.82,11.63c1.37.66,2,2.45,2,4,0,2.88-.41,5.75-.29,8.63,0,.21,0,.41.06.62.36,2.59,2.19,4.77,2.81,7.37,2.38,9.95-1.09,20.19-3.13,30.25-.08.4-.16.79-.23,1.19a90.88,90.88,0,0,0-1.6,17.73,50.68,50.68,0,0,0,.52,7.38c.33,2.15.86,4.27,1.1,6.44a59.58,59.58,0,0,1,0,9.06C746.28,608.71,747.16,614.16,747.22,619.63Z"
transform="translate(-19 -91.56)"
fill="#454b69"
id="path4769" />
<path
d="M755.46,533.92a8.61,8.61,0,0,1,1.14,4,2.66,2.66,0,0,1-.6,1.66,2.5,2.5,0,0,1-2.29.63,6.29,6.29,0,0,1-2.23-1,5.17,5.17,0,0,1-2.13-2.14,5.57,5.57,0,0,1-.32-1.34l-.53-3.38a4.31,4.31,0,0,1,0-2c.45-1.39,2.47-3.85,4-2.65S754.71,532.32,755.46,533.92Z"
transform="translate(-19 -91.56)"
fill="#454b69"
id="path4771" />
<path
d="M814,539.48c-.59-1.54-2.35-2.19-3.79-3-3-1.67-5.08-4.59-6.66-7.63s-2.76-6.28-4.47-9.24a3.6,3.6,0,0,0-1.14-1.36,1.38,1.38,0,0,0-1.66.1,1.8,1.8,0,0,0-.37.95c-.36,2.21.27,4.44.61,6.65a25.92,25.92,0,0,1-6.34,21c-2.07,2.29-4.64,4.3-5.75,7.18a16.91,16.91,0,0,0-.6,7l.69,12.76a120.6,120.6,0,0,1-4.35,38.49c-2,7.2-5.38,14.47-4,21.81.52,2.81,1.74,5.6,1.24,8.42a2.87,2.87,0,0,0,0,1.64,2.39,2.39,0,0,0,1,.93l6.65,4.34,6-17.77a32.86,32.86,0,0,0,1.33-4.65,35.54,35.54,0,0,0,.39-5.46,230.54,230.54,0,0,1,6.17-47.44,36.41,36.41,0,0,1,2-6.56c1.73-3.89,4.64-7.11,7.51-10.27.07-1.47-.12-2.94,0-4.42a28.29,28.29,0,0,1,1.09-7.62C810.33,542.9,811.67,540.56,814,539.48Z"
transform="translate(-19 -91.56)"
fill="#454b69"
id="path4773" />
<path
d="M803.91,556.08a90.29,90.29,0,0,0,.19,12.63l1,16.74a24.07,24.07,0,0,0,1,6.61c.8,2.28,2.28,4.28,3.05,6.58.26.78.44,1.6.7,2.39.33,1,.78,1.87,1.2,2.8,2.7,6.11,3.44,12.89,3.63,19.56s-.15,13.36.53,20a12.07,12.07,0,0,1-5.31.26,7.43,7.43,0,0,0-2-.27,6.31,6.31,0,0,0-1.68.48,17.31,17.31,0,0,1-14.53-1.3,29,29,0,0,1-3.71-2.72,11.37,11.37,0,0,1-2.54-2.69,10,10,0,0,1-1.15-4.86c-.23-6.79,2-13.39,3.51-20a185.9,185.9,0,0,0,3-19.39c1.11-9.53.81-19.33,3-28.68a7.9,7.9,0,0,1,1.6-3.71,8,8,0,0,1,2.58-1.66C799.93,557.9,801.92,557,803.91,556.08Z"
transform="translate(-19 -91.56)"
fill="#454b69"
id="path4775" />
<path
d="M814,539.48c-.59-1.54-2.35-2.19-3.79-3-3-1.67-5.08-4.59-6.66-7.63s-2.76-6.28-4.47-9.24a3.6,3.6,0,0,0-1.14-1.36,1.38,1.38,0,0,0-1.66.1,1.8,1.8,0,0,0-.37.95c-.36,2.21.27,4.44.61,6.65a25.92,25.92,0,0,1-6.34,21c-2.07,2.29-4.64,4.3-5.75,7.18a16.91,16.91,0,0,0-.6,7l.69,12.76a120.6,120.6,0,0,1-4.35,38.49c-2,7.2-5.38,14.47-4,21.81.52,2.81,1.74,5.6,1.24,8.42a2.87,2.87,0,0,0,0,1.64,2.39,2.39,0,0,0,1,.93l6.65,4.34,6-17.77a32.86,32.86,0,0,0,1.33-4.65,35.54,35.54,0,0,0,.39-5.46,230.54,230.54,0,0,1,6.17-47.44,36.41,36.41,0,0,1,2-6.56c1.73-3.89,4.64-7.11,7.51-10.27.07-1.47-.12-2.94,0-4.42a28.29,28.29,0,0,1,1.09-7.62C810.33,542.9,811.67,540.56,814,539.48Z"
transform="translate(-19 -91.56)"
opacity="0.1"
id="path4777" />
<path
d="M806.59,644.53a3.57,3.57,0,0,1-1.3,1.88c-.67.38-1.76.06-1.82-.71-1.12-.15-2,1.17-3.08,1.26s-2.08-1-3.14-.76c-.68.18-1.32.9-1.94.58-.26-.13-.42-.41-.69-.51-.43-.14-.84.26-1.28.36-.93.21-1.61-.93-1.64-1.88s.25-2-.19-2.82a.6.6,0,0,0-.29-.32c-.3-.14-.63.14-.83.41-.74,1-.95,2.39-1.7,3.43s-2.54,1.53-3.22.45a2.55,2.55,0,0,1-.14-1.81c.45-2.56,1.45-5.31,3.75-6.51,2-1,4.4-.62,6.6-.16q4.59,1,9.17,2.07c.81.19,2.75.29,3.1,1.23S806.91,643.73,806.59,644.53Z"
transform="translate(-19 -91.56)"
fill="#a1616a"
id="path4779" />
<path
d="M770.57,468.25c1,5.39,4.08,10.14,6.55,15.05s4.44,10.49,3.1,15.81a55,55,0,0,1-2,5.39,50.92,50.92,0,0,0-2.06,9.58c-.66,4.42-1.32,8.91-.79,13.35s2.42,8.9,6,11.6l-.28-2a22.23,22.23,0,0,1,4.23,2.91,26.86,26.86,0,0,0,3-8.15l6.79,5.27c3,2.3,6.36,4.72,10.08,4.26l-3-6.91c-.83-1.92-1.66-3.83-2.64-5.68a17.87,17.87,0,0,1-1.62-3.46,15.61,15.61,0,0,1-.44-3.2,223.13,223.13,0,0,0-9.82-52,43.35,43.35,0,0,0-4.73-11A13.78,13.78,0,0,0,779,455c-2.49-1.59-5.55-1.93-8.49-2.23a26.19,26.19,0,0,0-6.19-.14,19,19,0,0,0-6,2.06,32,32,0,0,0-13.84,13.73,27.2,27.2,0,0,0-3.13,13.89c.39,5.1,5.25,2.78,8.53,1.51C758,480.65,765.8,475.73,770.57,468.25Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4781" />
<path
d="M755.46,533.92a8.61,8.61,0,0,1,1.14,4,2.66,2.66,0,0,1-.6,1.66,2.5,2.5,0,0,1-2.29.63,6.29,6.29,0,0,1-2.23-1,5.17,5.17,0,0,1-2.13-2.14,5.57,5.57,0,0,1-.32-1.34l-.53-3.38a4.31,4.31,0,0,1,0-2c.45-1.39,2.47-3.85,4-2.65S754.71,532.32,755.46,533.92Z"
transform="translate(-19 -91.56)"
opacity="0.1"
id="path4783" />
<polygon
points="742.71 407.39 738.96 435.48 755.44 434.48 760.8 407.39 742.71 407.39"
fill="#454b69"
id="polygon4785" />
<circle
cx="750.82"
cy="415.75"
r="1.25"
fill="#fff"
id="circle4787" />
<g
opacity="0.1"
id="g4793">
<path
d="M780.65,495.73c.17-.49.32-1,.45-1.48,1.33-5.33-.64-10.91-3.11-15.82s-5.51-9.65-6.54-15.05c-4.77,7.48-12.55,12.4-20.68,15.56-3.28,1.27-8.15,3.58-8.54-1.51a20.47,20.47,0,0,1,0-3.41,23.69,23.69,0,0,0-.9,8.15c.39,5.1,5.25,2.78,8.53,1.51,8.14-3.15,15.91-8.07,20.68-15.55,1,5.39,4.08,10.14,6.55,15C779.09,487.09,780.74,491.43,780.65,495.73Z"
transform="translate(-19 -91.56)"
id="path4789" />
<path
d="M796,532.2q-3.4-2.62-6.79-5.27a26.78,26.78,0,0,1-3,8.16,22,22,0,0,0-4.23-2.92l.28,2c-3.56-2.7-5.45-7.16-6-11.6s.12-8.93.78-13.35c.07-.48.15-1,.22-1.44-.47,2-.78,4.11-1.09,6.18-.66,4.43-1.32,8.91-.79,13.35s2.42,8.9,6,11.6l-.28-2a22.75,22.75,0,0,1,4.23,2.92,27,27,0,0,0,3-8.15q3.4,2.63,6.79,5.27c3,2.29,6.36,4.72,10.08,4.26l-2.16-5C800.49,535.58,798.13,533.86,796,532.2Z"
transform="translate(-19 -91.56)"
id="path4791" />
</g>
<path
d="M752.67,513.9a23.59,23.59,0,0,1,5.59-5.34,1.68,1.68,0,0,1,1.15-.32c.32.07.59.31.92.37a1.83,1.83,0,0,0,1.08-.26l4.62-2.22a4.9,4.9,0,0,1,2.21-.64,1.62,1.62,0,0,1,1.61,1.39c0,.86-.85,1.44-1.61,1.87a43.21,43.21,0,0,0-6.48,4.52c-1,.89-2.14,2.36-1.36,3.5a3,3,0,0,0,2.54.85,20.39,20.39,0,0,0,5-.38c1.32-.33,2.56-.92,3.89-1.23a19.13,19.13,0,0,1,3.71-.37,3,3,0,0,1,2.09.45c.55.47.5,1.6-.21,1.74,1,1.33.12,3.29-1.19,4.29s-3,1.41-4.37,2.26c1.6-.57,3.49-1.12,4.91-.18a1,1,0,0,1,.45.56c.09.47-.41.83-.85,1-6.56,3.06-14.33,2-21.2,4.27a22.55,22.55,0,0,0-7.88,4.55c1.07-1-5.52-8-4.95-10,.46-1.64,3.77-3.73,5-5Q750.1,516.89,752.67,513.9Z"
transform="translate(-19 -91.56)"
fill="#a1616a"
id="path4795" />
<path
d="M752.42,545.69a5.34,5.34,0,0,0,.35,2.68c.54,2.26-.25,4.63-1.34,6.69a29,29,0,0,1-4.68,6.39,61.7,61.7,0,0,1-7.06,6.26,152,152,0,0,1-15.4,10.62,12.82,12.82,0,0,1-4.45,1.95,13.33,13.33,0,0,1-3.73-.06,21.53,21.53,0,0,1-4.89-1,23.49,23.49,0,0,0-.27-4.18q-2.12-13.09-4.22-26.2c-.36-2.18-.71-4.38-1.22-6.53-.38-1.6-.74-3.15-1.15-4.69,0,0,0-.08,0-.11,1-2.52,3.93-4.12,4.22-6.8,4.23-.4,8.2-.87,12.44-1.26a28,28,0,0,1-.81,11.84,1.55,1.55,0,0,0,1.55-.95c.31-.57.41-1.23.67-1.83,1-2.28,3.93-2.82,6-4.14,3.64-2.26,5.21-7.16,9.13-8.86a1.43,1.43,0,0,1,.92-.16c.86.23,1,1.74,1.93,1.68a1.32,1.32,0,0,0,.74-.42c1.6-1.45,3.6-2.65,5.19-4.09.22.43.43.86.64,1.29q3.34,6.76,6.67,13.53c.87,1.76,1.84,3.63,3.57,4.56C756.55,543.9,753.05,543.66,752.42,545.69Z"
transform="translate(-19 -91.56)"
opacity="0.1"
id="path4797" />
<path
d="M707.37,528.6c-.28,2.69-3.23,4.29-4.22,6.81a12.2,12.2,0,0,0-.49,4.14c-.1,4-1,7.82-1.5,11.73s-.6,8,.84,11.68c.86,2.18,2.24,4.16,2.83,6.43.4,1.52.43,3.16,1.14,4.56,1.55,3,5.5,3.78,8.89,4.15a13.33,13.33,0,0,0,3.73.06,13,13,0,0,0,4.46-1.95,152.94,152.94,0,0,0,15.39-10.62c4.57-3.57,9-7.53,11.74-12.65,1.09-2.06,1.88-4.43,1.35-6.69a5.13,5.13,0,0,1-.35-2.68c.63-2,4.12-1.79,4.88-3.78-1.73-.92-2.7-2.79-3.56-4.55l-7.31-14.83c-1.6,1.45-3.6,2.65-5.19,4.1a1.38,1.38,0,0,1-.75.42c-.89.06-1.07-1.45-1.93-1.68a1.46,1.46,0,0,0-.91.15c-3.93,1.71-5.5,6.61-9.14,8.87-2.12,1.32-5,1.86-6,4.14-.26.59-.36,1.26-.67,1.83a1.55,1.55,0,0,1-1.55,1,27.88,27.88,0,0,0,.81-11.84C715.58,527.74,711.61,528.21,707.37,528.6Z"
transform="translate(-19 -91.56)"
fill="#454b69"
id="path4799" />
<path
d="M806.24,643.86c.27-.1.54-.21.81-.29a3.32,3.32,0,0,0,.9-3.6c-.35-.94-2.29-1-3.1-1.23q-4.58-1.1-9.17-2.06c-2.2-.47-4.61-.88-6.6.15-.74.39-1.35,1.69-1.85,2.35l.77.66c.83.69,1.68,1.37,2.56,2a.63.63,0,0,1,.66-.21.6.6,0,0,1,.29.32,2,2,0,0,1,.21.63A17.26,17.26,0,0,0,806.24,643.86Z"
transform="translate(-19 -91.56)"
fill="#454b69"
id="path4801" />
<path
d="M1157,459.81v85.44c0,2.54-4.76,4.61-10.65,4.61H920.81c-5.89,0-10.66-2.07-10.66-4.61V459.81c0-2.55,4.77-5.14,10.66-5.14h225.55C1152.25,454.67,1157,457.26,1157,459.81Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4803" />
<rect
x="999.49"
y="393.65"
width="117.48"
height="4.15"
fill="#6c63ff"
id="rect4805" />
<rect
x="999.49"
y="403.75"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4807" />
<rect
x="999.49"
y="413.86"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4809" />
<rect
x="999.49"
y="423.97"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4811" />
<path
d="M1157,220.13v85.45c0,2.54-4.76,4.61-10.65,4.61H920.81c-5.89,0-10.66-2.07-10.66-4.61V220.13c0-2.54,4.77-5.14,10.66-5.14h225.55C1152.25,215,1157,217.59,1157,220.13Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4815" />
<rect
x="999.49"
y="153.97"
width="117.48"
height="4.15"
fill="#6c63ff"
id="rect4817" />
<rect
x="999.49"
y="164.08"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4819" />
<rect
x="999.49"
y="174.19"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4821" />
<rect
x="999.49"
y="184.29"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4823" />
<path
d="M1045,339.47v85.45c0,2.54-4.77,4.6-10.66,4.6H808.76c-5.88,0-10.65-2.06-10.65-4.6V339.47c0-2.55,4.77-5.14,10.65-5.14h225.55C1040.2,334.33,1045,336.92,1045,339.47Z"
transform="translate(-19 -91.56)"
fill="#3f3d56"
id="path4827" />
<rect
x="887.44"
y="273.31"
width="117.48"
height="4.15"
fill="#6c63ff"
id="rect4829" />
<rect
x="887.44"
y="283.42"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4833" />
<rect
x="887.44"
y="293.52"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4835" />
<rect
x="887.44"
y="303.63"
width="117.48"
height="4.15"
fill="#6c63ff"
opacity="0.5"
id="rect4837" />
<style
id="style4919"
type="text/css">
.st0{fill:#77B3D4;}
.st1{opacity:0.2;}
.st2{fill:#231F20;}
.st3{fill:#FFFFFF;}
.st4{fill:#C75C5C;}
.st5{fill:#4F5D73;}
.st6{fill:#E0E0D1;}
</style>
<g
id="g5924"
transform="translate(911.18328,138.60391)">
<g
id="Layer_1">
<g
id="g4961">
<g
id="g4927"
class="st1"
style="opacity:0.2">
<path
id="path4925"
d="m 12,25 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 25 Z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4931">
<path
id="path4929"
d="m 12,23 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 23 Z"
class="st3"
inkscape:connector-curvature="0"
style="fill:#ffffff" />
</g>
<g
id="g4935"
class="st1"
style="opacity:0.2">
<path
id="path4933"
d="M 48,14 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4939">
<path
id="path4937"
d="M 48,12 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
class="st4"
inkscape:connector-curvature="0"
style="fill:#c75c5c" />
</g>
<g
id="g4947"
class="st1"
style="opacity:0.2">
<path
id="path4945"
d="m 20,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4951"
class="st1"
style="opacity:0.2">
<path
id="path4949"
d="m 45,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4955">
<path
id="path4953"
d="m 20,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st6"
inkscape:connector-curvature="0"
style="fill:#e0e0d1" />
</g>
<g
id="g4959">
<path
id="path4957"
d="m 45,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st6"
inkscape:connector-curvature="0"
style="fill:#e0e0d1" />
</g>
</g>
</g>
<g
id="Layer_2">
</g>
</g>
<g
id="g5924-4"
transform="translate(794.71,254.6)">
<g
id="Layer_1-5">
<g
id="g4961-4">
<g
id="g4927-7"
class="st1"
style="opacity:0.2">
<path
id="path4925-4"
d="m 12,25 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 25 Z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4931-4">
<path
id="path4929-3"
d="m 12,23 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 23 Z"
class="st3"
inkscape:connector-curvature="0"
style="fill:#ffffff" />
</g>
<g
id="g4935-0"
class="st1"
style="opacity:0.2">
<path
id="path4933-7"
d="M 48,14 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4939-8">
<path
id="path4937-6"
d="M 48,12 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
class="st4"
inkscape:connector-curvature="0"
style="fill:#c75c5c" />
</g>
<g
id="g4947-8"
class="st1"
style="opacity:0.2">
<path
id="path4945-8"
d="m 20,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4951-4"
class="st1"
style="opacity:0.2">
<path
id="path4949-3"
d="m 45,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4955-1">
<path
id="path4953-4"
d="m 20,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st6"
inkscape:connector-curvature="0"
style="fill:#e0e0d1" />
</g>
<g
id="g4959-9">
<path
id="path4957-2"
d="m 45,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st6"
inkscape:connector-curvature="0"
style="fill:#e0e0d1" />
</g>
</g>
</g>
<g
id="Layer_2-0" />
</g>
<g
id="g5924-6"
transform="translate(913.83516,374.62072)">
<g
id="Layer_1-8">
<g
id="g4961-6">
<g
id="g4927-6"
class="st1"
style="opacity:0.2">
<path
id="path4925-49"
d="m 12,25 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 25 Z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4931-5">
<path
id="path4929-0"
d="m 12,23 v 25 c 0,2.2 1.8,4 4,4 h 32 c 2.2,0 4,-1.8 4,-4 V 23 Z"
class="st3"
inkscape:connector-curvature="0"
style="fill:#ffffff" />
</g>
<g
id="g4935-4"
class="st1"
style="opacity:0.2">
<path
id="path4933-8"
d="M 48,14 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4939-7">
<path
id="path4937-1"
d="M 48,12 H 16 c -2.2,0 -4,1.8 -4,4 v 7 h 40 v -7 c 0,-2.2 -1.8,-4 -4,-4 z"
class="st4"
inkscape:connector-curvature="0"
style="fill:#c75c5c" />
</g>
<g
id="g4947-7"
class="st1"
style="opacity:0.2">
<path
id="path4945-2"
d="m 20,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4951-7"
class="st1"
style="opacity:0.2">
<path
id="path4949-2"
d="m 45,21 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st2"
inkscape:connector-curvature="0"
style="fill:#231f20" />
</g>
<g
id="g4955-2">
<path
id="path4953-6"
d="m 20,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st6"
inkscape:connector-curvature="0"
style="fill:#e0e0d1" />
</g>
<g
id="g4959-1">
<path
id="path4957-0"
d="m 45,19 c -1.1,0 -2,-0.9 -2,-2 v -7 c 0,-1.1 0.9,-2 2,-2 v 0 c 1.1,0 2,0.9 2,2 v 7 c 0,1.1 -0.9,2 -2,2 z"
class="st6"
inkscape:connector-curvature="0"
style="fill:#e0e0d1" />
</g>
</g>
</g>
<g
id="Layer_2-6" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 30 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

@ -1,18 +1,18 @@
<template>
<span class="container">
<time class="container" :datetime="dateObj.getUTCSeconds()">
<span class="month">{{ month }}</span>
<span class="day">{{ day }}</span>
</span>
</time>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class DateComponent extends Vue {
export default class DateCalendarIcon extends Vue {
@Prop({ required: true }) date!: string;
get dateObj() {
return new Date(this.$props.date);
return new Date(this.$props.date);
}
get month() {
@ -26,22 +26,27 @@ export default class DateComponent extends Vue {
</script>
<style lang="scss" scoped>
.container {
display: inline-flex;
padding: 2px 0;
width: 40px;
background: #fff;
time.container {
background: #f6f7f8;
border: 1px solid rgba(46,62,72,.12);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
/*height: 50px;*/
width: 48px;
padding: 8px;
text-align: center;
span {
flex: 0;
flex-direction: column;
text-align: center;
display: block;
&.month {
color: #fa3e3e;
padding: 2px 0;
font-size: 12px;
line-height: 12px;
text-transform: uppercase;
}
&.day {

@ -1,61 +1,124 @@
<template>
<div class="card">
<router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
<div class="card-image" v-if="!event.image">
<figure class="image is-16by9">
<img src="https://picsum.photos/g/400/225/?random">
</figure>
</div>
<div class="card-content">
<div class="content">
<router-link :to="{ name: 'Event', params:{ uuid: event.uuid } }">
<h2 class="title">{{ event.title }}</h2>
</router-link>
<DateComponent v-if="!options.hideDate" :date="event.beginsOn" />
</div>
<div v-if="!options.hideDetails">
<div v-if="event.participants.length > 0 &&
options.loggedPerson &&
event.participants[0].actor.id === options.loggedPerson.id">
<b-tag type="is-info"><translate>Organizer</translate></b-tag>
</div>
<div v-else-if="event.participants.length === 1">
<translate
:translate-params="{name: event.participants[0].actor.preferredUsername}"
>%{name} organizes this event</translate>
</div>
<div v-else>
<span v-for="participant in event.participants" :key="participant.actor.uuid">
{{ participant.actor.preferredUsername }}
<span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,
<!-- <translate
:translate-params="{name: participant.actor.preferredUsername}"
>&nbsp;%{name} is in,</translate>-->
</span>
<div class="content">
<div class="title-wrapper">
<div class="date-component">
<date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />
</div>
<h2 class="title" ref="title">{{ event.title }}</h2>
</div>
<span>
<span v-if="event.physicalAddress && event.physicalAddress.locality">{{ event.physicalAddress.locality }} - </span>
<span v-if="actorDisplayName && actorDisplayName !== '@'">{{ actorDisplayName }}</span>
</span>
</div>
</div>
<!-- <div v-if="!mergedOptions.hideDetails" class="details">-->
<!-- <div v-if="event.participants.length > 0 &&-->
<!-- mergedOptions.loggedPerson &&-->
<!-- event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
<!-- <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
<!-- </div>-->
<!-- <div v-else-if="event.participants.length === 1">-->
<!-- <translate-->
<!-- :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
<!-- >%{name} organizes this event</translate>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
<!-- {{ participant.actor.preferredUsername }}-->
<!-- <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
<!-- &lt;!&ndash; <translate-->
<!-- :translate-params="{name: participant.actor.preferredUsername}"-->
<!-- >&nbsp;%{name} is in,</translate>&ndash;&gt;-->
<!-- </span>-->
<!-- </div>-->
</router-link>
</template>
<script lang="ts">
import { IEvent, ParticipantRole } from '@/types/event.model';
import { Component, Prop, Vue } from 'vue-property-decorator';
import DateComponent from '@/components/Event/Date.vue';
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
import { IActor, IPerson, Person } from '@/types/actor.model';
const lineClamp = require('line-clamp');
export interface IEventCardOptions {
hideDate: boolean;
loggedPerson: IPerson | boolean;
hideDetails: boolean;
organizerActor: IActor | null;
}
@Component({
components: {
DateComponent,
DateCalendarIcon,
EventCard,
},
mounted() {
lineClamp(this.$refs.title, 3);
},
})
export default class EventCard extends Vue {
@Prop({ required: true }) event!: IEvent;
@Prop({ default() { return { hideDate: false, loggedPerson: false, hideDetails: false }; } }) options!: object;
@Prop({ required: false }) options!: IEventCardOptions;
ParticipantRole = ParticipantRole;
defaultOptions: IEventCardOptions = {
hideDate: false,
loggedPerson: false,
hideDetails: false,
organizerActor: null,
};
get mergedOptions(): IEventCardOptions {
return { ...this.defaultOptions, ...this.options };
}
data() {
return {
ParticipantRole,
};
get actorDisplayName() {
const actor = Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
return actor.displayName();
}
}
</script>
<style lang="scss">
@import "../../variables";
a.card {
border: none;
background: $secondary;
div.card-image {
background: $secondary;
}
div.content {
padding: 5px;
background: $secondary;
div.title-wrapper {
display: flex;
div.date-component {
flex: 0;
margin-right: 16px;
}
.title {
font-weight: 400;
line-height: 1em;
font-size: 1.6em;
padding-bottom: 5px;
}
}
}
}
</style>

@ -0,0 +1,36 @@
<template>
<translate
v-if="!endsOn"
:translate-params="{date: formatDate(beginsOn), time: formatTime(beginsOn)}"
>The %{ date } at %{ time }</translate>
<translate
v-else-if="isSameDay()"
:translate-params="{date: formatDate(beginsOn), startTime: formatTime(beginsOn), endTime: formatTime(endsOn)}"
>The %{ date } from %{ startTime } to %{ endTime }</translate>
<translate
v-else-if="endsOn"
:translate-params="{startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn), endTime: formatTime(endsOn)}"
>From the %{ startDate } at %{ startTime } to the %{ endDate } at %{ endTime }</translate>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class EventFullDate extends Vue {
@Prop({ required: true }) beginsOn!: string;
@Prop({ required: false }) endsOn!: string;
formatDate(value) {
return value ? new Date(value).toLocaleString(undefined, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }) : null;
}
formatTime(value) {
return value ? new Date(value).toLocaleTimeString(undefined, { hour: 'numeric', minute: 'numeric' }) : null;
}
isSameDay() {
const sameDay = ((new Date(this.beginsOn)).toDateString()) === ((new Date(this.endsOn)).toDateString());
return this.endsOn && sameDay;
}
}
</script>