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

Responsive design

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
Show Stats 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;

36
layouts/default.vue
View File

@ -1,18 +1,37 @@
<script setup lang="ts">
const container = ref<HTMLElement>();
function toggleNavigation(bool?: boolean)
{
container.value?.setAttribute('aria-expanded', bool === undefined ? (container.value?.getAttribute('aria-expanded') !== 'true').toString() : bool.toString());
}
</script>
<template>
<div class="bg-light-0 my-8 py-3 dark:bg-dark-0 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
<div class="relative bottom-6 flex flex-1 flex-col gap-4 px-6">
<div ref="container" aria-expanded="false" class="group flex flex-1 h-screen overflow-hidden">
<div class="z-50 sm:hidden block absolute top-0 left-0 p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25" @click="e => toggleNavigation()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 fill-light-100 dark:fill-dark-100">
<line x1="21" y1="6" x2="3" y2="6"></line>
<line x1="15" y1="12" x2="3" y2="12"></line>
<line x1="17" y1="18" x2="3" y2="18"></line>
</svg>
</div>
<div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
<div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
<div class="flex justify-between items-center">
<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
<NuxtLink @click="e => toggleNavigation(false)" class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
<div class="flex gap-4 items-center">
<ThemeSwitch />
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
<NuxtLink @click="e => toggleNavigation(false)" class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
</div>
</div>
<div class="flex"><SearchView /></div>
<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
<div class="flex"><SearchView @navigate="e => toggleNavigation(false)" /></div>
<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
</div>
<div class="text-center text-sm text-light-70 dark:text-dark-70">
<div class="text-center xl:text-sm text-xs text-light-70 dark:text-dark-70">
<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
<p>Copyright Peaceultime - 2024</p>
</div>
@ -20,4 +39,5 @@
<div class="flex-1 flex items-baseline overflow-auto p-8 relative">
<slot></slot>
</div>
</div>
</template>

38
layouts/explorer.vue
View File

@ -1,20 +1,39 @@
<script setup lang="ts">
const container = ref<HTMLElement>();
function toggleNavigation(bool?: boolean)
{
container.value?.setAttribute('aria-expanded', bool === undefined ? (container.value?.getAttribute('aria-expanded') !== 'true').toString() : bool.toString());
}
</script>
<template>
<div class="bg-light-0 my-8 py-3 dark:bg-dark-0 top-0 z-40 w-96 lg:z-50 border-r border-light-30 dark:border-dark-30 flex flex-col justify-between">
<div class="relative bottom-6 flex flex-1 flex-col gap-4 px-6">
<div ref="container" aria-expanded="false" class="group flex flex-1 h-screen overflow-hidden">
<div class="z-50 sm:hidden block absolute top-0 left-0 p-2 border-e border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0 cursor-pointer hover:bg-light-25 dark:hover:bg-dark-25" @click="e => toggleNavigation()">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-4 h-4 fill-light-100 dark:fill-dark-100">
<line x1="21" y1="6" x2="3" y2="6"></line>
<line x1="15" y1="12" x2="3" y2="12"></line>
<line x1="17" y1="18" x2="3" y2="18"></line>
</svg>
</div>
<div class="bg-light-0 sm:my-8 sm:py-3 dark:bg-dark-0 top-0 z-40 xl:w-96 sm:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-sm:absolute max-sm:-top-0 max-sm:-bottom-0 sm:left-0 max-sm:-left-full max-sm:group-aria-expanded:left-0 max-sm:transition-[left] py-8 max-sm:z-40">
<div class="relative bottom-6 flex flex-1 flex-col gap-4 xl:px-6 px-3">
<div class="flex justify-between items-center">
<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
<NuxtLink @click="e => toggleNavigation(false)" class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-sm:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon class="inline" icon="logo" :width=56 :height=56 /></NuxtLink>
<div class="flex gap-4 items-center">
<ThemeSwitch />
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
<NuxtLink @click="e => toggleNavigation(false)" class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
</div>
</div>
<div class="flex"><SearchView /></div>
<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
<NuxtLink class="px-6 text-lg tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
<div class="flex"><SearchView @navigate="e => toggleNavigation(false)" /></div>
<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Projets" :to="{ path: `/explorer`, force: true }">Projets</NuxtLink>
<NuxtLink @click="e => toggleNavigation(false)" class="xl:px-6 px-3 text-lg xl:tracking-wider flex items-center font-semibold text-light-100 dark:text-dark-100 hover:text-opacity-70" aria-label="Editeur" :to="{ path: '/editing', force: true }">Editeur</NuxtLink>
<hr class="border-light-35 dark:border-dark-35"/>
<ExplorerNavigation></ExplorerNavigation>
<ExplorerNavigation @navigate="e => toggleNavigation(false)"></ExplorerNavigation>
</div>
<div class="text-center text-sm text-light-70 dark:text-dark-70">
<div class="text-center xl:text-sm text-xs text-light-70 dark:text-dark-70">
<NuxtLink class="hover:underline italic" :to="{ path: '/third-party', force: true }">Mentions légales</NuxtLink>
<p>Copyright Peaceultime - 2024</p>
</div>
@ -22,4 +41,5 @@
<div class="flex-1 flex items-baseline overflow-auto p-8 relative">
<slot></slot>
</div>
</div>
</template>