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/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>