Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive design

Browse Source
This commit is contained in:
Peaceultime
2024-09-02 17:28:30 +02:00
parent 35d356ae22
commit 175f6c3fcb
7 changed files with 92 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/SearchView.vue
View File

@@ -6,6 +6,8 @@ const pos = ref<DOMRect>(), loading = ref(false);
let timeout: NodeJS.Timeout;
const emit = defineEmits(['navigate']);
function search(e: Event)
{
pos.value = (e.currentTarget as HTMLElement)?.getBoundingClientRect();
@@ -50,7 +52,7 @@ async function debounced()
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.projects" :key="result.id"
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
@mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''">
@mousedown.prevent="navigateTo(`/explorer/${result.id}/${result.home}`); input = ''; emit('navigate');">
<div class="">
<BoldContent class="text-lg" :text="result.name" :matched="input" />
<div class="flex justify-between text-sm">
@@ -62,7 +64,7 @@ async function debounced()
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.files" :key="result.id"
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
@mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''">
@mousedown.prevent="navigateTo(`/explorer/${result.project}/${result.path}`); input = ''; emit('navigate');">
<div class="">
<BoldContent class="text-lg" :text="result.title" :matched="input" />
<div class="flex justify-between text-sm">
@@ -74,7 +76,7 @@ async function debounced()
<div class="cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25 px-4 py-1 " v-for="result of results.users" :key="result.id"
@mouseenter="(e) => (e.target as HTMLElement).classList.add('is-selected')"
@mouseleave="(e) => (e.target as HTMLElement).classList.remove('is-selected')"
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''">
@mousedown.prevent="navigateTo(`/user/${result.id}`); input = ''; emit('navigate');">
<div class="">
<BoldContent class="text-lg" :text="result.username" :matched="input" />
</div>

6
components/canvas/CanvasRenderer.vue
View File

@@ -224,10 +224,10 @@ dark:border-dark-purple
<template>
<Suspense>
<template #default>
<div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart.passive="onTouchStart"
@dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full"
<div id="canvas" @pointerdown="onPointerDown" @wheel.passive="onWheel" @touchstart="onTouchStart"
@dragstart.prevent="" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
:style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute top-2 left-2 z-[100] overflow-hidden">
<div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-30 overflow-hidden">
<div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer"
aria-label="Zoom in" data-tooltip-position="left">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"

8
components/explorer/ExplorerNavigation.vue
View File

@@ -1,20 +1,20 @@
<script setup lang="ts">
const route = useRoute();
const project = computed(() => parseInt(route.params.projectId as string));
const { data: navigation, refresh } = await useLazyFetch(() => `/api/project/${project.value}/navigation`, { immediate: false });
if(!isNaN(project.value))
{
await refresh();
}
const emit = defineEmits(['navigate']);
</script>
<template>
<div class="relative flex-auto">
<div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto px-4">
<NavigationLink class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
<div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto xl:px-4 px-2">
<NavigationLink @navigate="e => emit('navigate')" class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
</div>
</div>
</template>

8
components/explorer/NavigationLink.vue
View File

@@ -12,6 +12,8 @@ const hasChildren = computed(() => {
});
const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.path));
const emit = defineEmits(['navigate']);
</script>
<template>
@@ -24,13 +26,13 @@ const collapsed = ref(!unifySlug(useRoute().params.slug).startsWith(props.link.p
<path d="M3 8L12 17L21 8"></path>
</svg>
</div>
<div class="font-semibold">{{ link.title }}</div>
<div class="font-semibold xl:text-base text-sm">{{ link.title }}</div>
</div>
<div v-if="!collapsed">
<NavigationLink class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
<NavigationLink @navigate="e => emit('navigate')" class="border-light-40 dark:border-dark-40 ms-2 ps-4 border-l" v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
</div>
</template>
<NuxtLink v-else class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
<NuxtLink v-else @click="e => emit('navigate')" class="text-light-100 dark:text-dark-100 cursor-pointer hover:text-opacity-75 xl:text-base text-sm" :to="{ path: `/explorer/${project}/${link.path}`, force: true }"
active-class="!text-accent-blue relative before:border-l-2 before:border-accent-blue before:absolute before:-top-1 before:-bottom-1 before:-left-4 before:-mx-px" :data-type="(link.type === 'Canvas' ? 'graph' : (link.private ? 'privé' : undefined))">
<div class="">{{ link.title }}</div>
</NuxtLink>

2
components/prose/ProseA.vue
View File

@@ -55,7 +55,7 @@ const { data, status } = await useFetch(`/api/project/${project.value}/file`, {
@apply text-sm;
@apply px-1;
@apply ms-1;
@apply py-1;
@apply pb-0.5;
@apply rounded-full;
@apply rounded-se-none;
@apply border;