Thomas Citharel
@@ -87,6 +87,7 @@ export default class App extends Vue {
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f6f7f8;
|
||||
// background: #f7f8fa;
|
||||
background: #ebebeb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<b-navbar type="is-secondary" shadow wrapper-class="container">
|
||||
<b-navbar type="is-secondary" wrapper-class="container">
|
||||
<template slot="brand">
|
||||
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }"><logo /></b-navbar-item>
|
||||
</template>
|
||||
|
||||
@@ -1,86 +1,99 @@
|
||||
<template>
|
||||
<div class="container" v-if="config">
|
||||
<section class="hero is-info" v-if="!currentUser.id || !currentActor">
|
||||
<div class="hero-body">
|
||||
<div>
|
||||
<h1 class="title">{{ config.name }}</h1>
|
||||
<h2 class="subtitle">{{ config.description }}</h2>
|
||||
<router-link class="button" :to="{ name: RouteName.REGISTER }" 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.") }}
|
||||
</p>
|
||||
<div>
|
||||
<section class="hero is-medium is-light is-bold" v-if="!currentUser.id || !currentActor.id">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h1 class="title">{{ config.name }}</h1>
|
||||
<h2 class="subtitle">{{ config.description }}</h2>
|
||||
<router-link class="button" :to="{ name: RouteName.REGISTER }" 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.") }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="card-image">
|
||||
<figure class="image is-square">
|
||||
<img src="https://joinmobilizon.org/img/en/events-mobilizon.png" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section v-else-if="currentActor">
|
||||
<b-message type="is-info">
|
||||
{{ $t('Welcome back {username}', { username: currentActor.displayName() }) }}
|
||||
</b-message>
|
||||
</section>
|
||||
<section v-else-if="currentActor && goingToEvents.size > 0" class="container">
|
||||
<h3 class="title">
|
||||
{{ $t("Upcoming") }}
|
||||
</h3>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<div v-for="row in goingToEvents" class="upcoming-events">
|
||||
<span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
|
||||
<date-component :date="row[0]"></date-component>
|
||||
<h3 class="subtitle"
|
||||
v-if="isToday(row[0])">
|
||||
{{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
|
||||
</h3>
|
||||
<h3 class="subtitle"
|
||||
v-else-if="isTomorrow(row[0])">
|
||||
{{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
|
||||
</h3>
|
||||
<h3 class="subtitle"
|
||||
v-else-if="isInLessThanSevenDays(row[0])">
|
||||
{{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
|
||||
</h3>
|
||||
</section>
|
||||
<div class="container" v-if="config">
|
||||
<section v-if="currentActor.id">
|
||||
<b-message type="is-info">
|
||||
{{ $t('Welcome back {username}', { username: currentActor.displayName() }) }}
|
||||
</b-message>
|
||||
</section>
|
||||
<section v-else-if="currentActor && goingToEvents.size > 0" class="container">
|
||||
<h3 class="title">
|
||||
{{ $t("Upcoming") }}
|
||||
</h3>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<div v-for="row in goingToEvents" class="upcoming-events" :key="row[0]">
|
||||
<span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
|
||||
<date-component :date="row[0]"></date-component>
|
||||
<h3 class="subtitle"
|
||||
v-if="isToday(row[0])">
|
||||
{{ $tc('You have one event today.', row[1].length, {count: row[1].length}) }}
|
||||
</h3>
|
||||
<h3 class="subtitle"
|
||||
v-else-if="isTomorrow(row[0])">
|
||||
{{ $tc('You have one event tomorrow.', row[1].length, {count: row[1].length}) }}
|
||||
</h3>
|
||||
<h3 class="subtitle"
|
||||
v-else-if="isInLessThanSevenDays(row[0])">
|
||||
{{ $tc('You have one event in {days} days.', row[1].length, {count: row[1].length, days: calculateDiffDays(row[0])}) }}
|
||||
</h3>
|
||||
</span>
|
||||
<div>
|
||||
<EventListCard
|
||||
v-for="participation in row[1]"
|
||||
v-if="isInLessThanSevenDays(row[0])"
|
||||
:key="participation[1].event.uuid"
|
||||
:participation="participation[1]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="view-all">
|
||||
<router-link :to=" { name: RouteName.MY_EVENTS }">{{ $t('View everything')}} >></router-link>
|
||||
</span>
|
||||
</section>
|
||||
<section v-if="currentActor && lastWeekEvents.length > 0">
|
||||
<h3 class="title">
|
||||
{{ $t("Last week") }}
|
||||
</h3>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<div>
|
||||
<EventListCard
|
||||
v-for="participation in row[1]"
|
||||
v-if="isInLessThanSevenDays(row[0])"
|
||||
:key="participation[1].event.uuid"
|
||||
:participation="participation[1]"
|
||||
/>
|
||||
<EventListCard
|
||||
v-for="participation in lastWeekEvents"
|
||||
:key="participation.id"
|
||||
:participation="participation"
|
||||
:options="{ hideDate: false }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<span class="view-all">
|
||||
<router-link :to=" { name: RouteName.MY_EVENTS }">{{ $t('View everything')}} >></router-link>
|
||||
</span>
|
||||
</section>
|
||||
<section v-if="currentActor && lastWeekEvents.length > 0">
|
||||
<h3 class="title">
|
||||
{{ $t("Last week") }}
|
||||
</h3>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<div>
|
||||
<EventListCard
|
||||
v-for="participation in lastWeekEvents"
|
||||
:key="participation.id"
|
||||
:participation="participation"
|
||||
:options="{ hideDate: false }"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="events-nearby title">{{ $t('Events nearby you') }}</h3>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<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">
|
||||
<EventCard
|
||||
:event="event"
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="events-nearby title">{{ $t('Events nearby you') }}</h3>
|
||||
<b-loading :active.sync="$apollo.loading"></b-loading>
|
||||
<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">
|
||||
<EventCard
|
||||
:event="event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<b-message v-else type="is-danger">
|
||||
{{ $t('No events found') }}
|
||||
</b-message>
|
||||
</section>
|
||||
<b-message v-else type="is-danger">
|
||||
{{ $t('No events found') }}
|
||||
</b-message>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -260,6 +273,8 @@ export default class Home extends Vue {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
.search-autocomplete {
|
||||
border: 1px solid #dbdbdb;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
@@ -292,4 +307,14 @@ export default class Home extends Vue {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
section.hero {
|
||||
margin-top: -3px;
|
||||
background: lighten($secondary, 20%);
|
||||
|
||||
.column figure.image img {
|
||||
width: 480px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,95 +8,93 @@
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="columns is-mobile">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<h3 class="title">{{ $t('Features') }}</h3>
|
||||
<ul>
|
||||
<li>{{ $t('Create your communities and your events') }}</li>
|
||||
<li>{{ $t('Other stuff…') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<i18n path="Learn more on" tag="p">
|
||||
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
|
||||
</i18n>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<h3 class="title">{{ $t('About this instance') }}</h3>
|
||||
<p>
|
||||
{{ $t("Your local administrator resumed it's policy:") }}
|
||||
</p>
|
||||
<ul>
|
||||
<li>{{ $t('Please be nice to each other') }}</li>
|
||||
<li>{{ $t('meditate a bit') }}</li>
|
||||
</ul>
|
||||
<p>
|
||||
{{ $t('Please read the full rules') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<h3 class="title">{{ $t('Features') }}</h3>
|
||||
<ul>
|
||||
<li>{{ $t('Create your communities and your events') }}</li>
|
||||
<li>{{ $t('Other stuff…') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column">
|
||||
<form @submit="submit">
|
||||
<b-field
|
||||
:label="$t('Email')"
|
||||
:type="errors.email ? 'is-danger' : null"
|
||||
:message="errors.email"
|
||||
>
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="email"
|
||||
v-model="credentials.email"
|
||||
@blur="showGravatar = true"
|
||||
@focus="showGravatar = false"
|
||||
/>
|
||||
</b-field>
|
||||
<i18n path="Learn more on" tag="p">
|
||||
<a target="_blank" href="https://joinmobilizon.org">joinmobilizon.org</a>
|
||||
</i18n>
|
||||
<hr>
|
||||
<div class="content">
|
||||
<h3 class="title">{{ $t('About this instance') }}</h3>
|
||||
<p>
|
||||
{{ $t("Your local administrator resumed it's policy:") }}
|
||||
</p>
|
||||
<ul>
|
||||
<li>{{ $t('Please be nice to each other') }}</li>
|
||||
<li>{{ $t('meditate a bit') }}</li>
|
||||
</ul>
|
||||
<p>
|
||||
{{ $t('Please read the full rules') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<form @submit="submit">
|
||||
<b-field
|
||||
:label="$t('Email')"
|
||||
:type="errors.email ? 'is-danger' : null"
|
||||
:message="errors.email"
|
||||
>
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="email"
|
||||
v-model="credentials.email"
|
||||
@blur="showGravatar = true"
|
||||
@focus="showGravatar = false"
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<b-field
|
||||
:label="$t('Password')"
|
||||
:type="errors.password ? 'is-danger' : null"
|
||||
:message="errors.password"
|
||||
>
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="credentials.password"
|
||||
/>
|
||||
</b-field>
|
||||
<b-field
|
||||
:label="$t('Password')"
|
||||
:type="errors.password ? 'is-danger' : null"
|
||||
:message="errors.password"
|
||||
>
|
||||
<b-input
|
||||
aria-required="true"
|
||||
required
|
||||
type="password"
|
||||
password-reveal
|
||||
minlength="6"
|
||||
v-model="credentials.password"
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<b-field grouped>
|
||||
<div class="control">
|
||||
<button type="button" class="button is-primary" @click="submit()">
|
||||
{{ $t('Register') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
|
||||
>
|
||||
{{ $t("Didn't receive the instructions ?") }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
|
||||
:disabled="sendingValidation"
|
||||
>
|
||||
{{ $t('Login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</b-field>
|
||||
</form>
|
||||
<b-field grouped>
|
||||
<div class="control">
|
||||
<button type="button" class="button is-primary" @click="submit()">
|
||||
{{ $t('Register') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email }}"
|
||||
>
|
||||
{{ $t("Didn't receive the instructions ?") }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="control">
|
||||
<router-link
|
||||
class="button is-text"
|
||||
:to="{ name: RouteName.LOGIN, params: { email: credentials.email, password: credentials.password }}"
|
||||
:disabled="sendingValidation"
|
||||
>
|
||||
{{ $t('Login') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</b-field>
|
||||
</form>
|
||||
|
||||
<div v-if="errors.length > 0">
|
||||
<b-message type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
||||
</div>
|
||||
<div v-if="errors.length > 0">
|
||||
<b-message type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user