simplified base structure:

startpage shows up to 161 events sorted by date,
"explore" and "view everything" renamed to "filter"
This commit is contained in:
jona 2023-03-22 20:35:00 +01:00
parent ebc486f9ca
commit 045c0a8521
3 changed files with 127 additions and 17 deletions

View file

@ -1,7 +1,7 @@
<template>
<b-navbar
id="navbar"
type="is-bleuvert"
type="is-secondary"
wrapper-class="container"
:active.sync="mobileNavbarActive"
>
@ -16,7 +16,7 @@
</template>
<template slot="start">
<b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
$t("Explore")
$t("Filter")
}}</b-navbar-item>
<b-navbar-item
v-if="currentActor.id && currentUser.isLoggedIn"
@ -344,7 +344,7 @@ nav {
}
&.is-active {
background: #1d1d1d;
background: $secondary;
}
span.icon.is-medium {

View file

@ -31,7 +31,7 @@
v-if="config.registrationsOpen"
>{{ $t("Create an account") }}</b-button
>
<!-- We don't invite to find other instances yet -->
<!-- We don't invite to find other instances yet chnage for commit-->
<!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
<b-button
type="is-text"
@ -51,18 +51,26 @@
>
<section class="events-recent">
<h2 class="title">
{{ $t("Last published events") }}
{{ $t("Upcoming events") }}
</h2>
<p>
<i18n tag="span" path="On {instance} and other federated instances">
<b slot="instance">{{ config.name }}</b>
</i18n>
</p>
<div v-if="this.events.total > 0">
<multi-card :events="events.elements.slice(0, 6)" />
<div v-if="events.elements.length > 0">
<multi-card class="my-4" :events="events.elements" />
<div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
<b-pagination
:total="events.total"
v-model="featuredEventPage"
:per-page="EVENT_PAGE_LIMIT"
>
</b-pagination>
</div>
<span class="view-all">
<router-link :to="{ name: RouteName.SEARCH }"
>{{ $t("View everything") }} >></router-link
>{{ $t("Filter") }} >></router-link
>
</span>
</div>
@ -71,6 +79,104 @@
}}</b-message>
</section>
</div>
<div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
<div class="picture-container">
<picture>
<source
media="(max-width: 799px)"
srcset="/img/pics/homepage-480w.webp"
type="image/webp"
/>
<source
media="(max-width: 799px)"
srcset="/img/pics/homepage-480w.jpg"
type="image/jpeg"
/>
<source
media="(max-width: 1024px)"
srcset="/img/pics/homepage-1024w.webp"
type="image/webp"
/>
<source
media="(max-width: 1024px)"
srcset="/img/pics/homepage-1024w.jpg"
type="image/jpeg"
/>
<source
media="(max-width: 1920px)"
srcset="/img/pics/homepage-1920w.webp"
type="image/webp"
/>
<source
media="(max-width: 1920px)"
srcset="/img/pics/homepage-1920w.jpg"
type="image/jpeg"
/>
<source
media="(min-width: 1921px)"
srcset="/img/pics/homepage.webp"
type="image/webp"
/>
<source
media="(min-width: 1921px)"
srcset="/img/pics/homepage.jpg"
type="image/jpeg"
/>
<img
src="/img/pics/homepage-1024w.jpg"
width="3840"
height="2719"
alt=""
loading="lazy"
/>
</picture>
</div>
<div class="container section">
<div class="columns">
<div class="column">
<h3 class="title">{{ $t("A practical tool") }}</h3>
<p
v-html="
$t(
'Mobilizon is a tool that helps you <b>find, create and organise events</b>.'
)
"
/>
</div>
<div class="column">
<h3 class="title">{{ $t("An ethical alternative") }}</h3>
<p
v-html="
$t(
'Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.'
)
"
/>
</div>
<div class="column">
<h3 class="title">{{ $t("A federated software") }}</h3>
<p
v-html="
$t(
'Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.'
)
"
/>
</div>
</div>
<div class="buttons">
<a
class="button is-primary is-large"
href="https://joinmobilizon.org"
>{{ $t("Learn more about Mobilizon") }}</a
>
</div>
</div>
</div>
<div class="container section" v-if="config && loggedUserSettings">
<section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
<b-message type="is-info" v-if="welcomeBack">{{
@ -191,7 +297,7 @@
/>
<section class="events-recent">
<h2 class="title">
{{ $t("Last published events") }}
{{ $t("Upcoming events") }}
</h2>
<p>
<i18n tag="span" path="On {instance} and other federated instances">
@ -200,10 +306,10 @@
</p>
<div v-if="events.total > 0">
<multi-card :events="events.elements.slice(0, 8)" />
<multi-card :events="events.elements" />
<span class="view-all">
<router-link :to="{ name: RouteName.SEARCH }"
>{{ $t("View everything") }} >></router-link
>{{ $t("Filter") }} >></router-link
>
</span>
</div>
@ -247,13 +353,16 @@ import { IConfig } from "../types/config.model";
import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
import Subtitle from "../components/Utils/Subtitle.vue";
const EVENT_PAGE_LIMIT = 99;
@Component({
apollo: {
events: {
query: FETCH_EVENTS,
variables: {
orderBy: EventSortField.INSERTED_AT,
direction: SortDirection.DESC,
orderBy: EventSortField.BEGINS_ON,
direction: SortDirection.ASC,
limit: EVENT_PAGE_LIMIT,
},
},
currentActor: {
@ -565,6 +674,7 @@ section.hero {
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
z-index: -1;
background: url("../../public/img/pics/homepage_background-1024w.png");
background-size: cover;

View file

@ -1,6 +1,6 @@
<template>
<div class="section container">
<h1 class="title">{{ $t("Explore") }}</h1>
<!-- <h1 class="title">{{ $t("Explore") }}</h1> -->
<section v-if="tag">
<i18n path="Events tagged with {tag}">
<b-tag slot="tag" type="is-light">{{ $t("#{tag}", { tag }) }}</b-tag>
@ -125,7 +125,7 @@
v-if="!canSearchEvents && !canSearchGroups"
>
<b-loading :active.sync="$apollo.loading"></b-loading>
<h2 class="title">{{ $t("Featured events") }}</h2>
<!-- <h2 class="title">{{ $t("Featured events") }}</h2> -->
<div v-if="events.elements.length > 0">
<multi-card class="my-4" :events="events.elements" />
<div class="pagination" v-if="events.total > EVENT_PAGE_LIMIT">
@ -255,9 +255,9 @@ interface ISearchTimeOption {
end?: Date | null;
}
const EVENT_PAGE_LIMIT = 12;
const EVENT_PAGE_LIMIT = 99;
const GROUP_PAGE_LIMIT = 12;
const GROUP_PAGE_LIMIT = 99;
const DEFAULT_RADIUS = 25; // value to set if radius is null but location set