From 762f917ff784ef7b7f67088736f0acaf580d6dcb Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 18 Jun 2021 19:36:50 +0200
Subject: [PATCH] Homepage improvements
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
js/src/i18n/en_US.json | 4 +--
js/src/i18n/fr_FR.json | 4 +--
js/src/views/Home.vue | 68 +++++++++++++++++++++++++-----------------
3 files changed, 45 insertions(+), 31 deletions(-)
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 787d95548..b370a2fa0 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -857,7 +857,6 @@
"Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area.": "Your city or region and the radius will only be used to suggest you events nearby. The event radius will consider the administrative center of the area.",
"Your upcoming events": "Your upcoming events",
"Last published events": "Last published events",
- "On {instance}": "On {instance}",
"Events nearby": "Events nearby",
"Within {number} kilometers of {place}": "|Within one kilometer of {place}|Within {number} kilometers of {place}",
"@{username}": "@{username}",
@@ -1053,5 +1052,6 @@
"A new version is available.": "A new version is available.",
"An error has occured while refreshing the page.": "An error has occured while refreshing the page.",
"Join group {group}": "Join group {group}",
- "Public preview": "Public preview"
+ "Public preview": "Public preview",
+ "On {instance} and other federated instances": "On {instance} and other federated instances"
}
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index f5b8257f4..f9f94422c 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -561,7 +561,6 @@
"On {date} ending at {endTime}": "Le {date}, se terminant à {endTime}",
"On {date} from {startTime} to {endTime}": "Le {date} de {startTime} à {endTime}",
"On {date} starting at {startTime}": "Le {date} à partir de {startTime}",
- "On {instance}": "Sur {instance}",
"Ongoing tasks": "Tâches en cours",
"Only accessible through link": "Accessible uniquement par le lien",
"Only accessible through link (private)": "Uniquement accessible par lien (privé)",
@@ -1144,5 +1143,6 @@
"A new version is available.": "Une nouvelle version est disponible.",
"An error has occured while refreshing the page.": "Une erreur est survenue lors du rafraîchissement de la page.",
"Join group {group}": "Rejoindre le groupe {group}",
- "Public preview": "Aperçu public"
+ "Public preview": "Aperçu public",
+ "On {instance} and other federated instances": "Sur {instance} et d'autres instances fédérées"
}
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index 38337dd88..47a7aaf6d 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -52,11 +52,13 @@
v-if="config && (!currentUser.id || !currentActor.id)"
>
<section class="events-recent">
- <h2 class="is-size-2 has-text-weight-bold">
+ <h2 class="title">
{{ $t("Last published events") }}
</h2>
<p>
- {{ $t("On {instance}", { instance: config.name }) }}
+ <i18n tag="span" path="On {instance} and other federated instances">
+ <b slot="instance">{{ config.name }}</b>
+ </i18n>
<b-loading :active.sync="$apollo.loading" />
</p>
<b-loading :active.sync="$apollo.loading" />
@@ -176,7 +178,7 @@
class="container section"
v-if="config && loggedUser && loggedUser.settings"
>
- <section v-if="currentActor.id">
+ <section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
<b-message type="is-info" v-if="welcomeBack">{{
$t("Welcome back {username}!", {
username: currentActor.displayName(),
@@ -189,34 +191,33 @@
}}</b-message>
</section>
<!-- Your upcoming events -->
- <section v-if="canShowMyUpcomingEvents" class="container">
- <h3 class="title">{{ $t("Your upcoming events") }}</h3>
+ <section v-if="canShowMyUpcomingEvents">
+ <h2 class="title">{{ $t("Your upcoming events") }}</h2>
<b-loading :active.sync="$apollo.loading" />
<div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
- <span
+ <p
class="date-component-container"
v-if="isInLessThanSevenDays(row[0])"
>
- <date-component :date="row[0]" />
- <subtitle v-if="isToday(row[0])">{{
+ <span v-if="isToday(row[0])">{{
$tc("You have one event today.", row[1].length, {
count: row[1].length,
})
- }}</subtitle>
- <subtitle v-else-if="isTomorrow(row[0])">{{
+ }}</span>
+ <span v-else-if="isTomorrow(row[0])">{{
$tc("You have one event tomorrow.", row[1].length, {
count: row[1].length,
})
- }}</subtitle>
- <subtitle v-else-if="isInLessThanSevenDays(row[0])">
+ }}</span>
+ <span 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]),
})
}}
- </subtitle>
- </span>
+ </span>
+ </p>
<div>
<EventListCard
v-for="participation in thisWeek(row)"
@@ -232,9 +233,13 @@
>
</span>
</section>
+ <hr
+ class="home-separator"
+ v-if="canShowMyUpcomingEvents && canShowLastWeekEvents"
+ />
<!-- Last week events -->
<section v-if="canShowLastWeekEvents">
- <h3 class="title">{{ $t("Last week") }}</h3>
+ <h2 class="title">{{ $t("Last week") }}</h2>
<b-loading :active.sync="$apollo.loading" />
<div>
<EventListCard
@@ -246,9 +251,13 @@
/>
</div>
</section>
+ <hr
+ class="home-separator"
+ v-if="canShowLastWeekEvents && canShowCloseEvents"
+ />
<!-- Events close to you -->
<section class="events-close" v-if="canShowCloseEvents">
- <h2 class="is-size-2 has-text-weight-bold">
+ <h2 class="title">
{{ $t("Events nearby") }}
</h2>
<p>
@@ -289,11 +298,13 @@
"
/>
<section class="events-recent">
- <h2 class="is-size-2 has-text-weight-bold">
+ <h2 class="title">
{{ $t("Last published events") }}
</h2>
<p>
- {{ $t("On {instance}", { instance: config.name }) }}
+ <i18n tag="span" path="On {instance} and other federated instances">
+ <b slot="instance">{{ config.name }}</b>
+ </i18n>
<b-loading :active.sync="$apollo.loading" />
</p>
@@ -629,20 +640,16 @@ main > div > .container {
.date-component-container {
display: flex;
align-items: center;
- margin: 1.5rem auto;
+ margin: 0.5rem auto 1rem;
h3.subtitle {
margin-left: 7px;
}
}
-section.container {
- margin: auto auto 3rem;
-}
-
span.view-all {
display: block;
- margin-top: 2rem;
+ margin-top: 1rem;
text-align: right;
a {
@@ -688,8 +695,8 @@ section.hero {
}
#recent_events {
- padding: 1rem 0;
- min-height: calc(100vh - 400px);
+ padding: 0;
+ min-height: 20vh;
z-index: 10;
.title {
@@ -697,7 +704,7 @@ section.hero {
}
.columns {
- margin: 0rem auto 3rem;
+ margin: 0 auto;
}
}
@@ -761,4 +768,11 @@ section.hero {
.clickable {
cursor: pointer;
}
+
+.title {
+ font-size: 27px;
+ &:not(:last-child) {
+ margin-bottom: 0.5rem;
+ }
+}
</style>