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

Progressing on the CSS rework

Browse Source
This commit is contained in:
Peaceultime
2024-08-28 18:14:19 +02:00
parent d1450a1c99
commit c694d28982
26 changed files with 386 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
layouts/default.vue
View File

@@ -1,22 +1,23 @@
<script setup lang="ts">
defineExpose({
navigation: false,
});
</script>
<template>
<div class="site-body">
<div class="site-body-left-column desktop-hidden mobile-block">
<div class="site-body-left-column-inner">
<div class="nav-view-outer">
<div class="nav-view">
<div class="mobile-slot">
<slot name="mobile"></slot>
</div>
</div>
<div class="bg-light-0 my-8 dark:bg-dark-0 px-6 py-3 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-col gap-4 overflow-auto">
<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>
<div class="flex gap-4 items-center">
<ThemeSwitch />
<NuxtLink class="" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
</div>
</div>
<div class="flex-auto"><SearchView /></div>
<NuxtLink class="px-6 text-lg 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 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>
<slot />
<div class="text-center text-sm 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>
</div>
<div class="flex-1 flex items-baseline overflow-auto">
<slot></slot>
</div>
</template>

34
layouts/explorer.vue
View File

@@ -1,23 +1,25 @@
<script setup lang="ts">
defineExpose({
navigation: true,
});
</script>
<template>
<div class="site-body">
<div class="site-body-left-column">
<div class="site-body-left-column-inner">
<div class="nav-view-outer">
<div class="nav-view">
<div class="mobile-slot desktop-hidden mobile-block">
<slot name="mobile"></slot>
</div>
<ExplorerNavigation></ExplorerNavigation>
</div>
<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 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>
<div class="flex gap-4 items-center">
<ThemeSwitch />
<NuxtLink 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>
<hr class="border-light-35 dark:border-dark-35"/>
<ExplorerNavigation></ExplorerNavigation>
</div>
<div class="text-center text-sm 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>
</div>
<div class="flex-1 flex items-baseline overflow-auto">
<slot></slot>
</div>
</template>