mirror/mobilizon
1
0
Fork 0
mirror of https://framagit.org/framasoft/mobilizon.git synced 2024-12-22 07:52:43 +00:00
Code Issues Releases Wiki Activity

feat(front): change horizontal scroll to grid view. closes #1456

Browse source
This commit is contained in:
setop 2024-09-09 16:23:54 +02:00
parent 18c78b81cb
commit cdf6caab51
1 changed files with 5 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/components/Local/CloseContent.vue
View file

@ -19,36 +19,16 @@
</div> </div>
<slot name="subtitle" /> <slot name="subtitle" />
</div> </div>
<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 ml-2"
>
<span class="">&lt;</span>
</button>
</div>
<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="grid auto-rows-[1fr] gap-x-2 gap-y-2 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))] justify-items-center"
ref="scrollContainer"
@scroll="scrollHandler"
> >
<slot name="content" /> <slot name="content" />
</div> </div>
</div> </div>
<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 mr-2"
>
<span class="">&gt;</span>
</button>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
withDefaults( withDefaults(
@ -62,57 +42,4 @@ withDefaults(
const emit = defineEmits(["doGeoLoc"]); const emit = defineEmits(["doGeoLoc"]);
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
const showScrollRightButton = ref(false);
const showScrollLeftButton = ref(false);
const scrollContainer = ref<any>();
const scrollHandler = () => {
if (scrollContainer.value) {
showScrollRightButton.value =
scrollContainer.value.scrollLeft <
scrollContainer.value.scrollWidth - scrollContainer.value.clientWidth;
showScrollLeftButton.value = scrollContainer.value.scrollLeft > 0;
}
};
const doScroll = (e: Event, left: number) => {
e.preventDefault();
if (scrollContainer.value) {
scrollContainer.value.scrollBy({
left,
behavior: "smooth",
});
}
};
const scrollLeft = (e: Event) => {
doScroll(e, -300);
};
const scrollRight = (e: Event) => {
doScroll(e, 300);
};
const scrollHorizontalToVertical = (evt: WheelEvent) => {
evt.deltaY > 0 ? doScroll(evt, 300) : doScroll(evt, -300);
};
onMounted(async () => {
// Make sure everything is mounted properly
setTimeout(() => {
scrollHandler();
}, 1500);
scrollContainer.value.addEventListener("wheel", scrollHorizontalToVertical);
});
onUnmounted(() => {
if (scrollContainer.value) {
scrollContainer.value.removeEventListener(
"wheel",
scrollHorizontalToVertical
);
}
});
</script> </script>