Homepage improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-18 19:36:50 +02:00
parent d570f44384
commit 762f917ff7
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 45 additions and 31 deletions

View File

@ -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 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", "Your upcoming events": "Your upcoming events",
"Last published events": "Last published events", "Last published events": "Last published events",
"On {instance}": "On {instance}",
"Events nearby": "Events nearby", "Events nearby": "Events nearby",
"Within {number} kilometers of {place}": "|Within one kilometer of {place}|Within {number} kilometers of {place}", "Within {number} kilometers of {place}": "|Within one kilometer of {place}|Within {number} kilometers of {place}",
"@{username}": "@{username}", "@{username}": "@{username}",
@ -1053,5 +1052,6 @@
"A new version is available.": "A new version is available.", "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.", "An error has occured while refreshing the page.": "An error has occured while refreshing the page.",
"Join group {group}": "Join group {group}", "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"
} }

View File

@ -561,7 +561,6 @@
"On {date} ending at {endTime}": "Le {date}, se terminant à {endTime}", "On {date} ending at {endTime}": "Le {date}, se terminant à {endTime}",
"On {date} from {startTime} to {endTime}": "Le {date} de {startTime} à {endTime}", "On {date} from {startTime} to {endTime}": "Le {date} de {startTime} à {endTime}",
"On {date} starting at {startTime}": "Le {date} à partir de {startTime}", "On {date} starting at {startTime}": "Le {date} à partir de {startTime}",
"On {instance}": "Sur {instance}",
"Ongoing tasks": "Tâches en cours", "Ongoing tasks": "Tâches en cours",
"Only accessible through link": "Accessible uniquement par le lien", "Only accessible through link": "Accessible uniquement par le lien",
"Only accessible through link (private)": "Uniquement accessible par lien (privé)", "Only accessible through link (private)": "Uniquement accessible par lien (privé)",
@ -1144,5 +1143,6 @@
"A new version is available.": "Une nouvelle version est disponible.", "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.", "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}", "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"
} }

View File

@ -52,11 +52,13 @@
v-if="config && (!currentUser.id || !currentActor.id)" v-if="config && (!currentUser.id || !currentActor.id)"
> >
<section class="events-recent"> <section class="events-recent">
<h2 class="is-size-2 has-text-weight-bold"> <h2 class="title">
{{ $t("Last published events") }} {{ $t("Last published events") }}
</h2> </h2>
<p> <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" /> <b-loading :active.sync="$apollo.loading" />
</p> </p>
<b-loading :active.sync="$apollo.loading" /> <b-loading :active.sync="$apollo.loading" />
@ -176,7 +178,7 @@
class="container section" class="container section"
v-if="config && loggedUser && loggedUser.settings" 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">{{ <b-message type="is-info" v-if="welcomeBack">{{
$t("Welcome back {username}!", { $t("Welcome back {username}!", {
username: currentActor.displayName(), username: currentActor.displayName(),
@ -189,34 +191,33 @@
}}</b-message> }}</b-message>
</section> </section>
<!-- Your upcoming events --> <!-- Your upcoming events -->
<section v-if="canShowMyUpcomingEvents" class="container"> <section v-if="canShowMyUpcomingEvents">
<h3 class="title">{{ $t("Your upcoming events") }}</h3> <h2 class="title">{{ $t("Your upcoming events") }}</h2>
<b-loading :active.sync="$apollo.loading" /> <b-loading :active.sync="$apollo.loading" />
<div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]"> <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
<span <p
class="date-component-container" class="date-component-container"
v-if="isInLessThanSevenDays(row[0])" v-if="isInLessThanSevenDays(row[0])"
> >
<date-component :date="row[0]" /> <span v-if="isToday(row[0])">{{
<subtitle v-if="isToday(row[0])">{{
$tc("You have one event today.", row[1].length, { $tc("You have one event today.", row[1].length, {
count: row[1].length, count: row[1].length,
}) })
}}</subtitle> }}</span>
<subtitle v-else-if="isTomorrow(row[0])">{{ <span v-else-if="isTomorrow(row[0])">{{
$tc("You have one event tomorrow.", row[1].length, { $tc("You have one event tomorrow.", row[1].length, {
count: row[1].length, count: row[1].length,
}) })
}}</subtitle> }}</span>
<subtitle v-else-if="isInLessThanSevenDays(row[0])"> <span v-else-if="isInLessThanSevenDays(row[0])">
{{ {{
$tc("You have one event in {days} days.", row[1].length, { $tc("You have one event in {days} days.", row[1].length, {
count: row[1].length, count: row[1].length,
days: calculateDiffDays(row[0]), days: calculateDiffDays(row[0]),
}) })
}} }}
</subtitle>
</span> </span>
</p>
<div> <div>
<EventListCard <EventListCard
v-for="participation in thisWeek(row)" v-for="participation in thisWeek(row)"
@ -232,9 +233,13 @@
> >
</span> </span>
</section> </section>
<hr
class="home-separator"
v-if="canShowMyUpcomingEvents && canShowLastWeekEvents"
/>
<!-- Last week events --> <!-- Last week events -->
<section v-if="canShowLastWeekEvents"> <section v-if="canShowLastWeekEvents">
<h3 class="title">{{ $t("Last week") }}</h3> <h2 class="title">{{ $t("Last week") }}</h2>
<b-loading :active.sync="$apollo.loading" /> <b-loading :active.sync="$apollo.loading" />
<div> <div>
<EventListCard <EventListCard
@ -246,9 +251,13 @@
/> />
</div> </div>
</section> </section>
<hr
class="home-separator"
v-if="canShowLastWeekEvents && canShowCloseEvents"
/>
<!-- Events close to you --> <!-- Events close to you -->
<section class="events-close" v-if="canShowCloseEvents"> <section class="events-close" v-if="canShowCloseEvents">
<h2 class="is-size-2 has-text-weight-bold"> <h2 class="title">
{{ $t("Events nearby") }} {{ $t("Events nearby") }}
</h2> </h2>
<p> <p>
@ -289,11 +298,13 @@
" "
/> />
<section class="events-recent"> <section class="events-recent">
<h2 class="is-size-2 has-text-weight-bold"> <h2 class="title">
{{ $t("Last published events") }} {{ $t("Last published events") }}
</h2> </h2>
<p> <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" /> <b-loading :active.sync="$apollo.loading" />
</p> </p>
@ -629,20 +640,16 @@ main > div > .container {
.date-component-container { .date-component-container {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 1.5rem auto; margin: 0.5rem auto 1rem;
h3.subtitle { h3.subtitle {
margin-left: 7px; margin-left: 7px;
} }
} }
section.container {
margin: auto auto 3rem;
}
span.view-all { span.view-all {
display: block; display: block;
margin-top: 2rem; margin-top: 1rem;
text-align: right; text-align: right;
a { a {
@ -688,8 +695,8 @@ section.hero {
} }
#recent_events { #recent_events {
padding: 1rem 0; padding: 0;
min-height: calc(100vh - 400px); min-height: 20vh;
z-index: 10; z-index: 10;
.title { .title {
@ -697,7 +704,7 @@ section.hero {
} }
.columns { .columns {
margin: 0rem auto 3rem; margin: 0 auto;
} }
} }
@ -761,4 +768,11 @@ section.hero {
.clickable { .clickable {
cursor: pointer; cursor: pointer;
} }
.title {
font-size: 27px;
&:not(:last-child) {
margin-bottom: 0.5rem;
}
}
</style> </style>