simplified base structure:
startpage shows up to 161 events sorted by date, "explore" and "view everything" renamed to "filter"
This commit is contained in:
parent
ebc486f9ca
commit
045c0a8521
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue