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

Beginning the mobile UI

This commit is contained in:
Peaceultime 2024-08-26 16:57:29 +02:00
parent da610022b4
commit cc095af0c4
8 changed files with 54 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app.vue
View File

@ -10,7 +10,7 @@ const toggled = ref(false);
<div class="gapx-3 flex align-stretch">
<NuxtLink class="site-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }"><ThemeIcon icon="logo" :width=40 :height=40 /></NuxtLink>
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }" :class="{ 'mod-active': $route.path.startsWith('/editing') }">Editeur</NuxtLink>
<NuxtLink class="site-nav-bar-text mobile-hidden" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
</div>
</div>
<div class="mobile-bigger"><SearchView /></div>
@ -19,7 +19,16 @@ const toggled = ref(false);
<NuxtLink class="site-login" :to="{ path: '/user/profile', force: true }"><ThemeIcon icon="user" :width=32 :height=32 /></NuxtLink>
</div>
</div>
<NuxtLayout ref="layout"><NuxtPage/></NuxtLayout>
<NuxtLayout ref="layout">
<template #mobile>
<div class="mobile-nav-bar">
<NuxtLink class="mobile-nav-bar-text" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
<NuxtLink class="mobile-nav-bar-text" aria-label="Projets" :to="{ path: `/explorer`, force: true }" active-class="mod-active">Projets</NuxtLink>
<NuxtLink class="mobile-nav-bar-text" aria-label="Editeur" :to="{ path: '/editing', force: true }" active-class="mod-active">Editeur</NuxtLink>
</div>
</template>
<NuxtPage/>
</NuxtLayout>
<div class="site-footer">
<p>Copyright Peaceultime - 2024</p>
<NuxtLink :to="{ path: '/third-party', force: true }">Applications tierces et crédits</NuxtLink>

13
assets/common.css
View File

@ -385,3 +385,16 @@ html.light-mode .light-block {
display: inline-block;
vertical-align: sub;
}
.mobile-nav-bar {
display: flex;
flex-direction: column;
margin: 0.5em;
}
.mobile-nav-bar-text {
padding: .25em;
font-size: larger;
color: var(--text-color);
font-weight: bolder;
}

8
components/explorer/ExplorerNavigation.vue
View File

@ -12,17 +12,9 @@ if(!isNaN(project.value))
</script>
<template>
<div class="site-body-left-column">
<div class="site-body-left-column-inner">
<div class="nav-view-outer">
<div class="nav-view">
<div class="tree-item">
<div class="tree-item-children">
<NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>

BIN
db.sqlite Normal file
View File

Binary file not shown.

11
layouts/default.vue
View File

@ -6,6 +6,17 @@ defineExpose({
<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>
</div>
</div>
<slot />
</div>
</template>

11
layouts/explorer.vue
View File

@ -6,7 +6,18 @@ defineExpose({
<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>
</div>
</div>
<slot></slot>
</div>
</template>

1
server/api/project/[projectId]/comment.get.ts
View File

@ -1,4 +1,5 @@
import useDatabase from '~/composables/useDatabase';
import { Comment } from '~/types/api';
export default defineEventHandler(async (e) => {
const project = getRouterParam(e, "projectId");

4
server/api/project/[projectId]/navigation.get.ts
View File

@ -1,6 +1,8 @@
import useDatabase from '~/composables/useDatabase';
import { Navigation } from '~/types/api';
type NavigatioNExtension = Navigation & { owner: number, navigable: boolean };
export default defineEventHandler(async (e) => {
const project = getRouterParam(e, "projectId");
const { user } = await getUserSession(e);
@ -13,7 +15,7 @@ export default defineEventHandler(async (e) => {
const db = useDatabase();
const content = db.query(`SELECT "path", "title", "type", "order", "private", "navigable", "owner" FROM explorer_files WHERE project = ?1`).all(project!).sort((a: any, b: any) => a.path.length - b.path.length) as Navigation[];
const content = db.query(`SELECT "path", "title", "type", "order", "private", "navigable", "owner" FROM explorer_files WHERE project = ?1`).all(project!).sort((a: any, b: any) => a.path.length - b.path.length) as NavigatioNExtension[];
if(content.length > 0)
{