nvrl/narl-workspace
1
0 Fork 0
mirror of https://github.com/narrrl/narl-workspace.git synced 2026-11-03 16:41:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

ui fixes

Browse Source
This commit is contained in:
nvrl committed 2026-09-21 15:10:23 +02:00
1 parent 1a37420461
commit 25411ca115
3 files changed
+58 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/App.svelte
+1 -1
View File
@@ -436,7 +436,7 @@
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: minmax(28ch, 34ch) 1fr;
grid-template-columns: minmax(30ch, 22vw) 1fr;
}
.panes.board { grid-template-columns: 1fr; }
web/src/lib/DocumentPane.svelte
+50 -29
View File
@@ -66,32 +66,37 @@
<section class="pane">
<header>
<div class="meta">
<div class="crumb" title="{workspace.here}/{doc.slug}">
<span class="accent">{workspace.here}/{doc.slug}</span>
<span class="faint">{formatStamp(workspace.draft.created_at)} {formatWeekday(workspace.draft.created_at)}</span>
<span class="faint">·</span>
<span class="faint">edited {relative(doc.updated_at)}</span>
<span class="faint">·</span>
<span class="faint">{words} words</span>
{#if workspace.dirty}<span class="warn">[+]</span>{/if}
</div>
<div class="actions">
{#if isTouchDevice}
<button onclick={() => runCommand('q')}>← list</button>
{/if}
{#if workspace.editing}
<button onclick={() => runCommand('w')}>:w</button>
<button onclick={() => runCommand('upload')}>attach</button>
<button onclick={() => runCommand('wq')}>done</button>
{:else}
<button onclick={() => runCommand('e')}>edit</button>
{/if}
<button class:on={doc.shared} onclick={() => runCommand(doc.shared ? 'unshare' : 'share')}>
{doc.shared ? 'unshare' : 'share'}
</button>
<button onclick={() => runCommand('d')}>delete</button>
<button onclick={() => runCommand('q')}>close</button>
<div class="row">
<div class="meta">
<span class="faint">{formatStamp(workspace.draft.created_at)} {formatWeekday(workspace.draft.created_at)}</span>
<span class="faint">·</span>
<span class="faint">edited {relative(doc.updated_at)}</span>
<span class="faint">·</span>
<span class="faint">{words} words</span>
</div>
<div class="actions">
{#if isTouchDevice}
<button onclick={() => runCommand('q')}>← list</button>
{/if}
{#if workspace.editing}
<button onclick={() => runCommand('w')}>:w</button>
<button onclick={() => runCommand('upload')}>attach</button>
<button onclick={() => runCommand('wq')}>done</button>
{:else}
<button onclick={() => runCommand('e')}>edit</button>
{/if}
<button class:on={doc.shared} onclick={() => runCommand(doc.shared ? 'unshare' : 'share')}>
{doc.shared ? 'unshare' : 'share'}
</button>
<button onclick={() => runCommand('d')}>delete</button>
<button onclick={() => runCommand('q')}>close</button>
</div>
</div>
</header>
@@ -158,18 +163,34 @@
header {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: space-between;
flex-direction: column;
gap: 4px;
padding: 6px 12px;
border-bottom: 1px solid var(--line);
flex: none;
}
.meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.warn { color: var(--warn); }
.actions { display: flex; gap: 4px; flex-wrap: wrap; }
.crumb {
display: flex;
align-items: baseline;
gap: 6px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.row {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
min-width: 0;
}
.meta { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; min-width: 0; }
.warn { color: var(--warn); flex: none; }
.actions { display: flex; gap: 4px; flex-wrap: wrap; flex: none; }
.actions .on { color: var(--accent); border-color: var(--accent-dim); }
.sharebar {
web/src/lib/Sidebar.svelte
+7 -3
View File
@@ -165,9 +165,13 @@
.name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The count is short and fixed-width-ish; the space name is the part that
can give way when the sidebar is narrow. */
.count { flex: none; white-space: nowrap; }
.tools { display: flex; gap: 2px; flex: none; }
.tools button { padding: 0 6px; line-height: 18px; }
.count { flex: none; white-space: nowrap; display: none; }
.tools { display: flex; gap: 1px; flex: none; }
.tools button { padding: 0 5px; line-height: 18px; }
@media (min-width: 480px) {
.count { display: inline; }
}
.tools .board { color: var(--accent); }
.tools .board.faint { color: var(--fg-faint); }