Merge branch 'feature/rework-homepage' into 'master'

Rework homepage and add a (fancy) about section

Closes #183

See merge request framasoft/mobilizon!226
This commit is contained in:
Thomas Citharel 2019-10-08 14:24:03 +02:00
commit fcb788fcb7
25 changed files with 626 additions and 348 deletions

View file

@ -86,6 +86,7 @@ cypress:
- mix deps.get - mix deps.get
- cd js - cd js
- yarn install - yarn install
- npx cypress install # just to be sure
- yarn run build - yarn run build
- cd ../ - cd ../
- MIX_ENV=e2e mix ecto.create - MIX_ENV=e2e mix ecto.create

View file

@ -10,8 +10,10 @@ config :mobilizon,
ecto_repos: [Mobilizon.Storage.Repo] ecto_repos: [Mobilizon.Storage.Repo]
config :mobilizon, :instance, config :mobilizon, :instance,
name: System.get_env("MOBILIZON_INSTANCE_NAME") || "Localhost", name: System.get_env("MOBILIZON_INSTANCE_NAME") || "My Mobilizon Instance",
description: System.get_env("MOBILIZON_INSTANCE_DESCRIPTION") || "This is a Mobilizon instance", description:
System.get_env("MOBILIZON_INSTANCE_DESCRIPTION") ||
"Change this to a proper description of your instance",
version: "1.0.0-dev", version: "1.0.0-dev",
hostname: System.get_env("MOBILIZON_INSTANCE_HOST") || "localhost", hostname: System.get_env("MOBILIZON_INSTANCE_HOST") || "localhost",
registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN") || false, registrations_open: System.get_env("MOBILIZON_INSTANCE_REGISTRATIONS_OPEN") || false,

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 151 KiB

View file

@ -33,7 +33,8 @@ A simple card for an event
<div class="tag-container" v-if="event.tags"> <div class="tag-container" v-if="event.tags">
<b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag> <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-secondary">{{ tag.title }}</b-tag>
</div> </div>
<img src="https://picsum.photos/g/400/225/?random" /> <img v-if="event.picture" :src="event.picture.url" />
<img v-else src="https://picsum.photos/g/400/225/?random" />
</figure> </figure>
</div> </div>
<div class="content"> <div class="content">
@ -78,7 +79,6 @@ import { IEvent, ParticipantRole } from '@/types/event.model';
import { Component, Prop, Vue } from 'vue-property-decorator'; import { Component, Prop, Vue } from 'vue-property-decorator';
import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue'; import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
import { IActor, IPerson, Person } from '@/types/actor'; import { IActor, IPerson, Person } from '@/types/actor';
const lineClamp = require('line-clamp');
export interface IEventCardOptions { export interface IEventCardOptions {
hideDate: boolean; hideDate: boolean;
@ -91,9 +91,6 @@ export interface IEventCardOptions {
components: { components: {
DateCalendarIcon, DateCalendarIcon,
}, },
mounted() {
lineClamp(this.$refs.title, 3);
},
}) })
export default class EventCard extends Vue { export default class EventCard extends Vue {
@Prop({ required: true }) event!: IEvent; @Prop({ required: true }) event!: IEvent;
@ -124,9 +121,35 @@ export default class EventCard extends Vue {
@import "../../variables"; @import "../../variables";
a.card { a.card {
border: none; display: block;
background: $secondary; background: $secondary;
&:hover {
// box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
transform: scale(1.01, 1.01);
&:after {
opacity: 1;
}
}
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
&:after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
div.tag-container { div.tag-container {
position: absolute; position: absolute;
top: 10px; top: 10px;
@ -166,11 +189,14 @@ export default class EventCard extends Vue {
} }
.title { .title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 400; font-weight: 400;
line-height: 1em;
font-size: 1.6em; font-size: 1.6em;
padding-bottom: 5px;
margin-top: auto; margin-top: auto;
min-height: 3.5rem;
} }
} }
span.organizer-place-wrapper { span.organizer-place-wrapper {

View file

@ -52,14 +52,14 @@ export default {
<template> <template>
<article class="box"> <article class="box">
<div class="columns">
<div class="content column">
<div class="title-wrapper"> <div class="title-wrapper">
<div class="date-component" v-if="!mergedOptions.hideDate"> <div class="date-component" v-if="!mergedOptions.hideDate">
<date-calendar-icon :date="participation.event.beginsOn" /> <date-calendar-icon :date="participation.event.beginsOn" />
</div> </div>
<h2 class="title" ref="title">{{ participation.event.title }}</h2> <h2 class="title" ref="title">{{ participation.event.title }}</h2>
</div> </div>
<div class="columns">
<div class="content column">
<div> <div>
<span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span> <span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span>
<span v-if="participation.actor.id === participation.event.organizerActor.id">{{ $t("You're organizing this event") }}</span> <span v-if="participation.actor.id === participation.event.organizerActor.id">{{ $t("You're organizing this event") }}</span>
@ -211,6 +211,7 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
div.title-wrapper { div.title-wrapper {
display: flex; display: flex;
align-items: center;
div.date-component { div.date-component {
flex: 0; flex: 0;
@ -222,6 +223,7 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
line-height: 1em; line-height: 1em;
font-size: 1.6em; font-size: 1.6em;
padding-bottom: 5px; padding-bottom: 5px;
margin: auto 0;
} }
} }

View file

@ -97,6 +97,7 @@ query LoggedUserParticipations($afterDateTime: DateTime, $beforeDateTime: DateTi
uuid, uuid,
title, title,
picture { picture {
id,
url, url,
alt alt
}, },
@ -143,6 +144,7 @@ export const LOGGED_USER_DRAFTS = gql`
uuid, uuid,
title, title,
picture { picture {
id,
url, url,
alt alt
}, },

View file

@ -7,7 +7,8 @@ export const DASHBOARD = gql`
uuid, uuid,
title, title,
picture { picture {
alt id,
alt,
url url
}, },
}, },

View file

@ -110,6 +110,10 @@ export const FETCH_EVENT = gql`
uuid, uuid,
title, title,
beginsOn, beginsOn,
picture {
id,
url
}
physicalAddress { physicalAddress {
description description
}, },

View file

@ -25,6 +25,7 @@ export const REPORTS = gql`
uuid, uuid,
title, title,
picture { picture {
id,
url url
} }
}, },
@ -58,6 +59,7 @@ const REPORT_FRAGMENT = gql`
title, title,
description, description,
picture { picture {
id,
url url
} }
}, },

View file

@ -1,5 +1,7 @@
{ {
"A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising.": "A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising.",
"A validation email was sent to {email}": "A validation email was sent to {email}", "A validation email was sent to {email}": "A validation email was sent to {email}",
"About Mobilizon": "About Mobilizon",
"About this event": "About this event", "About this event": "About this event",
"About this instance": "About this instance", "About this instance": "About this instance",
"About": "About", "About": "About",
@ -82,10 +84,14 @@
"Events": "Events", "Events": "Events",
"Exclude": "Exclude", "Exclude": "Exclude",
"Explore": "Explore", "Explore": "Explore",
"Featured events": "Featured events",
"Features": "Features", "Features": "Features",
"Find an address": "Find an address", "Find an address": "Find an address",
"Find an instance": "Find an instance",
"Forgot your password ?": "Forgot your password ?", "Forgot your password ?": "Forgot your password ?",
"From a birthday party with friends and family to a march for climate change, right now, our gatherings are <b>trapped inside the tech giants platforms</b>. How can we organize, how can we click “Attend,” without <b>providing private data</b> to Facebook or <b>locking ourselves up</b> inside MeetUp?": "From a birthday party with friends and family to a march for climate change, right now, our gatherings are <b>trapped inside the tech giants platforms</b>. How can we organize, how can we click “Attend,” without <b>providing private data</b> to Facebook or <b>locking ourselves up</b> inside MeetUp?",
"From the {startDate} at {startTime} to the {endDate} at {endTime}": "From the {startDate} at {startTime} to the {endDate} at {endTime}", "From the {startDate} at {startTime} to the {endDate} at {endTime}": "From the {startDate} at {startTime} to the {endDate} at {endTime}",
"Gather ⋅ Organize ⋅ Mobilize": "Gather ⋅ Organize ⋅ Mobilize",
"General information": "General information", "General information": "General information",
"Going as {name}": "Going as {name}", "Going as {name}": "Going as {name}",
"Group List": "Group List", "Group List": "Group List",
@ -104,16 +110,21 @@
"Identity": "Identity", "Identity": "Identity",
"If an account with this email exists, we just sent another confirmation email to {email}": "If an account with this email exists, we just sent another confirmation email to {email}", "If an account with this email exists, we just sent another confirmation email to {email}": "If an account with this email exists, we just sent another confirmation email to {email}",
"If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity.": "If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity.", "If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity.": "If this identity is the only administrator of some groups, you need to delete them before being able to delete this identity.",
"Installing Mobilizon will allow communities to free themselves from the services of tech giants by creating <b>their own event platform</b>.": "Installing Mobilizon will allow communities to free themselves from the services of tech giants by creating <b>their own event platform</b>.",
"Join event {title}": "Join event {title}", "Join event {title}": "Join event {title}",
"Join {instance}, a Mobilizon instance": "Join {instance}, a Mobilizon instance",
"Join": "Join", "Join": "Join",
"Last published event": "Last published event", "Last published event": "Last published event",
"Last week": "Last week", "Last week": "Last week",
"Learn more about Mobilizon": "Learn more about Mobilizon",
"Learn more on {0}": "Learn more on {0}", "Learn more on {0}": "Learn more on {0}",
"Learn more on": "Learn more on", "Learn more on": "Learn more on",
"Learn more": "Learn more",
"Leave event": "Leave event", "Leave event": "Leave event",
"Leave": "Leave", "Leave": "Leave",
"Leaving event \"{title}\"": "Leaving event \"{title}\"", "Leaving event \"{title}\"": "Leaving event \"{title}\"",
"Legal": "Legal", "Legal": "Legal",
"Let's create a new common": "Let's create a new common",
"License": "License", "License": "License",
"Limited places": "Limited places", "Limited places": "Limited places",
"Load more": "Load more", "Load more": "Load more",
@ -125,6 +136,8 @@
"Manage participants": "Manage participants", "Manage participants": "Manage participants",
"Manage participations": "Manage participations", "Manage participations": "Manage participations",
"Members": "Members", "Members": "Members",
"Mobilizon is a free/libre software that will allow communities to create <b>their own spaces</b> to publish events in order to better emancipate themselves from tech giants.": "Mobilizon is a free/libre software that will allow communities to create <b>their own spaces</b> to publish events in order to better emancipate themselves from tech giants.",
"Mobilizons licence": "Mobilizons licence",
"Moderated comments (shown after approval)": "Moderated comments (shown after approval)", "Moderated comments (shown after approval)": "Moderated comments (shown after approval)",
"My account": "My account", "My account": "My account",
"My events": "My events", "My events": "My events",
@ -142,6 +155,7 @@
"One person is going": "No one is going | One person is going | {approved} persons are going", "One person is going": "No one is going | One person is going | {approved} persons are going",
"Only accessible through link and search (private)": "Only accessible through link and search (private)", "Only accessible through link and search (private)": "Only accessible through link and search (private)",
"Opened reports": "Opened reports", "Opened reports": "Opened reports",
"Organize and take action, freely": "Organize and take action, freely",
"Organized by {name}": "Organized by {name}", "Organized by {name}": "Organized by {name}",
"Organized": "Organized", "Organized": "Organized",
"Organizer": "Organizer", "Organizer": "Organizer",
@ -176,6 +190,7 @@
"Publish": "Publish", "Publish": "Publish",
"Published events": "Published events", "Published events": "Published events",
"RSS/Atom Feed": "RSS/Atom Feed", "RSS/Atom Feed": "RSS/Atom Feed",
"Read Framasofts statement of intent on the Framablog": "Read Framasofts statement of intent on the Framablog",
"Region": "Region", "Region": "Region",
"Register an account on Mobilizon!": "Register an account on Mobilizon!", "Register an account on Mobilizon!": "Register an account on Mobilizon!",
"Register": "Register", "Register": "Register",
@ -201,6 +216,7 @@
"Show map": "Show map", "Show map": "Show map",
"Show remaining number of places": "Show remaining number of places", "Show remaining number of places": "Show remaining number of places",
"Sign up": "Sign up", "Sign up": "Sign up",
"Software to the people": "Software to the people",
"Starts on…": "Starts on…", "Starts on…": "Starts on…",
"Status": "Status", "Status": "Status",
"Street": "Street", "Street": "Street",
@ -217,12 +233,15 @@
"The {date} from {startTime} to {endTime}": "The {date} from {startTime} to {endTime}", "The {date} from {startTime} to {endTime}": "The {date} from {startTime} to {endTime}",
"There are {participants} participants.": "There's only one participant | There are {participants} participants.", "There are {participants} participants.": "There's only one participant | There are {participants} participants.",
"These events may interest you": "These events may interest you", "These events may interest you": "These events may interest you",
"This installation (called “instance“) can easily {interconnect}, thanks to {protocol}.": "This installation (called “instance“) can easily {interconnect}, thanks to {protocol}.",
"This instance isn't opened to registrations, but you can register on other instances.": "This instance isn't opened to registrations, but you can register on other instances.", "This instance isn't opened to registrations, but you can register on other instances.": "This instance isn't opened to registrations, but you can register on other instances.",
"This will delete / anonymize all content (events, comments, messages, participations…) created from this identity.": "This will delete / anonymize all content (events, comments, messages, participations…) created from this identity.", "This will delete / anonymize all content (events, comments, messages, participations…) created from this identity.": "This will delete / anonymize all content (events, comments, messages, participations…) created from this identity.",
"Title": "Title", "Title": "Title",
"To change the world, change the software": "To change the world, change the software",
"To confirm, type your event title \"{eventTitle}\"": "To confirm, type your event title \"{eventTitle}\"", "To confirm, type your event title \"{eventTitle}\"": "To confirm, type your event title \"{eventTitle}\"",
"To confirm, type your identity username \"{preferredUsername}\"": "To confirm, type your identity username \"{preferredUsername}\"", "To confirm, type your identity username \"{preferredUsername}\"": "To confirm, type your identity username \"{preferredUsername}\"",
"Transfer to {outsideDomain}": "Transfer to {outsideDomain}", "Transfer to {outsideDomain}": "Transfer to {outsideDomain}",
"Unfortunately, this instance isn't opened to registrations": "Unfortunately, this instance isn't opened to registrations",
"Unfortunately, your participation request was rejected by the organizers.": "Unfortunately, your participation request was rejected by the organizers.", "Unfortunately, your participation request was rejected by the organizers.": "Unfortunately, your participation request was rejected by the organizers.",
"Unknown error.": "Unknown error.", "Unknown error.": "Unknown error.",
"Unsaved changes": "Unsaved changes", "Unsaved changes": "Unsaved changes",
@ -238,6 +257,8 @@
"Waiting for organization team approval.": "Waiting for organization team approval.", "Waiting for organization team approval.": "Waiting for organization team approval.",
"Waiting list": "Waiting list", "Waiting list": "Waiting list",
"We just sent an email to {email}": "We just sent an email to {email}", "We just sent an email to {email}": "We just sent an email to {email}",
"We want to develop a <b>digital common</b>, that everyone can make their own, which respects <b>privacy and activism by design</b>.": "We want to develop a <b>digital common</b>, that everyone can make their own, which respects <b>privacy and activism by design</b>.",
"We wont change the world from Facebook. The tool we dream of, surveillance capitalism corporations wont develop it, as they couldnt profit from it. This is an opportunity to build something better, by taking another approach.": "We wont change the world from Facebook. The tool we dream of, surveillance capitalism corporations wont develop it, as they couldnt profit from it. This is an opportunity to build something better, by taking another approach.",
"Website / URL": "Website / URL", "Website / URL": "Website / URL",
"Welcome back {username}": "Welcome back {username}", "Welcome back {username}": "Welcome back {username}",
"Welcome back!": "Welcome back!", "Welcome back!": "Welcome back!",
@ -259,14 +280,19 @@
"Your account is being validated": "Your account is being validated", "Your account is being validated": "Your account is being validated",
"Your account is nearly ready, {username}": "Your account is nearly ready, {username}", "Your account is nearly ready, {username}": "Your account is nearly ready, {username}",
"Your local administrator resumed it's policy:": "Your local administrator resumed it's policy:", "Your local administrator resumed it's policy:": "Your local administrator resumed it's policy:",
"a decentralised federation protocol": "a decentralised federation protocol",
"e.g. 10 Rue Jangot": "e.g. 10 Rue Jangot", "e.g. 10 Rue Jangot": "e.g. 10 Rue Jangot",
"iCal Feed": "iCal Feed", "iCal Feed": "iCal Feed",
"interconnect with others like it": "interconnect with others like it",
"its source code is public": "its source code is public",
"meditate a bit": "meditate a bit", "meditate a bit": "meditate a bit",
"respect of the fundamental freedoms": "respect of the fundamental freedoms",
"with another identity…": "with another identity…", "with another identity…": "with another identity…",
"with {identity}": "with {identity}", "with {identity}": "with {identity}",
"{actor}'s avatar": "{actor}'s avatar", "{actor}'s avatar": "{actor}'s avatar",
"{approved} / {total} seats": "{approved} / {total} seats", "{approved} / {total} seats": "{approved} / {total} seats",
"{count} participants": "{count} participants", "{count} participants": "{count} participants",
"{count} requests waiting": "{count} requests waiting", "{count} requests waiting": "{count} requests waiting",
"{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.": "{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.",
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks" "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks"
} }

View file

@ -268,5 +268,8 @@
"{approved} / {total} seats": "{approved} / {total} places", "{approved} / {total} seats": "{approved} / {total} places",
"{count} participants": "Un⋅e participant⋅e|{count} participant⋅e⋅s", "{count} participants": "Un⋅e participant⋅e|{count} participant⋅e⋅s",
"{count} requests waiting": "Un⋅e demande en attente|{count} demandes en attente", "{count} requests waiting": "Un⋅e demande en attente|{count} demandes en attente",
"© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines" "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks": "© Les contributeurs de Mobilizon {date} - Fait avec Elixir, Phoenix, VueJS & et de l'amour et des semaines",
"Organize and take action, freely": "S'organiser et agir, librement",
"Join {instance}, a Mobilizon instance": "Rejoignez {instance}, une instance Mobilizon",
"Learn more": "En apprendre plus"
} }

View file

@ -15,6 +15,7 @@ Vue.use(Router);
enum GlobalRouteName { enum GlobalRouteName {
HOME = 'Home', HOME = 'Home',
ABOUT = 'About',
PAGE_NOT_FOUND = 'PageNotFound', PAGE_NOT_FOUND = 'PageNotFound',
SEARCH = 'Search', SEARCH = 'Search',
} }
@ -66,7 +67,12 @@ const router = new Router({
component: Home, component: Home,
meta: { requiredAuth: false }, meta: { requiredAuth: false },
}, },
{
path: '/about',
name: RouteName.ABOUT,
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue'),
meta: { requiredAuth: false },
},
{ {
path: '*', path: '*',
name: RouteName.PAGE_NOT_FOUND, name: RouteName.PAGE_NOT_FOUND,

199
js/src/views/About.vue Normal file
View file

@ -0,0 +1,199 @@
<template>
<div>
<div class="hero intro is-medium is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">{{ $t('About Mobilizon') }}</h1>
<p class="subtitle">
{{ $t('A user-friendly, emancipatory and ethical tool for gathering, organising, and mobilising.') }}
</p>
<b-button icon-left="open-in-new" size="is-large" type="is-secondary" tag="a" href="https://joinmobilizon.org">{{ $t('Learn more') }}</b-button>
</div>
</div>
</div>
<div class="container" id="mobilizon">
<section>
<div class="columns">
<div class="column has-text-left-desktop">
<h3 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h3>
<p class="content" v-html="$t('From a birthday party with friends and family to a march for climate change, right now, our gatherings are <b>trapped inside the tech giants platforms</b>. How can we organize, how can we click Attend, without <b>providing private data</b> to Facebook or <b>locking ourselves up</b> inside MeetUp?')" />
<p v-html="$t('Mobilizon is a free/libre software that will allow communities to create <b>their own spaces</b> to publish events in order to better emancipate themselves from tech giants.')" />
</div>
<div class="column has-text-right-desktop has-text-centered-mobile">
<img src="img/about/action-mobilizon.png" width="300" />
</div>
</div>
</section>
<section>
<div class="columns">
<div class="column has-text-right-desktop">
<h3 class="title">{{ $t("Let's create a new common") }}</h3>
<p v-html="$t('We want to develop a <b>digital common</b>, that everyone can make their own, which respects <b>privacy and activism by design</b>.')" />
<p>
<span v-html="$t('Installing Mobilizon will allow communities to free themselves from the services of tech giants by creating <b>their own event platform</b>.')" />
<i18n tag="span" path="This installation (called “instance“) can easily {interconnect}, thanks to {protocol}.">
<b slot="interconnect">{{ $t('interconnect with others like it') }}</b>
<a slot="protocol" href="https://en.wikipedia.org/wiki/ActivityPub">{{ $t('a decentralised federation protocol') }}</a>
</i18n>
</p>
</div>
<div class="column has-text-left-desktop has-text-centered-mobile">
<img src="img/about/common-mobilizon.png" width="300" />
</div>
</div>
</section>
</div>
<div class="hero quote is-secondary">
<div class="hero-body">
<div class="container">
<h3 class="title">{{ $t('To change the world, change the software') }}</h3>
<blockquote>
{{ $t('We wont change the world from Facebook. The tool we dream of, surveillance capitalism corporations wont develop it, as they couldnt profit from it. This is an opportunity to build something better, by taking another approach.') }}</blockquote>
<footer class="blockquote-footer">
<a href="https://framablog.org/2019/05/14/mobilizon-lets-finance-a-software-to-free-our-events-from-facebook/">
{{ $t('Read Framasofts statement of intent on the Framablog') }}
</a>
</footer>
</div>
</div>
</div>
<div class="container">
<section>
<div class="columns">
<div class="column">
<h3 class="title">{{ $t('Software to the people') }}</h3>
<i18n tag="p" path="{license} guarantees {respect} of the people who will use it. Since {source}, anyone can audit it, which guarantees its transparency.">
<a slot="license" href="https://choosealicense.com/licenses/agpl-3.0/">{{ $t('Mobilizons licence') }}</a>
<b slot="respect">{{ $t('respect of the fundamental freedoms') }}</b>
<a slot="source" href="https://framagit.org/framasoft/mobilizon">{{ $t('its source code is public') }}</a>
</i18n>
<p>
If the direction given by the development team does not suit you,
you have the legal right to create your own version of the software,
with your own governance choices.
</p>
<p>
Mobilizon is not developed by a secretive start-up, but by a group
of friends who strive to <a href="https://framasoft.org">change the world, one byte at a time</a>.
So while we do work slower, we remain attentive and in touch with our users.
</p>
</div>
<div class="column has-text-right-desktop has-text-centered-mobile">
<img src="img/about/software-to-the-people-mobilizon.png" width="300" />
</div>
</div>
</section>
<section>
<div class="columns">
<div class="column has-text-right-desktop">
<h3 class="title">Concieved with care for humans</h3>
<p>We asked professional designers to help us develop our vision for Mobilizon.
We took time to study the <b>digital habits of activists</b> in order to
understand the features they need to gather, organize, and mobilize.
</p>
<p>
So that, right from its conception, Mobilizon would <b>fit the needs and uses of
the people</b> who are going to use it.
</p>
</div>
<div class="column has-text-left-desktop has-text-centered-mobile">
<img src="img/about/concieved-mobilizon.png" width="300" />
</div>
</div>
</section>
</div>
<!-- We hide the "Find an instance button until https://joinmobilizon.org gets a instance picker -->
<div class="hero register is-primary is-medium" v-if="config && config.registrationsOpen">
<div class="hero-body">
<div class="container has-text-centered">
<div class="columns">
<div class="column">
<h2 class="title">Register on this instance</h2>
<b-button type="is-secondary" size="is-large" tag="router-link" :to="{ name: RouteName.REGISTER }">{{ $t('Register') }}</b-button>
</div>
<!-- <div class="column">
<h2 class="title">Find an instance</h2>
<b-button type="is-secondary" size="is-large" tag="a" href="https://joinmobilizon.org">{{ $t('Register') }}</b-button>
</div> -->
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import {
Component,
Vue,
} from 'vue-property-decorator';
import { CONFIG } from '@/graphql/config';
import { IConfig } from '@/types/config.model';
import { RouteName } from '@/router';
@Component({
apollo: {
config: {
query: CONFIG,
},
},
})
export default class About extends Vue {
config!: IConfig;
RouteName = RouteName;
}
</script>
<style lang="scss" scoped>
@import "@/variables.scss";
.hero.register {
background: lighten($primary, 20%);
}
section {
padding: 3rem 0;
&:not(:last-child) {
border-bottom: 0.1rem dotted #777;
}
p {
margin-top: 1.5rem;
}
&:nth-child(odd) .columns {
flex-direction: row-reverse;
}
}
.hero.quote {
background: lighten($secondary, 20%);
h3 {
background: initial;
}
blockquote {
border-left: .2em solid #333;
display: block;
padding-left: 1em;
&:before {
content: "« ";
}
&:after {
content: " »";
}
}
.blockquote-footer a {
color: #6c757d;
&:before {
content: "\2014\00A0";
}
}
}
</style>

View file

@ -264,7 +264,7 @@ import { RouteName } from '@/router';
return []; return [];
}, },
skip() { skip() {
return !this.event.id || !this.currentActor.id; return !this.currentActor || !this.event || !this.event.id || !this.currentActor.id;
}, },
}, },
}, },

View file

@ -1,26 +1,25 @@
<template> <template>
<div> <div>
<section class="hero is-medium is-light is-bold" v-if="!currentUser.id || !currentActor.id"> <section class="hero is-medium is-light is-bold" v-if="config && (!currentUser.id || !currentActor.id)">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<div class="columns"> <h1 class="title">{{ $t('Gather ⋅ Organize ⋅ Mobilize') }}</h1>
<div class="column"> <p class="subtitle">{{ $t('Join {instance}, a Mobilizon instance', { instance: config.name }) }}
<h1 class="title">{{ config.name }}</h1> <p>{{ config.description }}</p>
<h2 class="subtitle">{{ config.description }}</h2> <!-- We don't invite to find other instances yet -->
<router-link class="button" :to="{ name: RouteName.REGISTER }" v-if="config.registrationsOpen"> <!-- <p v-if="!config.registrationsOpen">
{{ $t('Sign up') }}
</router-link>
<p v-else>
{{ $t("This instance isn't opened to registrations, but you can register on other instances.") }} {{ $t("This instance isn't opened to registrations, but you can register on other instances.") }}
</p> </p> -->
</div> <b-message type="is-danger" v-if="!config.registrationsOpen">
<div class="column"> {{ $t("Unfortunately, this instance isn't opened to registrations") }}
<div class="card-image"> </b-message>
<figure class="image is-square"> <div class="buttons">
<img src="https://joinmobilizon.org/img/en/events-mobilizon.png" /> <b-button type="is-primary" tag="router-link" :to="{ name: RouteName.REGISTER }" v-if="config.registrationsOpen">
</figure> {{ $t('Sign up') }}
</div> </b-button>
</div> <!-- We don't invite to find other instances yet -->
<!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
<b-button type="is-text" tag="router-link" :to="{ name: RouteName.ABOUT }">{{ $t('Learn more about Mobilizon')}}</b-button>
</div> </div>
</div> </div>
</div> </div>
@ -31,12 +30,12 @@
{{ $t('Welcome back {username}', { username: currentActor.displayName() }) }} {{ $t('Welcome back {username}', { username: currentActor.displayName() }) }}
</b-message> </b-message>
</section> </section>
<section v-else-if="currentActor && goingToEvents.size > 0" class="container"> <section v-if="currentActor && goingToEvents.size > 0" class="container">
<h3 class="title"> <h3 class="title">
{{ $t("Upcoming") }} {{ $t("Upcoming") }}
</h3> </h3>
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<div v-for="row in goingToEvents" class="upcoming-events" :key="row[0]"> <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
<span class="date-component-container" v-if="isInLessThanSevenDays(row[0])"> <span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
<date-component :date="row[0]"></date-component> <date-component :date="row[0]"></date-component>
<h3 class="subtitle" <h3 class="subtitle"
@ -79,8 +78,8 @@
/> />
</div> </div>
</section> </section>
<section> <section class="events-featured">
<h3 class="events-nearby title">{{ $t('Events nearby you') }}</h3> <h3 class="title">{{ $t('Featured events') }}</h3>
<b-loading :active.sync="$apollo.loading"></b-loading> <b-loading :active.sync="$apollo.loading"></b-loading>
<div v-if="events.length > 0" class="columns is-multiline"> <div v-if="events.length > 0" class="columns is-multiline">
<div class="column is-one-third-desktop" v-for="event in events.slice(0, 6)" :key="event.uuid"> <div class="column is-one-third-desktop" v-for="event in events.slice(0, 6)" :key="event.uuid">
@ -129,6 +128,22 @@ import { IConfig } from '@/types/config.model';
config: { config: {
query: CONFIG, query: CONFIG,
}, },
currentUserParticipations: {
query: LOGGED_USER_PARTICIPATIONS,
variables() {
const lastWeek = new Date();
lastWeek.setDate(new Date().getDate() - 7);
return {
afterDateTime: lastWeek.toISOString(),
};
},
update: (data) => {
return data.loggedUser.participations.map(participation => new Participant(participation));
},
skip() {
return this.currentUser.isLoggedIn === false;
},
},
}, },
components: { components: {
DateComponent, DateComponent,
@ -141,35 +156,19 @@ export default class Home extends Vue {
locations = []; locations = [];
city = { name: null }; city = { name: null };
country = { name: null }; country = { name: null };
currentUserParticipations: IParticipant[] = [];
currentUser!: ICurrentUser; currentUser!: ICurrentUser;
currentActor!: IPerson; currentActor!: IPerson;
config: IConfig = { description: '', name: '', registrationsOpen: false }; config!: IConfig;
RouteName = RouteName; RouteName = RouteName;
currentUserParticipations: IParticipant[] = [];
// get displayed_name() { // get displayed_name() {
// return this.loggedPerson && this.loggedPerson.name === null // return this.loggedPerson && this.loggedPerson.name === null
// ? this.loggedPerson.preferredUsername // ? this.loggedPerson.preferredUsername
// : this.loggedPerson.name; // : this.loggedPerson.name;
// } // }
async mounted() {
const lastWeek = new Date();
lastWeek.setDate(new Date().getDate() - 7);
if (this.currentUser.isLoggedIn === false) return;
const { data } = await this.$apollo.query({
query: LOGGED_USER_PARTICIPATIONS,
variables: {
afterDateTime: lastWeek.toISOString(),
},
});
if (data) {
this.currentUserParticipations = data.loggedUser.participations.map(participation => new Participant(participation));
}
}
isToday(date: Date) { isToday(date: Date) {
return (new Date(date)).toDateString() === (new Date()).toDateString(); return (new Date(date)).toDateString() === (new Date()).toDateString();
} }
@ -205,6 +204,7 @@ export default class Home extends Vue {
res.sort( res.sort(
(a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime(), (a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime(),
); );
return res.reduce((acc: Map<string, Map<string, IParticipant>>, participation: IParticipant) => { return res.reduce((acc: Map<string, Map<string, IParticipant>>, participation: IParticipant) => {
const day = (new Date(participation.event.beginsOn)).toDateString(); const day = (new Date(participation.event.beginsOn)).toDateString();
const participations: Map<string, IParticipant> = acc.get(day) || new Map(); const participations: Map<string, IParticipant> = acc.get(day) || new Map();
@ -281,8 +281,12 @@ export default class Home extends Vue {
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
} }
.events-nearby { .events-featured {
margin: 25px auto; margin: 25px auto;
.columns {
margin: 1rem auto 3rem;
}
} }
.date-component-container { .date-component-container {
@ -314,8 +318,7 @@ export default class Home extends Vue {
background: lighten($secondary, 20%); background: lighten($secondary, 20%);
.column figure.image img { .column figure.image img {
width: 480px; max-width: 400px;
height: 350px;
} }
} }
</style> </style>

View file

@ -5,6 +5,7 @@
"import-name": false, "import-name": false,
"ter-arrow-parens": false, "ter-arrow-parens": false,
"no-boolean-literal-compare": false, "no-boolean-literal-compare": false,
"object-shorthand-properties-first": false "object-shorthand-properties-first": false,
"space-in-parens": false
} }
} }

View file

@ -4177,9 +4177,9 @@ ejs@^2.6.1:
integrity sha512-kS/gEPzZs3Y1rRsbGX4UOSjtP/CeJP0CxSNZHYxGfVM/VgLcv0ZqM7C45YyTj2DI2g7+P9Dd24C+IMIg6D0nYQ== integrity sha512-kS/gEPzZs3Y1rRsbGX4UOSjtP/CeJP0CxSNZHYxGfVM/VgLcv0ZqM7C45YyTj2DI2g7+P9Dd24C+IMIg6D0nYQ==
electron-to-chromium@^1.3.103, electron-to-chromium@^1.3.247: electron-to-chromium@^1.3.103, electron-to-chromium@^1.3.247:
version "1.3.275" version "1.3.277"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.275.tgz#19a38436e34216f51820fa2f4326d5ce141fa36f" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.277.tgz#38b7b297f9b3f67ea900a965c1b11a555de526ec"
integrity sha512-/YWtW/VapMnuYA1lNOaa1F4GhR1LBf+CUTp60lzDPEEh0XOzyOAyULyYZVF9vziZ3qSbTqCwmKwsyRXp66STbw== integrity sha512-Czmsrgng89DOgJlIknnw9bn5431QdtnUwGp5YYiPwU1DbZQUxCLF+rc1ZC09VNAdalOPcvH6AE8BaA0H5HjI/w==
elegant-spinner@^1.0.1: elegant-spinner@^1.0.1:
version "1.0.1" version "1.0.1"
@ -8494,7 +8494,7 @@ os-locale@^2.0.0:
lcid "^1.0.0" lcid "^1.0.0"
mem "^1.1.0" mem "^1.1.0"
os-locale@^3.0.0: os-locale@^3.0.0, os-locale@^3.1.0:
version "3.1.0" version "3.1.0"
resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a" resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q== integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
@ -9504,9 +9504,9 @@ prosemirror-utils@^0.9.6:
integrity sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA== integrity sha512-UC+j9hQQ1POYfMc5p7UFxBTptRiGPR7Kkmbl3jVvU8VgQbkI89tR/GK+3QYC8n+VvBZrtAoCrJItNhWSxX3slA==
prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.11.4: prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.11.4:
version "1.11.5" version "1.11.6"
resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.11.5.tgz#ed06a485cce573eac49de7ad6fd1bc3d065e81b7" resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.11.6.tgz#8500fc20a06b9bf3e2f60c01d9a950bd61512db6"
integrity sha512-sfHnSbkT2jhhT8YPXuoMZzPPrfL+JA+qxe39IFgQM4VnyjCII26EfVfQlj8iq9DS489flEbZSLFmE0LFM9+ZiA== integrity sha512-QilemwGa8ib1n42JFFP4J4SEpzPan2IcMNUlllya/ye9gjuHy1Wt5R/o0zXK0Y0HRP4gNqqb9VrbLvi7UAILqQ==
dependencies: dependencies:
prosemirror-model "^1.1.0" prosemirror-model "^1.1.0"
prosemirror-state "^1.0.0" prosemirror-state "^1.0.0"
@ -13198,15 +13198,15 @@ yargs@^10.0.3:
yargs-parser "^8.1.0" yargs-parser "^8.1.0"
yargs@^11.0.0: yargs@^11.0.0:
version "11.1.0" version "11.1.1"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.0.tgz#90b869934ed6e871115ea2ff58b03f4724ed2d77" resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.1.tgz#5052efe3446a4df5ed669c995886cc0f13702766"
integrity sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A== integrity sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==
dependencies: dependencies:
cliui "^4.0.0" cliui "^4.0.0"
decamelize "^1.1.1" decamelize "^1.1.1"
find-up "^2.1.0" find-up "^2.1.0"
get-caller-file "^1.0.1" get-caller-file "^1.0.1"
os-locale "^2.0.0" os-locale "^3.1.0"
require-directory "^2.1.1" require-directory "^2.1.1"
require-main-filename "^1.0.1" require-main-filename "^1.0.1"
set-blocking "^2.0.0" set-blocking "^2.0.0"