hamlab/mobilizon-frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Improve UI on home & register pages

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
2020-10-12 08:50:51 +02:00
parent dcf8615ebb
commit 1d82b29d61
6 changed files with 66 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/views/About.vue
View File

@@ -84,7 +84,7 @@
size="is-large"
tag="router-link"
:to="{ name: RouteName.REGISTER }"
>{{ $t("Register") }}</b-button
>{{ $t("Create an account") }}</b-button
>
</div>
<!-- <div class="column">

89
js/src/views/Home.vue
View File

@@ -19,7 +19,7 @@
tag="router-link"
:to="{ name: RouteName.REGISTER }"
v-if="config.registrationsOpen"
>{{ $t("Sign up") }}</b-button
>{{ $t("Create an account") }}</b-button
>
<!-- 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> -->
@@ -125,7 +125,6 @@
</template>
<script lang="ts">
import ngeohash from "ngeohash";
import { Component, Vue } from "vue-property-decorator";
import { FETCH_EVENTS } from "../graphql/event";
import EventListCard from "../components/Event/EventListCard.vue";
@@ -135,13 +134,7 @@ import { IPerson, Person } from "../types/actor";
import { ICurrentUser } from "../types/current-user.model";
import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
import RouteName from "../router/name";
import {
EventModel,
IEvent,
IParticipant,
Participant,
ParticipantRole,
} from "../types/event.model";
import { IEvent, IParticipant, Participant, ParticipantRole } from "../types/event.model";
import DateComponent from "../components/Event/DateCalendarIcon.vue";
import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model";
@@ -192,6 +185,7 @@ import Subtitle from "../components/Utils/Subtitle.vue";
metaInfo() {
return {
// if no subcomponents specify a metaInfo.title, this title will be used
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
title: this.instanceName,
// all titles will be injected into this template
@@ -226,20 +220,23 @@ export default class Home extends Vue {
// : this.loggedPerson.name;
// }
get instanceName() {
get instanceName(): string | undefined {
if (!this.config) return undefined;
return this.config.name;
}
get welcomeBack() {
// eslint-disable-next-line class-methods-use-this
get welcomeBack(): boolean {
return window.localStorage.getItem("welcome-back") === "yes";
}
get newRegisteredUser() {
// eslint-disable-next-line class-methods-use-this
get newRegisteredUser(): boolean {
return window.localStorage.getItem("new-registered-user") === "yes";
}
mounted() {
// eslint-disable-next-line class-methods-use-this
mounted(): void {
if (window.localStorage.getItem("welcome-back")) {
window.localStorage.removeItem("welcome-back");
}
@@ -248,7 +245,8 @@ export default class Home extends Vue {
}
}
isToday(date: Date) {
// eslint-disable-next-line class-methods-use-this
isToday(date: Date): boolean {
return new Date(date).toDateString() === new Date().toDateString();
}
@@ -272,6 +270,7 @@ export default class Home extends Vue {
return this.isBefore(date, 7);
}
// eslint-disable-next-line class-methods-use-this
calculateDiffDays(date: string): number {
return Math.ceil((new Date(date).getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24);
}
@@ -300,7 +299,7 @@ export default class Home extends Vue {
);
}
get lastWeekEvents() {
get lastWeekEvents(): IParticipant[] {
const res = this.currentUserParticipations.filter(
({ event, role }) =>
event.beginsOn != null &&
@@ -316,73 +315,25 @@ export default class Home extends Vue {
/**
* Return all events from server excluding the ones shown as participating
*/
get filteredFeaturedEvents() {
get filteredFeaturedEvents(): IEvent[] {
return this.events.filter(
({ id }) =>
!this.currentUserParticipations
.filter((participation) => participation.role === ParticipantRole.CREATOR)
.map(({ event: { id } }) => id)
.map(({ event: { id: eventId } }) => eventId)
.includes(id)
);
}
geoLocalize() {
const router = this.$router;
const sessionCity = sessionStorage.getItem("City");
if (sessionCity) {
return router.push({
name: "EventList",
params: { location: sessionCity },
});
}
navigator.geolocation.getCurrentPosition(
(pos) => {
const crd = pos.coords;
const geoHash = ngeohash.encode(crd.latitude, crd.longitude, 11);
sessionStorage.setItem("City", geoHash);
router.push({
name: RouteName.EVENT_LIST,
params: { location: geoHash },
});
},
(err) => console.warn(`ERROR(${err.code}): ${err.message}`),
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0,
}
);
}
eventDeleted(eventid: string) {
eventDeleted(eventid: string): void {
this.currentUserParticipations = this.currentUserParticipations.filter(
(participation) => participation.event.id !== eventid
);
}
// getAddressData(addressData) {
// const geoHash = ngeohash.encode(
// addressData.latitude,
// addressData.longitude,
// 11,
// );
// sessionStorage.setItem('City', geoHash);
// this.$router.push({ name: RouteName.EVENT_LIST, params: { location: geoHash } });
// }
viewEvent(event: IEvent) {
viewEvent(event: IEvent): void {
this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
}
// ipLocation() {
// return this.city.name ? this.city.name : this.country.name;
// }
}
</script>
@@ -399,6 +350,10 @@ main > div > .container {
}
.events-featured {
& > h3 {
padding-left: 0.75rem;
}
.columns {
margin: 1rem auto 3rem;
}

2
js/src/views/User/Login.vue
View File

@@ -86,7 +86,7 @@
default_password: credentials.password,
},
}"
>{{ $t("Register") }}</router-link
>{{ $t("Create an account") }}</router-link
>
</p>
</form>

32
js/src/views/User/Register.vue
View File

@@ -17,14 +17,14 @@
<div class="columns">
<div class="column">
<div>
<subtitle>{{ $t("Features") }}</subtitle>
<subtitle>{{ $t("Why create an account?") }}</subtitle>
<div class="content">
<ul>
<li>{{ $t("Create and manage several identities from the same account") }}</li>
<li>{{ $t("Create, edit or delete events") }}</li>
<li>{{ $t("Register for an event by choosing one of your identities") }}</li>
<li>{{ $t("To create and manage your events") }}</li>
<li>{{ $t("To create and manage multiples identities from a same account") }}</li>
<li>{{ $t("To register for an event by choosing one of your identities") }}</li>
<li v-if="config.features.groups">
{{ $t("Create or join an group and start organizing with other people") }}
{{ $t("To create or join an group and start organizing with other people") }}
</li>
</ul>
</div>
@@ -34,12 +34,16 @@
}}</router-link>
<hr />
<div class="content">
<subtitle>{{ $t("About this instance") }}</subtitle>
<subtitle>{{ $t("About {instance}", { instance: config.name }) }}</subtitle>
<div class="content" v-html="config.description"></div>
<i18n path="Please read the instance's {fullRules}" tag="p">
<i18n
path="Please read the {fullRules} published by {instance}'s administrators."
tag="p"
>
<router-link slot="fullRules" :to="{ name: RouteName.RULES }">{{
$t("full rules")
}}</router-link>
<b slot="instance">{{ config.name }}</b>
</i18n>
</div>
</div>
@@ -93,25 +97,25 @@
</i18n>
</b-checkbox>
<p class="control has-text-centered">
<p class="create-account control has-text-centered">
<b-button
type="is-primary"
size="is-large"
:disabled="sendingForm"
native-type="submit"
>
{{ $t("Register") }}
{{ $t("Create an account") }}
</b-button>
</p>
<p class="control">
<p class="control has-text-centered">
<router-link
class="button is-text"
:to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email } }"
>{{ $t("Didn't receive the instructions?") }}</router-link
>
</p>
<p class="control">
<p class="control has-text-centered">
<router-link
class="button is-text"
:to="{
@@ -235,4 +239,10 @@ h2.title {
text-decoration-color: $secondary;
display: inline;
}
p.create-account {
/deep/ button {
margin: 1rem auto 2rem;
}
}
</style>