tommy/mobilizon
1
0
Fork 0
forked from potsda.mn/mobilizon
Code Pull requests Activity

Use Columns and Rows instead of scrolling

Browse source
This commit is contained in:
johndoe4 2023-05-22 00:21:09 +02:00
parent 7127b0da28
commit 6bcff6d1ae
1 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
js/src/components/Local/CloseContent.vue
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>