Fix journal entry layout scrolling
This commit is contained in:
Scott Idem
@@ -13,14 +13,12 @@ import { FilePlus, Notebook, SquareLibrary, X } from '@lucide/svelte';
|
||||
import { liveQuery } from 'dexie';
|
||||
|
||||
import { db_journals } from '$lib/ae_journals/db_journals';
|
||||
import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
|
||||
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
|
||||
import {
|
||||
journals_loc,
|
||||
journals_sess,
|
||||
journals_slct
|
||||
} from '$lib/ae_journals/ae_journals_stores';
|
||||
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
|
||||
import type { ae_JournalEntry } from '$lib/types/ae_types';
|
||||
|
||||
import Journal_entry_obj_qry from './../ae_comp__journal_entry_obj_qry.svelte';
|
||||
|
||||
@@ -85,12 +83,11 @@ $effect(() => {
|
||||
class="
|
||||
ae_journals__journal
|
||||
mx-auto
|
||||
flex max-h-max min-h-full max-w-max
|
||||
min-w-full
|
||||
grow
|
||||
flex w-full max-w-none min-w-0
|
||||
flex-col
|
||||
items-center
|
||||
items-stretch
|
||||
gap-1
|
||||
min-h-0
|
||||
space-y-2
|
||||
">
|
||||
<div
|
||||
@@ -200,7 +197,12 @@ Middle-click to open in new tab`}>
|
||||
.length}× Recent Entries...
|
||||
</option>
|
||||
<!-- loop through each key value -->
|
||||
{#each Object.entries($journals_loc.entry_view_history_kv as Record<string, any>).reverse() as [journal_entry_id, journal_entry_obj] (journal_entry_id)}
|
||||
{#each Object.entries(
|
||||
$journals_loc.entry_view_history_kv as Record<
|
||||
string,
|
||||
{ id: string; name: string; url: string }
|
||||
>
|
||||
).reverse() as [journal_entry_id, journal_entry_obj] (journal_entry_id)}
|
||||
<option value={journal_entry_obj.id}>
|
||||
{(journal_entry_obj?.name ||
|
||||
journal_entry_obj?.id) ??
|
||||
@@ -316,7 +318,7 @@ Middle-click to open in new tab`}>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="overflow-auto">
|
||||
<div class="w-full min-w-0">
|
||||
{@render children?.()}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -273,7 +273,7 @@ $effect(() => {
|
||||
class="
|
||||
ae_journals__journal_entry
|
||||
mx-auto
|
||||
flex w-full max-w-6xl min-w-0
|
||||
flex w-full max-w-none min-w-0
|
||||
grow
|
||||
flex-col
|
||||
items-stretch
|
||||
|
||||
@@ -67,23 +67,23 @@ function toggle_edit_mode() {
|
||||
</script>
|
||||
|
||||
<header
|
||||
class="flex w-full flex-col items-center justify-between gap-4 rounded-xl
|
||||
class="flex w-full flex-wrap items-center gap-3 rounded-xl
|
||||
border border-gray-200
|
||||
bg-gray-50 p-3 shadow-sm
|
||||
md:flex-row dark:border-gray-700 dark:bg-gray-800">
|
||||
<div class="flex w-full items-center gap-3 md:w-auto">
|
||||
dark:border-gray-700 dark:bg-gray-800">
|
||||
<div class="flex min-w-0 flex-[1_1_0%] items-center gap-3">
|
||||
<a
|
||||
href="/journals/{journal.journal_id}"
|
||||
class="btn-icon btn-icon-sm preset-tonal-surface"
|
||||
class="btn-icon btn-icon-sm preset-tonal-surface transition-colors duration-150"
|
||||
title="Back to Journal">
|
||||
<ChevronLeft size="1.2em" />
|
||||
</a>
|
||||
|
||||
<div class="flex grow items-center gap-2">
|
||||
<div class="flex min-w-0 flex-1 items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onclick={toggle_edit_mode}
|
||||
class="btn-icon btn-icon-sm transition-all {has_changed &&
|
||||
class="btn-icon btn-icon-sm transition-colors duration-150 {has_changed &&
|
||||
$journals_loc.entry.edit_kv[entry.journal_entry_id] ===
|
||||
'current'
|
||||
? 'preset-filled-success'
|
||||
@@ -100,11 +100,11 @@ function toggle_edit_mode() {
|
||||
<input
|
||||
type="text"
|
||||
bind:value={tmp_entry_obj.name}
|
||||
class="input input-sm focus:ring-primary-500 grow border-none bg-transparent text-lg font-bold focus:ring-2 md:min-w-[300px]"
|
||||
class="input input-sm h-10 min-w-0 flex-1 border-none bg-transparent text-lg font-bold leading-none transition-colors duration-150 focus:ring-2 focus:ring-primary-500"
|
||||
placeholder="Entry Title..."
|
||||
onchange={on_save} />
|
||||
{:else}
|
||||
<h2 class="max-w-md truncate text-base font-bold md:text-lg">
|
||||
<h2 class="flex h-10 min-w-0 flex-1 items-center truncate text-base font-bold leading-none md:text-lg">
|
||||
{entry.name ||
|
||||
ae_util.iso_datetime_formatter(
|
||||
entry.created_on,
|
||||
@@ -115,14 +115,14 @@ function toggle_edit_mode() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full items-center justify-end gap-2 md:w-auto">
|
||||
<div class="ml-auto flex shrink-0 items-center gap-2 whitespace-nowrap transition-colors duration-150">
|
||||
<!-- Auto-Save indicator -->
|
||||
{#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
|
||||
<div
|
||||
class="border-surface-500/20 mr-1 flex items-center gap-1 border-r px-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-icon-sm {$journals_loc.entry.auto_save
|
||||
class="btn-icon btn-icon-sm transition-colors duration-150 {$journals_loc.entry.auto_save
|
||||
? 'text-primary-500'
|
||||
: 'opacity-30'}"
|
||||
onclick={() =>
|
||||
@@ -147,7 +147,7 @@ function toggle_edit_mode() {
|
||||
{#if entry.private}
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-icon-sm transition-all {is_decrypted
|
||||
class="btn-icon btn-icon-sm transition-colors duration-150 {is_decrypted
|
||||
? 'preset-filled-success shadow-success-500/20 shadow-lg'
|
||||
: 'preset-tonal-warning'}"
|
||||
onclick={on_decrypt}
|
||||
@@ -157,12 +157,12 @@ function toggle_edit_mode() {
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<div class="bg-surface-500/20 mx-1 h-6 w-[1px]"></div>
|
||||
<div class="bg-surface-500/20 mx-1 h-6 w-px"></div>
|
||||
|
||||
<!-- Unified Config Button -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-primary font-bold"
|
||||
class="btn btn-sm preset-tonal-primary font-bold transition-colors duration-150"
|
||||
onclick={on_show_config}>
|
||||
<Settings size="1.1em" class="mr-2" /> Config
|
||||
</button>
|
||||
@@ -171,7 +171,7 @@ function toggle_edit_mode() {
|
||||
{#if has_changed && save_status !== 'saving'}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-filled-primary"
|
||||
class="btn btn-sm preset-filled-primary transition-colors duration-150"
|
||||
onclick={on_save}>
|
||||
<Save size="1.1em" class="mr-2" /> Save
|
||||
</button>
|
||||
|
||||
@@ -424,7 +424,7 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
|
||||
group-hover/entry-view:opacity-15 dark:opacity-10 dark:group-hover/entry-view:opacity-20">
|
||||
</div>
|
||||
<section
|
||||
class="ae_view relative flex h-full w-full min-w-0 flex-col gap-4 rounded-xl
|
||||
class="ae_view relative flex w-full min-w-0 flex-col gap-4 rounded-xl
|
||||
border border-surface-200-800
|
||||
bg-surface-50-900 p-2 shadow-xl"
|
||||
bind:clientHeight={$ae_loc.iframe_height_modal_body}>
|
||||
@@ -441,65 +441,61 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
|
||||
{save_status}
|
||||
{log_lvl} />
|
||||
|
||||
<div class="grid w-full min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
|
||||
<div class="min-w-0 space-y-4">
|
||||
{#if decryption_error}
|
||||
<div
|
||||
class="bg-error-100 border-error-300 flex w-full animate-bounce items-center justify-between rounded-lg border p-4 shadow-xl">
|
||||
<div class="text-error-700 flex items-center gap-4 font-bold">
|
||||
<CircleAlert size="2.5em" />
|
||||
<span class="text-xl">{decryption_error}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
|
||||
onclick={() => (decryption_error = null)}>
|
||||
<CircleX size="1.2em" class="mr-2" /> Dismiss
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
|
||||
<section
|
||||
class="relative grow overflow-hidden rounded-xl border border-surface-200-800
|
||||
bg-surface-100-900 p-2 shadow-md min-w-0
|
||||
{$journals_loc.entry.edit_kv[
|
||||
$lq__journal_entry_obj?.journal_entry_id
|
||||
] == 'current'
|
||||
? 'ring-primary-500/40 ring-2 ring-inset'
|
||||
: ''}">
|
||||
<div class="absolute top-2 right-2 z-10">
|
||||
<AE_Comp_Journal_Entry_AiTools
|
||||
content={tmp_entry_obj.content}
|
||||
bind:summary={tmp_entry_obj.summary}
|
||||
on_save={() => update_journal_entry()}
|
||||
{log_lvl} />
|
||||
</div>
|
||||
|
||||
<AE_Comp_Journal_Entry_Editor
|
||||
entry={$lq__journal_entry_obj}
|
||||
journal={$lq__journal_obj}
|
||||
bind:tmp_entry_obj
|
||||
bind:editor_view
|
||||
has_changed={has_unsaved_changes}
|
||||
updated_idb={false}
|
||||
on_save={() => update_journal_entry()}
|
||||
on_force_reset={handle_force_reset} />
|
||||
</section>
|
||||
|
||||
<AE_Comp_Journal_Entry_ObjFileLi
|
||||
{log_lvl}
|
||||
link_to_type="journal_entry"
|
||||
link_to_id={$lq__journal_entry_obj.journal_entry_id}
|
||||
{lq__journal_entry_obj} />
|
||||
</div>
|
||||
|
||||
<aside class="min-w-0 space-y-4 lg:sticky lg:top-4 self-start">
|
||||
<div class="w-full min-w-0 space-y-4">
|
||||
{#if decryption_error}
|
||||
<div
|
||||
class="rounded-xl border border-surface-200-800 bg-surface-100-900 p-3 shadow-sm">
|
||||
<AE_Comp_Journal_Entry_Metadata entry={$lq__journal_entry_obj} />
|
||||
class="bg-error-100 border-error-300 flex w-full animate-bounce items-center justify-between rounded-lg border p-4 shadow-xl">
|
||||
<div class="text-error-700 flex items-center gap-4 font-bold">
|
||||
<CircleAlert size="2.5em" />
|
||||
<span class="text-xl">{decryption_error}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
|
||||
onclick={() => (decryption_error = null)}>
|
||||
<CircleX size="1.2em" class="mr-2" /> Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
<!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
|
||||
<section
|
||||
class="relative grow overflow-hidden rounded-xl border border-surface-200-800
|
||||
bg-surface-100-900 p-2 shadow-md min-w-0
|
||||
{$journals_loc.entry.edit_kv[
|
||||
$lq__journal_entry_obj?.journal_entry_id
|
||||
] == 'current'
|
||||
? 'ring-primary-500/40 ring-2 ring-inset'
|
||||
: ''}">
|
||||
<div class="absolute top-2 right-2 z-10">
|
||||
<AE_Comp_Journal_Entry_AiTools
|
||||
content={tmp_entry_obj.content}
|
||||
bind:summary={tmp_entry_obj.summary}
|
||||
on_save={() => update_journal_entry()}
|
||||
{log_lvl} />
|
||||
</div>
|
||||
|
||||
<AE_Comp_Journal_Entry_Editor
|
||||
entry={$lq__journal_entry_obj}
|
||||
journal={$lq__journal_obj}
|
||||
bind:tmp_entry_obj
|
||||
bind:editor_view
|
||||
has_changed={has_unsaved_changes}
|
||||
updated_idb={false}
|
||||
on_save={() => update_journal_entry()}
|
||||
on_force_reset={handle_force_reset} />
|
||||
</section>
|
||||
|
||||
<AE_Comp_Journal_Entry_ObjFileLi
|
||||
{log_lvl}
|
||||
link_to_type="journal_entry"
|
||||
link_to_id={$lq__journal_entry_obj.journal_entry_id}
|
||||
{lq__journal_entry_obj} />
|
||||
|
||||
<div
|
||||
class="rounded-xl border border-surface-200-800 bg-surface-100-900 p-3 shadow-sm">
|
||||
<AE_Comp_Journal_Entry_Metadata entry={$lq__journal_entry_obj} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AE_Comp_Modal_Journal_Entry_Append
|
||||
|
||||
Reference in New Issue
Block a user