From 0882eb1dd09c6ccc6f7044428c50805d9bc7682d Mon Sep 17 00:00:00 2001
From: Peaceultime <clem31470@gmail.com>
Date: Sun, 10 Nov 2024 23:45:53 +0100
Subject: [PATCH] Add collapsible properties to editor splitter for better
 mobile accessibility

---
 db.sqlite-shm                    | Bin 32768 -> 32768 bytes
 db.sqlite-wal                    | Bin 444992 -> 510912 bytes
 pages/explore/edit/[...path].vue |  12 ++++++------
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/db.sqlite-shm b/db.sqlite-shm
index 5124e33a17596f063fbd9288ae7df09706a751ed..1d6738928c294ba736d238a7d11e70f9108aeefa 100644
GIT binary patch
delta 195
zcmZo@U}|V!s+V}A%K!obK+FiFYJhYe5C=!D@d!)HT5G*~%8_pyuP}eTpWm7IK<+xJ
z>VZaq0m$6{NB}C##E`SGaXaJ01rD1nm}>kde+j%Gp9^$AK0^URAwv;EF+&MMDMJ}U
aIYR|QB|{ZMHABs2N2aS1n|EY;hyVcI|3QBM

delta 164
zcmZo@U}|V!s+V}A%K!p=K+MR%Admy3^MH8r=IRsEd@Ltg@1Anx+r}%*-c@&VzVFhK
xBUL@nC@=t-`yUBFg_#)QHa2c&++4v_<3D)<lf&dMffqJ6F@2HPyd&E~1ORr(Irsno

diff --git a/db.sqlite-wal b/db.sqlite-wal
index e88fa41052fbfb73341bcf3770cd15e4eee8e696..a6363dfb988d7281d55b332131a3d3bb4098556b 100644
GIT binary patch
delta 534
zcmX>wMf$*W`Gyw87N!>F7M2#)Eo=^_Bp4VN*nl|CdiRtg-!@)hX0>pdE|a`BYjc3W
zKYl5b5_I_wjq_elyC=L3Dqo5&ufNm!yzjBjMNs)NborjGy3KP{WZIze_2}|x-_E)_
zu{z9x$~U6R$8qXLZ}(}HgUUCd%OCZb^WW@tMi5lK6J6eNZcXt{v)N@(`7U&MlZ^|$
zhwlA$3MxMZU4A`B$LaS|WBZ`;Q_<z0=Fis;7P-U(kvDTim%sPqLUQ4mpJ`C}9&~vw
zzqQNPO!EH)m0yW2Uw<jlx;@6{A5?xby8H>2P4Qe++crVvx1h^=tceU>o0S#@mS-~C
F1^~KM%X|O;

delta 21
ccmX>wUH-rn>4p}@7N!>F7M2#)Eo=^_09@Gz%>V!Z

diff --git a/pages/explore/edit/[...path].vue b/pages/explore/edit/[...path].vue
index 0ca8d48..103e4fb 100644
--- a/pages/explore/edit/[...path].vue
+++ b/pages/explore/edit/[...path].vue
@@ -4,8 +4,8 @@
             <Title>Modification de {{ page.title }}</Title>
         </Head>
         <div class="flex flex-col xl:flex-row xl:justify-between justify-center items-center w-full px-4 pb-4 border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0">
-            <input type="text" v-model="page.title" placeholder="Titre" class="flex-1 mx-4 h-16 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
-            <div class="flex gap-4 self-end xl:self-auto">
+            <input type="text" v-model="page.title" placeholder="Titre" class="flex-1 mx-4 h-16 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
+            <div class="flex gap-4 self-end xl:self-auto flex-wrap">
                 <Tooltip message="Consultable uniquement par le propriétaire" side="bottom"><Switch label="Privé" v-model="page.private" /></Tooltip>
                 <Tooltip message="Afficher dans le menu de navigation" side="bottom"><Switch label="Navigable" v-model="page.navigable" /></Tooltip>
                 <Button @click="() => save()" :loading="saveStatus === 'pending'" class="border-light-blue dark:border-dark-blue hover:border-light-blue dark:hover:border-dark-blue focus:shadow-light-blue dark:focus:shadow-dark-blue">Enregistrer</Button>
@@ -14,12 +14,12 @@
         <div class="my-4 flex-1 w-full max-h-full flex">
             <template v-if="page.type === 'markdown'">
                 <SplitterGroup direction="horizontal" class="flex-1 w-full flex">
-                    <SplitterPanel asChild>
-                        <textarea v-model="page.content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto"></textarea>
+                    <SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
+                        <textarea v-model="page.content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }"></textarea>
                     </SplitterPanel>
                     <SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
-                    <SplitterPanel asChild>
-                        <div class="flex-1 max-h-full !overflow-y-auto px-8"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
+                    <SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
+                        <div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
                     </SplitterPanel>
                 </SplitterGroup>
             </template>