mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 13:23:07 +01:00
9f3a256334
* feat: moves to tailwindcss and better component library * update styles * creates toggle component * adds drop down component * cleans up components * removes unused components * uses tailwind for scroll view * removes table component * improves animation * cleans up more styles * uses more tailwind * cleans up more styles with flex * more styles * removes bulma * adds colors * updates modules * fixes bugs * stops importing styles.scss * more clean up * cleans up headers * cleans up title * fixes title * fixes mobile-hidden * fixes shadow * fixes colors * add tailwindcss/nesting * adds more colors * fixes more colors * updates colors * fixes colors * colors * fixes menu on left * menu and modal * menu and modal * fuzzy search * fixes menu on left * remove logs * cleans up search * adds host to search * remove outline from inputs * cleans up left search icon * removes unused styles * fixes docker * removes sass! * cleans up styles * Fixe smobile menu * fixes mobile menu * fixes typecheck * fixes seconday color * adds drop down for container * cleans header css * updates css * fixes other layouts * updates some tests * fixes border * fixes home screen font * fixes top header * fixes tests * fixes fieldlist * fixes complex * cleans up more * removes index * fixes tests * fixes tests * resolves conflicts
94 lines
2.6 KiB
Vue
94 lines
2.6 KiB
Vue
<template>
|
|
<section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
|
|
<header
|
|
v-if="$slots.header"
|
|
class="sticky top-[70px] z-[2] border-b border-base-content/10 bg-base py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
|
|
>
|
|
<slot name="header"></slot>
|
|
</header>
|
|
<main :data-scrolling="scrollable ? true : undefined" class="snap-y overflow-auto">
|
|
<div class="invisible mr-28 text-right md:visible" v-show="paused">
|
|
<scroll-progress :indeterminate="loading" :auto-hide="!loading" class="z-2 !fixed top-16" />
|
|
</div>
|
|
<div ref="scrollableContent">
|
|
<slot :setLoading="setLoading"></slot>
|
|
</div>
|
|
|
|
<div ref="scrollObserver" class="h-px"></div>
|
|
</main>
|
|
|
|
<div class="mr-16 text-right">
|
|
<transition name="fade">
|
|
<button
|
|
class="fixed bottom-8 rounded bg-primary p-3 text-primary-content shadow transition-colors hover:bg-primary-focus"
|
|
:class="hasMore ? 'animate-bounce-fast bg-secondary text-secondary-content hover:bg-secondary-focus' : ''"
|
|
@click="scrollToBottom()"
|
|
v-show="paused"
|
|
>
|
|
<mdi:light-chevron-double-down />
|
|
</button>
|
|
</transition>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
|
|
|
|
let paused = $ref(false);
|
|
let hasMore = $ref(false);
|
|
let loading = $ref(false);
|
|
const scrollObserver = ref<HTMLElement>();
|
|
const scrollableContent = ref<HTMLElement>();
|
|
|
|
provide("scrollingPaused", $$(paused));
|
|
|
|
const mutationObserver = new MutationObserver((e) => {
|
|
if (!paused) {
|
|
scrollToBottom();
|
|
} else {
|
|
const record = e[e.length - 1];
|
|
const children = (record.target as HTMLElement).children;
|
|
if (children[children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
|
|
hasMore = true;
|
|
}
|
|
}
|
|
});
|
|
|
|
const intersectionObserver = new IntersectionObserver((entries) => (paused = entries[0].intersectionRatio == 0), {
|
|
threshold: [0, 1],
|
|
rootMargin: "80px 0px",
|
|
});
|
|
|
|
onMounted(() => {
|
|
mutationObserver.observe(scrollableContent.value!, { childList: true, subtree: true });
|
|
intersectionObserver.observe(scrollObserver.value!);
|
|
});
|
|
|
|
function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
|
|
scrollObserver.value?.scrollIntoView({ behavior });
|
|
hasMore = false;
|
|
}
|
|
|
|
function setLoading(value: boolean) {
|
|
loading = value;
|
|
}
|
|
</script>
|
|
<style scoped lang="postcss">
|
|
.fade-enter-active,
|
|
.fade-leave-active {
|
|
@apply transition-opacity;
|
|
}
|
|
|
|
.fade-enter-from,
|
|
.fade-leave-to {
|
|
@apply opacity-0;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
.splitpanes__pane {
|
|
overflow: unset !important;
|
|
}
|
|
</style>
|