Homepage cards improvements
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
754e44f0a5
commit
6e7359aebf
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<router-link
|
||||
class="mbz-card max-w-xs"
|
||||
class="mbz-card max-w-xs shrink-0 w-[18rem] snap-center"
|
||||
:to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
|
||||
>
|
||||
<div class="bg-secondary">
|
||||
<div class="bg-secondary rounded-lg">
|
||||
<figure class="block relative pt-40">
|
||||
<lazy-image-wrapper
|
||||
:picture="event.picture"
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="h-full p-2">
|
||||
<div class="p-2">
|
||||
<div class="relative flex flex-col h-full">
|
||||
<div class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-start">
|
||||
<date-calendar-icon
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
<template>
|
||||
<div class="relative pt-10 px-2">
|
||||
<div class="w-full flex flex-wrap gap-3 mb-2 items-center">
|
||||
<h1
|
||||
<div class="mb-2">
|
||||
<div class="w-full flex flex-wrap gap-3 items-center">
|
||||
<h2
|
||||
class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
|
||||
>
|
||||
<slot name="title" />
|
||||
</h1>
|
||||
</h2>
|
||||
|
||||
<button
|
||||
v-if="suggestGeoloc && isIPLocation"
|
||||
class="inline-flex bg-primary rounded text-white flex-initial px-4 py-2 justify-center w-full md:w-min whitespace-nowrap"
|
||||
|
|
@ -14,6 +16,8 @@
|
|||
{{ t("Geolocate me") }}
|
||||
</button>
|
||||
</div>
|
||||
<slot name="subtitle" />
|
||||
</div>
|
||||
<div class="hidden sm:block" v-show="showScrollLeftButton">
|
||||
<button
|
||||
@click="scrollLeft"
|
||||
|
|
@ -24,7 +28,7 @@
|
|||
</div>
|
||||
<div class="overflow-hidden">
|
||||
<div
|
||||
class="relative w-full snap-x overflow-x-auto pb-6 grid auto-rows-[1fr] gap-x-5 gap-y-8 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))]"
|
||||
class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8"
|
||||
ref="scrollContainer"
|
||||
@scroll="scrollHandler"
|
||||
>
|
||||
|
|
@ -99,7 +103,7 @@ const scrollRight = (e: Event) => {
|
|||
};
|
||||
|
||||
const scrollHorizontalToVertical = (evt: WheelEvent) => {
|
||||
evt.deltaY > 0 ? doScroll(evt, 600) : doScroll(evt, -600);
|
||||
evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
|
|
|
|||
76
js/src/components/Local/LastEvents.vue
Normal file
76
js/src/components/Local/LastEvents.vue
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<close-content
|
||||
v-show="loadingEvents || (events && events.total > 0)"
|
||||
:suggestGeoloc="false"
|
||||
v-on="attrs"
|
||||
>
|
||||
<template #title>
|
||||
{{ t("Last published events") }}
|
||||
</template>
|
||||
<template #subtitle>
|
||||
<i18n-t
|
||||
class="text-slate-700 dark:text-slate-300"
|
||||
tag="p"
|
||||
keypath="On {instance} and other federated instances"
|
||||
>
|
||||
<template #instance>
|
||||
<b>{{ instanceName }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</template>
|
||||
<template #content>
|
||||
<skeleton-event-result
|
||||
v-for="i in 6"
|
||||
class="scroll-ml-6 snap-center shrink-0 w-[18rem] my-4"
|
||||
:key="i"
|
||||
v-show="loadingEvents"
|
||||
/>
|
||||
<event-card
|
||||
v-for="event in events.elements"
|
||||
:event="event"
|
||||
:key="event.uuid"
|
||||
/>
|
||||
<more-content
|
||||
:to="{
|
||||
name: 'SEARCH',
|
||||
query: {
|
||||
contentType: 'EVENTS',
|
||||
},
|
||||
}"
|
||||
>
|
||||
{{ t("View more events") }}
|
||||
</more-content>
|
||||
</template>
|
||||
</close-content>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import MoreContent from "./MoreContent.vue";
|
||||
import CloseContent from "./CloseContent.vue";
|
||||
import { computed, useAttrs } from "vue";
|
||||
import { IEvent } from "@/types/event.model";
|
||||
import { useQuery } from "@vue/apollo-composable";
|
||||
import EventCard from "../Event/EventCard.vue";
|
||||
import { Paginate } from "@/types/paginate";
|
||||
import SkeletonEventResult from "../Event/SkeletonEventResult.vue";
|
||||
import { EventSortField, SortDirection } from "@/types/enums";
|
||||
import { FETCH_EVENTS } from "@/graphql/event";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
defineProps<{
|
||||
instanceName: string;
|
||||
}>();
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
const attrs = useAttrs();
|
||||
|
||||
const { result: resultEvents, loading: loadingEvents } = useQuery<{
|
||||
events: Paginate<IEvent>;
|
||||
}>(FETCH_EVENTS, {
|
||||
orderBy: EventSortField.INSERTED_AT,
|
||||
direction: SortDirection.DESC,
|
||||
});
|
||||
const events = computed(
|
||||
() => resultEvents.value?.events ?? { total: 0, elements: [] }
|
||||
);
|
||||
</script>
|
||||
|
|
@ -60,12 +60,11 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
import { RouteLocationNormalizedLoaded } from "vue-router";
|
||||
import { CategoryPictureLicencing } from "../Categories/constants";
|
||||
|
||||
const props = defineProps<{
|
||||
to: { name: string; query: Record<string, string> };
|
||||
picture: CategoryPictureLicencing & { url: string };
|
||||
picture?: CategoryPictureLicencing & { url: string };
|
||||
}>();
|
||||
|
||||
const imageAuthor = computed(
|
||||
|
|
|
|||
|
|
@ -216,77 +216,9 @@
|
|||
>
|
||||
</span>
|
||||
</section>
|
||||
<hr
|
||||
role="presentation"
|
||||
class="home-separator"
|
||||
v-if="canShowFollowedGroupEvents"
|
||||
/>
|
||||
|
||||
<!-- Events close to you -->
|
||||
<!-- <section class="events-close" v-if="canShowCloseEvents && radius">
|
||||
<h2 class="title">
|
||||
{{ $t("Events nearby") }}
|
||||
</h2>
|
||||
<p>
|
||||
{{
|
||||
$t("Within {number} kilometers of {place}", {
|
||||
radius,
|
||||
place: locationName,
|
||||
}, radius)
|
||||
}}
|
||||
<router-link
|
||||
:to="{ name: RouteName.PREFERENCES }"
|
||||
:title="$t('Change')"
|
||||
>
|
||||
<o-icon class="clickable" icon="pencil" size="small" />
|
||||
</router-link>
|
||||
</p>
|
||||
<multi-card :events="closeEvents.elements.slice(0, 4)" />
|
||||
</section> -->
|
||||
<hr
|
||||
role="presentation"
|
||||
class="home-separator"
|
||||
v-if="canShowMyUpcomingEvents"
|
||||
/>
|
||||
<section class="events-recent px-2">
|
||||
<h2 class="dark:text-white text-2xl font-bold">
|
||||
{{ $t("Last published events") }}
|
||||
</h2>
|
||||
<p class="mb-3">
|
||||
<i18n-t
|
||||
class="text-slate-700 dark:text-slate-300"
|
||||
tag="span"
|
||||
keypath="On {instance} and other federated instances"
|
||||
>
|
||||
<template #instance>
|
||||
<b>{{ config.name }}</b>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</p>
|
||||
|
||||
<div v-if="events && events.total > 0">
|
||||
<multi-card :events="events.elements.slice(0, 8)" />
|
||||
<span
|
||||
class="block mt-2 text-right underline text-slate-700 dark:text-slate-300"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: RouteName.SEARCH }"
|
||||
class="hover:text-slate-800 hover:dark:text-slate-400"
|
||||
>{{ $t("View everything") }} >></router-link
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<o-notification v-else variant="danger"
|
||||
>{{ $t("No events found") }}<br />
|
||||
<div v-if="goingToEvents.size > 0">
|
||||
<InformationOutline :size="16" />
|
||||
<small>{{
|
||||
$t("The events you created are not shown here.")
|
||||
}}</small>
|
||||
</div>
|
||||
</o-notification>
|
||||
</section>
|
||||
<close-events @doGeoLoc="performGeoLocation()" />
|
||||
<CloseEvents @doGeoLoc="performGeoLocation()" />
|
||||
<LastEvents :instanceName="config.name" class="mb-10" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -314,6 +246,7 @@ import { CONFIG } from "../graphql/config";
|
|||
import { IConfig } from "../types/config.model";
|
||||
// import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
|
||||
import CloseEvents from "@/components/Local/CloseEvents.vue";
|
||||
import LastEvents from "@/components/Local/LastEvents.vue";
|
||||
import { computed, onMounted, reactive, watch } from "vue";
|
||||
import { useMutation, useQuery } from "@vue/apollo-composable";
|
||||
import { useRouter } from "vue-router";
|
||||
|
|
|
|||
|
|
@ -540,7 +540,7 @@ const searchVariables = reactive({
|
|||
groupPage: groupPage,
|
||||
limit: EVENT_PAGE_LIMIT,
|
||||
type: type.value === "" ? undefined : type,
|
||||
eventCategory: eventCategory,
|
||||
category: eventCategory,
|
||||
});
|
||||
|
||||
const {
|
||||
|
|
|
|||
Loading…
Reference in a new issue