From e4016dee4492bd775a2a566e4af709812bd714bd Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Sun, 21 Sep 2025 00:34:47 +0200
Subject: [PATCH] working on grid display for most important content

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>
---
 frontend/src/App.svelte                 |   1 +
 frontend/src/routes/tags/TagList.svelte |   6 +-
 frontend/src/routes/task/View.svelte    | 257 ++++++++++--------------
 3 files changed, 108 insertions(+), 156 deletions(-)

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 3406257..ec51fe9 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -52,6 +52,7 @@
 
     async function testGuard({to, from, next}){
         await checkUser();
+        window.scrollTo(0,0);
         next();
     }
 
diff --git a/frontend/src/routes/tags/TagList.svelte b/frontend/src/routes/tags/TagList.svelte
index b5735f0..e2c7ca4 100644
--- a/frontend/src/routes/tags/TagList.svelte
+++ b/frontend/src/routes/tags/TagList.svelte
@@ -91,12 +91,12 @@
 {/if}
 
 <div class="taglist">
-    <span class="tag editor">
-        <input type="text" bind:value={newTag} onkeyup={typed} />
-    </span>
     {#each tags as tag,idx}
     <span class="tag">
         <span onclick={() => show(tag)}>{tag}</span>&nbsp;<button onclick={() => drop(tag)} class="symbol"></button>
     </span>
     {/each}
+    <span class="tag editor">
+        <input type="text" bind:value={newTag} onkeyup={typed} />
+    </span>
 </div>
diff --git a/frontend/src/routes/task/View.svelte b/frontend/src/routes/task/View.svelte
index c1e7d2f..259ecf6 100644
--- a/frontend/src/routes/task/View.svelte
+++ b/frontend/src/routes/task/View.svelte
@@ -181,161 +181,112 @@
 <span class="error">{error}</span>
 {/if}
 {#if task}
-<table class="task">
-    <tbody>
-        {#if project}
-        <tr>
-            <th>{t('project')}</th>
-            <td class="project">
-                <a href="#" onclick={gotoProject}>{project.name}</a>
-            </td>
-        </tr>
-        {/if}
-        {#if task.parent}
-        <tr>
-            <th>{t('parent_task')}</th>
-            <td class="parent">
-                <a href="#" onclick={gotoParent}>{task.parent.name}</a>
-            </td>
-        </tr>
-        {/if}
-        <tr>
-            <th>{t('task')}</th>
-            <td class="name">
-                <LineEditor bind:value={task.name} editable={true} onSet={val => update({name:val})} />
-                <button class="symbol" title={t('settings')} onclick={toggleSettings}></button>
-                <button class="symbol" title={t('timetracking')} onclick={addTime}></button>
-
-            </td>
-        </tr>
-        <tr>
-            <th>{t('state')}</th>
-            <td>
-                <StateSelector selected={task.status} onchange={val => update({status:val})} {project} />
-            </td>
-        </tr>
-        {#if task.description}
-        <tr>
-            <th>{t('description')}</th>
-            <td class="description">
-                <MarkdownEditor bind:value={task.description} editable={true} onSet={val => update({description:val})} />
-            </td>
-        </tr>
-        {/if}
+<div class="task grid2">
+    {#if project}
+    <div>{t('project')}</div>
+    <div class="project">
+        <a href="#" onclick={gotoProject}>{project.name}</a>
+    </div>
+    {/if}
+    {#if task.parent}
+    <div>{t('parent_task')}</div>
+    <div class="parent">
+        <a href="#" onclick={gotoParent}>{task.parent.name}</a>
+    </div>
+    {/if}
+    <div>{t('task')}</div>
+    <div class="name">
+        <LineEditor bind:value={task.name} editable={true} onSet={val => update({name:val})} />
+        <button class="symbol" title={t('settings')} onclick={toggleSettings}></button>
+        <button class="symbol" title={t('timetracking')} onclick={addTime}></button>
+    </div>
+    <div>{t('state')}</div>
+    <div>
+        <StateSelector selected={task.status} onchange={val => update({status:val})} {project} />
+    </div>
+    {#if task.description}
+    <div>{t('description')}</div>
+    <div class="description">
+        <MarkdownEditor bind:value={task.description} editable={true} onSet={val => update({description:val})} />
+    </div>
+    {/if}
+    {#if task.start_date}
+        <div>{t('start_date')}</div>
+        <div class="start date">{task.start_date}</div>
+    {/if}
+    {#if task.due_date}
+        <div>{t('due_date')}</div>
+        <div class="due date">{task.due_date}</div>
+    {/if}
+    {#if task.estimated_time}
+        <div>{t('estimated_time')}</div>
+        <div class="estimated time">{task.estimated_time} h</div>
+    {/if}
+    <div>{t('members')}</div>
+    <div class="members">
+        <ul>
+            {#each Object.values(task.members) as member}
+            <li>{member.user.name} ({t('permission_'+member.permission.name.toLowerCase())})</li>
+            {/each}
+        </ul>
+    </div>
+    {#if showSettings}
+        <div>{t('extended_settings')}</div>
+        <label>
+            <input type="checkbox" bind:checked={task.show_closed} onchange={updateClosed} />
+            {t('display_closed_tasks')}
+        </label>
 
-        {#if task.start_date}
-        <tr>
-            <th>{t('start_date')}</th>
-            <td class="start date">{task.start_date}</td>
-        </tr>
-        {/if}
-        {#if task.due_date}
-        <tr>
-            <th>{t('due_date')}</th>
-            <td class="due date">{task.due_date}</td>
-        </tr>
-        {/if}
-        {#if task.estimated_time}
-        <tr>
-            <th>{t('estimated_time')}</th>
-            <td class="estimated time">{task.estimated_time} h</td>
-        </tr>
-        {/if}
-        <tr>
-            <th>{t('members')}</th>
-            <td class="members">
-                <ul>
-                    {#each Object.values(task.members) as member}
-                    <li>{member.user.name} ({t('permission_'+member.permission.name.toLowerCase())})</li>
-                    {/each}
-                </ul>
-            </td>
-        </tr>
-        {#if showSettings}
-        <tr>
-            <th>
-                {t('extended_settings')}
-            </th>
-            <td>
-                <label>
-                    <input type="checkbox" bind:checked={task.show_closed} onchange={updateClosed} />
-                    {t('display_closed_tasks')}
-                </label>
-            </td>
-        </tr>
-        <tr>
-            <td></td>
-            <td>
-                <label>
-                    <input type="checkbox" bind:checked={task.no_index} onchange={updateNoIndex} />
-                    {t('hide_on_index_page')}
-                </label>
-            </td>
-        </tr>
-        <tr>
-            <th>
-                {t('members')}
-            </th>
-            <td>
-                <PermissionEditor members={task.members} {updatePermission} {addMember} {dropMember} {getCandidates} />
-            </td>
-        </tr>
-        <tr>
-            <th>
-                {t('start_date')}
-            </th>
-            <td>
-                <input type="date" bind:value={task.start_date} onchange={() => update({start_date:task.start_date})} />
-            </td>
-        </tr>
-        <tr>
-            <th>
-                {t('due_date')}
-            </th>
-            <td>
-                <input type="date" bind:value={task.due_date} onchange={() => update({due_date:task.due_date})} />
-            </td>
-        </tr>
-        <tr>
-            <th>
-                {t('estimated_time')}
-            </th>
-            <td>
-                <input type="number" bind:value={task.estimated_time} onchange={() => update({estimated_time:task.estimated_time})} />&nbsp;h
-            </td>
-        </tr>
-        <tr>
-            <th>
-                {t('depends_on')}
-            </th>
-            <td>
-                <RequiredTasks {task} />
-            </td>
-        </tr>
+        <div></div>
+        <label>
+            <input type="checkbox" bind:checked={task.no_index} onchange={updateNoIndex} />
+            {t('hide_on_index_page')}
+        </label>
+
+        <div>{t('members')}</div>
+        <div>
+            <PermissionEditor members={task.members} {updatePermission} {addMember} {dropMember} {getCandidates} />
+        </div>
+
+        <div>{t('start_date')}</div>
+        <div>
+            <input type="date" bind:value={task.start_date} onchange={() => update({start_date:task.start_date})} />
+        </div>
+
+        <div>{t('due_date')}</div>
+        <div>
+            <input type="date" bind:value={task.due_date} onchange={() => update({due_date:task.due_date})} />
+        </div>
+
+        <div>{t('estimated_time')}</div>
+        <div>
+            <input type="number" bind:value={task.estimated_time} onchange={() => update({estimated_time:task.estimated_time})} />&nbsp;h
+        </div>
+
+        <div>{t('depends_on')}</div>
+        <div>
+            <RequiredTasks {task} />
+        </div>
+    {/if}
+
+    <div>
+        {t('subtasks')}
+        <button onclick={addChild} >{t('add_object',{object:t('subtask')})}</button>
+    </div>
+    <div class="children">
+        {#if children}
+        <TaskList states={project?.allowed_states} tasks={children} {estimated_time} show_closed={task.show_closed} />
         {/if}
-        <tr>
-            <th>
-                {t('subtasks')}
-                <button onclick={addChild} >{t('add_object',{object:t('subtask')})}</button>
-            </th>
-            <td class="children">
-                {#if children}
-                <TaskList states={project?.allowed_states} tasks={children} {estimated_time} show_closed={task.show_closed} />
-                {/if}
-            </td>
-        </tr>
-        <tr>
-            <th>
-                {t('tags')}
-            </th>
-            <td class="tags">
-                <TagList module="task" {id} user_list={Object.keys(task.members).map(id => +id)} />
-            </td>
-        </tr>
-    </tbody>
-</table>
-{/if}
-<div class="notes">
+    </div>
+
+    <div>{t('tags')}</div>
+    <div class="tags">
+        <TagList module="task" {id} user_list={Object.keys(task.members).map(id => +id)} />
+    </div>
     <h3>{t('notes')}</h3>
+    <div>
     <Notes module="task" entity_id={id} />
+    </div>
 </div>
+{/if}
+