Homepage cards improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2022-08-16 13:59:37 +02:00
parent 754e44f0a5
commit 6e7359aebf
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
6 changed files with 103 additions and 91 deletions

View File

@ -1,9 +1,9 @@
<template> <template>
<router-link <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 } }" :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
> >
<div class="bg-secondary"> <div class="bg-secondary rounded-lg">
<figure class="block relative pt-40"> <figure class="block relative pt-40">
<lazy-image-wrapper <lazy-image-wrapper
:picture="event.picture" :picture="event.picture"
@ -35,7 +35,7 @@
</div> </div>
</figure> </figure>
</div> </div>
<div class="h-full p-2"> <div class="p-2">
<div class="relative flex flex-col h-full"> <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"> <div class="-mt-3 h-0 flex mb-3 ltr:ml-0 rtl:mr-0 items-end self-start">
<date-calendar-icon <date-calendar-icon

View File

@ -1,11 +1,13 @@
<template> <template>
<div class="relative pt-10 px-2"> <div class="relative pt-10 px-2">
<div class="w-full flex flex-wrap gap-3 mb-2 items-center"> <div class="mb-2">
<h1 <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" class="text-xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
> >
<slot name="title" /> <slot name="title" />
</h1> </h2>
<button <button
v-if="suggestGeoloc && isIPLocation" 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" 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") }} {{ t("Geolocate me") }}
</button> </button>
</div> </div>
<slot name="subtitle" />
</div>
<div class="hidden sm:block" v-show="showScrollLeftButton"> <div class="hidden sm:block" v-show="showScrollLeftButton">
<button <button
@click="scrollLeft" @click="scrollLeft"
@ -24,7 +28,7 @@
</div> </div>
<div class="overflow-hidden"> <div class="overflow-hidden">
<div <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" ref="scrollContainer"
@scroll="scrollHandler" @scroll="scrollHandler"
> >
@ -99,7 +103,7 @@ const scrollRight = (e: Event) => {
}; };
const scrollHorizontalToVertical = (evt: WheelEvent) => { const scrollHorizontalToVertical = (evt: WheelEvent) => {
evt.deltaY > 0 ? doScroll(evt, 600) : doScroll(evt, -600); evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
}; };
onMounted(async () => { onMounted(async () => {

View 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>

View File

@ -60,12 +60,11 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from "vue"; import { computed } from "vue";
import { RouteLocationNormalizedLoaded } from "vue-router";
import { CategoryPictureLicencing } from "../Categories/constants"; import { CategoryPictureLicencing } from "../Categories/constants";
const props = defineProps<{ const props = defineProps<{
to: { name: string; query: Record<string, string> }; to: { name: string; query: Record<string, string> };
picture: CategoryPictureLicencing & { url: string }; picture?: CategoryPictureLicencing & { url: string };
}>(); }>();
const imageAuthor = computed( const imageAuthor = computed(

View File

@ -216,77 +216,9 @@
> >
</span> </span>
</section> </section>
<hr
role="presentation"
class="home-separator"
v-if="canShowFollowedGroupEvents"
/>
<!-- Events close to you --> <CloseEvents @doGeoLoc="performGeoLocation()" />
<!-- <section class="events-close" v-if="canShowCloseEvents && radius"> <LastEvents :instanceName="config.name" class="mb-10" />
<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()" />
</div> </div>
</div> </div>
</template> </template>
@ -314,6 +246,7 @@ import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model"; import { IConfig } from "../types/config.model";
// import { IFollowedGroupEvent } from "../types/followedGroupEvent.model"; // import { IFollowedGroupEvent } from "../types/followedGroupEvent.model";
import CloseEvents from "@/components/Local/CloseEvents.vue"; import CloseEvents from "@/components/Local/CloseEvents.vue";
import LastEvents from "@/components/Local/LastEvents.vue";
import { computed, onMounted, reactive, watch } from "vue"; import { computed, onMounted, reactive, watch } from "vue";
import { useMutation, useQuery } from "@vue/apollo-composable"; import { useMutation, useQuery } from "@vue/apollo-composable";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";

View File

@ -540,7 +540,7 @@ const searchVariables = reactive({
groupPage: groupPage, groupPage: groupPage,
limit: EVENT_PAGE_LIMIT, limit: EVENT_PAGE_LIMIT,
type: type.value === "" ? undefined : type, type: type.value === "" ? undefined : type,
eventCategory: eventCategory, category: eventCategory,
}); });
const { const {