css improvements

frontend/src/routes/wiki/View.svelte

@@ -11,6 +11,7 @@
     import PermissionEditor  from '../../Components/PermissionEditor.svelte';
     import TagList           from '../tags/TagList.svelte';
 
+    let detail = $state(false);
     let error = $state(null);
     let { key, version } = $props();
     let page = $state(null);
@@ -95,6 +96,10 @@
         router.navigate(`/wiki/${page.id}/view`);
     }
 
+    function toggleDetail(){
+        detail = !detail;
+    }
+
     async function updatePermission(uid, newPerm){
         let newMembers = JSON.parse(JSON.stringify(page.members));
         newMembers[uid] = {permission:newPerm};
@@ -107,40 +112,47 @@
 <span class="error">{error}</span>
 {/if}
 {#if page}
-<span class="version">{t('version')}</span>
-{#each page.versions as v}
-<span class="version">
-    <a href={`/wiki/${page.id}/version/${v}`} {onclick} class={page.version == v?'selected':''}>{v}</a>    &nbsp;
-</span>
-{/each}
-<LineEditor value={page.title} type="h2" {editable} onSet={t => patchTitle(t)} />
-{#if page.version != page.versions[0]}
-<span class="warn">{t('not_recent_version')}</span>
-{/if}
-<MarkdownEditor {editable} value={page.content} onSet={s => patch({content:s})} />
-{#if editable}
-<PermissionEditor members={page.members} {addMember} {dropMember} {getCandidates} {updatePermission} />
-{:else}
-<table>
-    <thead>
+<div class="wiki page">
+    <div class="versions">
+        <span class="version">{t('version')}</span>
+        {#each page.versions as v}
+        <span class="version">
+            <a href={`/wiki/${page.id}/version/${v}`} {onclick} class={page.version == v?'selected':''}>{v}</a>    &nbsp;
+        </span>
+        {/each}
+    </div>
+    <LineEditor value={page.title} type="h2" {editable} onSet={t => patchTitle(t)} />
+    {#if page.version != page.versions[0]}
+    <span class="warn">{t('not_recent_version')}</span>
+    {/if}
+    <button onclick={toggleDetail} class="symbol" title={t('toggle_objects',{objects:t('users')})}></button>
+    {#if detail}
+    {#if editable}
+    <PermissionEditor members={page.members} {addMember} {dropMember} {getCandidates} {updatePermission} />
+    {:else}
+    <table>
+        <thead>
         <tr>
             <th>{t('user')}</th>
             <th>{t('permissions')}</th>
         </tr>
-    </thead>
-    <tbody>
+        </thead>
+        <tbody>
         {#each Object.values(page.members) as member,id}
         <tr>
             <td>{member.user.name}</td>
             <td>{t('permission_'+member.permission.name.toLowerCase())}</td>
         </tr>
         {/each}
-    </tbody>
-</table>
-{/if}
-<TagList module="wiki" id={page.id} user_list={Object.keys(page.members).map(id => +id)} />
-<div class="notes">
-    <h3>{t('notes')}</h3>
-    <Notes module="wiki" entity_id={page.id} />
+        </tbody>
+    </table>
+    {/if}
+    {/if}
+    <MarkdownEditor {editable} value={page.content} onSet={s => patch({content:s})} />
+    <TagList module="wiki" id={page.id} user_list={Object.keys(page.members).map(id => +id)} />
+    <div class="notes">
+        <h3>{t('notes')}</h3>
+        <Notes module="wiki" entity_id={page.id} />
+    </div>
 </div>
 {/if}

translations/src/main/resources/de.json

@@ -248,6 +248,7 @@
   "timetracking": "Zeiterfassung",
   "title_not_available": "„{title}“ ist als Seitenname nicht mehr verfügbar!",
   "title_or_desc": "Titel/Beschreibung",
+  "toggle_objects": "{objects} an/ausschalten",
   "tutorial": "Tutorial",
   "type": "Dokumententyp",
   "type_confirmation": "Bestätigung",

web/src/main/resources/web/css/default.css

@@ -386,3 +386,7 @@ table{
     border: 1px solid orange;
     border-radius: 5px;
 }
+
+.wiki.page h2{
+    display: inline-block;
+}