mirror
/
mobilizon
mirror of https://framagit.org/framasoft/mobilizon.git
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(front): fix homepage event and groups cards snapping 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2023-05-30 16:13:44 +02:00
parent e0488dd87f
commit 8809db582c
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
3 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/src/components/Event/EventCard.vue
View File

@ -3,7 +3,7 @@
class="mbz-card snap-center dark:bg-mbz-purple"
:class="{
'sm:flex sm:items-start': mode === 'row',
'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',
'sm:max-w-xs w-[18rem] shrink-0 flex flex-col': mode === 'column',
}"
:to="to"
:isInternal="isInternal"
@ -119,8 +119,8 @@
{{
t(
"{count} participants",
event.participantStats?.participant,
{ count: event.participantStats?.participant }
{ count: event.participantStats?.participant },
event.participantStats?.participant
)
}}
</mobilizon-tag>

4
js/src/components/Group/GroupCard.vue
View File

@ -2,10 +2,10 @@
<LinkOrRouterLink
:to="to"
:isInternal="isInternal"
class="mbz-card shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col"
class="mbz-card snap-center shrink-0 dark:bg-mbz-purple dark:text-white rounded-lg shadow-lg flex items-center flex-col"
:class="{
'sm:flex-row': mode === 'row',
'sm:max-w-xs sm:w-[18rem] shrink-0 flex flex-col': mode === 'column',
'sm:max-w-xs w-[18rem] shrink-0 flex flex-col': mode === 'column',
}"
>
<div class="flex-none p-2 md:p-4">

14
js/src/components/Local/CloseContent.vue
View File

@ -19,10 +19,10 @@
</div>
<slot name="subtitle" />
</div>
<div class="hidden sm:block" v-show="showScrollLeftButton">
<div class="" v-show="showScrollLeftButton">
<button
@click="scrollLeft"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5"
class="absolute inset-y-0 my-auto z-10 rounded-full bg-white dark:bg-transparent w-10 h-10 border border-shadowColor -left-5 ml-2"
>
<span class="">&lt;</span>
</button>
@ -36,10 +36,10 @@
<slot name="content" />
</div>
</div>
<div class="hidden sm:block" v-show="showScrollRightButton">
<div class="" 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"
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 mr-2"
>
<span class="">&gt;</span>
</button>
@ -63,7 +63,7 @@ const emit = defineEmits(["doGeoLoc"]);
const { t } = useI18n({ useScope: "global" });
const showScrollRightButton = ref(true);
const showScrollRightButton = ref(false);
const showScrollLeftButton = ref(false);
const scrollContainer = ref<any>();
@ -100,6 +100,10 @@ const scrollHorizontalToVertical = (evt: WheelEvent) => {
};
onMounted(async () => {
// Make sure everything is mounted properly
setTimeout(() => {
scrollHandler();
}, 1500);
scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
});