Compare commits

...

2 commits

Author SHA1 Message Date
johndoe4 96871853d1 Removed some unnecessary stuff 2023-05-22 00:22:45 +02:00
johndoe4 6bcff6d1ae Use Columns and Rows instead of scrolling 2023-05-22 00:21:09 +02:00
2 changed files with 21 additions and 15 deletions

View file

@ -29,21 +29,11 @@
</div> </div>
<div class="overflow-hidden"> <div class="overflow-hidden">
<div <div
class="relative w-full snap-x snap-always snap-mandatory overflow-x-auto flex pb-6 gap-x-5 gap-y-8 p-1" class="multi-card-event"
ref="scrollContainer"
@scroll="scrollHandler"
> >
<slot name="content" /> <slot name="content" />
</div> </div>
</div> </div>
<div class="hidden sm:block" v-show="showScrollRightButton">
<button
@click="scrollRight"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -right-5"
>
<span class="">&gt;</span>
</button>
</div>
</div> </div>
</template> </template>
@ -112,3 +102,19 @@ onUnmounted(() => {
} }
}); });
</script> </script>
<style lang="scss" scoped>
.multi-card-event {
display: grid;
grid-auto-rows: 1fr;
grid-column-gap: 20px;
grid-row-gap: 30px;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
.event-card {
height: 100%;
display: flex;
flex-direction: column;
}
}
</style>

View file

@ -144,9 +144,9 @@
<CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" /> <CloseGroups :userLocation="userLocation" @doGeoLoc="performGeoLocation()" />
<OnlineEvents /> <OnlineEvents />
<UpcomingEvents v-if="instanceName" :instanceName="instanceName" /> <UpcomingEvents v-if="instanceName" :instanceName="instanceName" />
<LastEvents v-if="instanceName" :instanceName="instanceName" /> <!-- <LastEvents v-if="instanceName" :instanceName="instanceName" /> -->
<!-- Unlogged content section --> <!-- Unlogged content section -->
<picture v-if="!currentUser?.isLoggedIn"> <!-- <picture v-if="!currentUser?.isLoggedIn">
<source <source
media="(max-width: 799px)" media="(max-width: 799px)"
:srcset="`/img/pics/homepage-480w.webp`" :srcset="`/img/pics/homepage-480w.webp`"
@ -180,7 +180,7 @@
/> />
</picture> </picture>
<presentation v-if="!currentUser?.isLoggedIn" /> <presentation v-if="!currentUser?.isLoggedIn" />
</template> </template> -->
<script lang="ts" setup> <script lang="ts" setup>
import { ParticipantRole } from "@/types/enums"; import { ParticipantRole } from "@/types/enums";
@ -196,7 +196,7 @@ import { IEvent } from "../types/event.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 CloseGroups from "@/components/Local/CloseGroups.vue"; import CloseGroups from "@/components/Local/CloseGroups.vue";
import LastEvents from "@/components/Local/LastEvents.vue"; // import LastEvents from "@/components/Local/LastEvents.vue";
import UpcomingEvents from "@/components/Local/UpcomingEvents.vue"; import UpcomingEvents from "@/components/Local/UpcomingEvents.vue";
import OnlineEvents from "@/components/Local/OnlineEvents.vue"; import OnlineEvents from "@/components/Local/OnlineEvents.vue";
import { import {