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
98 lines
2.5 KiB
Vue
98 lines
2.5 KiB
Vue
<template>
|
|
<div v-if="!authorizationNeeded">
|
|
<mobile-menu v-if="isMobile" @search="showFuzzySearch"></mobile-menu>
|
|
<splitpanes @resized="onResized($event)">
|
|
<pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
|
|
<side-panel @search="showFuzzySearch"></side-panel>
|
|
</pane>
|
|
<pane min-size="10">
|
|
<splitpanes>
|
|
<pane class="router-view min-h-screen">
|
|
<router-view></router-view>
|
|
</pane>
|
|
<template v-if="!isMobile">
|
|
<pane v-for="other in activeContainers" :key="other.id">
|
|
<log-container
|
|
:id="other.id"
|
|
show-title
|
|
scrollable
|
|
closable
|
|
@close="containerStore.removeActiveContainer(other)"
|
|
></log-container>
|
|
</pane>
|
|
</template>
|
|
</splitpanes>
|
|
</pane>
|
|
</splitpanes>
|
|
<button
|
|
@click="collapse"
|
|
class="btn btn-circle fixed bottom-8 left-4"
|
|
:class="{ '-left-3': collapseNav }"
|
|
v-if="!isMobile"
|
|
>
|
|
<mdi:light-chevron-right v-if="collapseNav" />
|
|
<mdi:light-chevron-left v-else />
|
|
</button>
|
|
</div>
|
|
<dialog ref="modal" class="modal items-start bg-white/20 backdrop:backdrop-blur-sm" @close="open = false">
|
|
<div class="modal-box max-w-2xl bg-transparent pt-20 shadow-none">
|
|
<FuzzySearchModal @close="open = false" v-if="open" />
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop">
|
|
<button>close</button>
|
|
</form>
|
|
</dialog>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
// @ts-ignore - splitpanes types are not available
|
|
import { Splitpanes, Pane } from "splitpanes";
|
|
const { authorizationNeeded } = config;
|
|
|
|
const containerStore = useContainerStore();
|
|
const { activeContainers } = storeToRefs(containerStore);
|
|
|
|
const modal = ref<HTMLDialogElement>();
|
|
const open = ref(false);
|
|
|
|
watch(open, () => {
|
|
if (open.value) {
|
|
modal.value?.showModal();
|
|
} else {
|
|
modal.value?.close();
|
|
}
|
|
});
|
|
|
|
onKeyStroke("k", (e) => {
|
|
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
|
showFuzzySearch();
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
function showFuzzySearch() {
|
|
open.value = true;
|
|
}
|
|
|
|
function collapse() {
|
|
collapseNav.value = !collapseNav.value;
|
|
}
|
|
function onResized(e: any) {
|
|
if (e.length == 2) {
|
|
menuWidth.value = e[0].size;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="postcss">
|
|
:deep(.splitpanes--vertical > .splitpanes__splitter) {
|
|
@apply min-w-[3px] bg-base-lighter hover:bg-secondary;
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.router-view {
|
|
padding-top: 75px;
|
|
}
|
|
}
|
|
</style>
|