Style improvements

This commit is contained in:
Scott Idem
2025-04-03 16:13:18 -04:00
parent ca2c5c7baf
commit 98676dffd9
4 changed files with 77 additions and 26 deletions

View File

@@ -11,7 +11,8 @@ import { goto } from '$app/navigation';
import {
BookPlus,
FolderPlus, Library,
SquareLibrary
SquareLibrary,
Wrench
} from '@lucide/svelte';
import { liveQuery } from "dexie";
import { Modal } from 'flowbite-svelte';
@@ -21,7 +22,7 @@ import { Modal } from 'flowbite-svelte';
import { db_journals } from "$lib/ae_journals/db_journals";
import { journals_func } from '$lib/ae_journals/ae_journals_functions';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { journals_loc, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
import { journals_loc, journals_sess, journals_slct, journals_trig } from '$lib/ae_journals/ae_journals_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
interface Props {
data: any;
@@ -31,7 +32,6 @@ let { data }: Props = $props();
import Journal_obj_li from './ae_comp__journal_obj_li.svelte';
import { journals_sess } from '$lib/ae_journals/ae_journals_stores';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
@@ -161,24 +161,55 @@ async function create_journal() {
Journals for {$ae_loc.account_name ?? 'Æ loading...'}
</h1>
<div class="flex flex-row items-center justify-center w-full border-gray-200 border-y-2 py-2">
<div
class="flex flex-row flex-wrap gap-1 items-center justify-center w-full border-gray-200 border-y-2 py-2"
class:hidden={!$ae_loc.edit_mode}
>
<!-- Add new journal button -->
<button
type="button"
class="
btn btn-sm
variant-ghost-secondary
hover:variant-filled-secondary
transition
"
btn btn-sm
variant-ghost-secondary
hover:variant-filled-secondary
transition
"
onclick={
() => {
$journals_sess.show__modal_new__journal_obj = true;
}
}
title="Create a new journal"
>
<!-- <FolderPlus class="mx-1" /> -->
<BookPlus />
New Journal
<BookPlus class="mx-1" />
<span class="hidden md:inline">
New Journal
</span>
</button>
<!-- Show Journals Config button -->
<button
disabled={true}
type="button"
class="
btn btn-sm
variant-ghost-secondary
hover:variant-filled-secondary
transition
"
onclick={
() => {
// Redirect to the journals config page
// goto('/journals/config');
}
}
title="Configure Journals"
>
<Wrench class="mx-1" />
<span class="hidden md:inline">
Journals Config
</span>
</button>
</div>

View File

@@ -726,7 +726,14 @@ $effect(() => {
tabindex={$ae_loc.edit_mode ? 0 : -1}
class:bg-orange-100={$ae_loc.edit_mode}
class:hidden={!$ae_loc.trusted_access || $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
class="flex-grow w-full font-mono shadow-md rounded-lg border-gray-500 bg-gray-100 p-2"
class="
flex-grow min-h-48 w-full max-w-6xl
p-2
font-mono shadow-md rounded-lg
border border-gray-200 dark:border-gray-700
hover:border-gray-500 dark:hover:border-gray-500
"
>
<article
class="prose"
@@ -739,7 +746,10 @@ $effect(() => {
<div
class:hidden={!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] && $lq__journal_entry_obj?.content?.length}
class="flex-grow flex flex-col items-center justify-center w-full max-w-6xl"
class="
flex-grow flex flex-col items-center justify-center
w-full max-w-6xl
"
>
<textarea
@@ -752,9 +762,15 @@ $effect(() => {
}
}}
class:bg-orange-100={$ae_loc.edit_mode}
class="flex-grow w-full min-h-48 h-full p-2 border border-gray-300 rounded-lg"
placeholder="Edit journal entry content here..."
></textarea>
class="
flex-grow min-h-48 w-full h-full
p-2
bg-white shadow-lg rounded-lg
border border-gray-200 dark:border-gray-700
hover:border-gray-500 dark:hover:border-gray-500
"
placeholder="Edit journal entry content here..."
></textarea>
<!-- Only enable editing if the user has trusted access -->
<button

View File

@@ -95,12 +95,12 @@ let tmp_entry_obj: key_val = $state({});
});
}}
class:hidden={journals_journal_entry_obj.template}
class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline lg:text-xs"
class="btn btn-sm p-1 variant-soft-secondary hover:variant-filled-secondary *:hover:inline text-xs lg:text-sm"
title="Copy the markdown content"
>
<!-- <span class="fas fa-copy mx-1"></span> -->
<Copy size="1em" />
<RemoveFormatting size="2em" />
<RemoveFormatting size="1.25em" />
<span class="hidden">
Copy Plaintext Markdown
</span>
@@ -127,7 +127,7 @@ let tmp_entry_obj: key_val = $state({});
>
<!-- <span class="fas fa-copy mx-1"></span> -->
<Copy size="1em" />
<CodeXml size="2em" />
<CodeXml size="1.25em" />
<span class="hidden">
Copy Rendered HTML
</span>
@@ -168,7 +168,7 @@ let tmp_entry_obj: key_val = $state({});
>
<!-- class="btn btn-sm variant-soft-surface hover:variant-filled-warning transition py-1 px-2" -->
<!-- <Copy strokeWidth="1" /> -->
<Copy size="2em" />
<Copy size="1.25em" />
<span class="hidden md:inline">Clone</span>
</button>
@@ -205,7 +205,7 @@ let tmp_entry_obj: key_val = $state({});
title="Copy the rich text (rendered HTML) content"
>
<Copy size="1em" />
<TypeOutline size="2em" />
<TypeOutline size="1.25em" />
<span class="hidden">Copy Rich Text</span>
</button>
@@ -270,17 +270,21 @@ let tmp_entry_obj: key_val = $state({});
</header>
{#if journals_journal_entry_obj.content}
<div
class:hidden={journals_journal_entry_obj.hide}
class="
journal__content w-full p-2 bg-white shadow-md rounded-lg text-wrap text-sm font-mono whitespace-pre-wrap
journal__content
w-full p-1
bg-white shadow-lg rounded-lg
border border-gray-200 dark:border-gray-700
hover:border-gray-500 dark:hover:border-gray-500
text-wrap text-sm font-mono whitespace-pre-wrap
{$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height} overflow-scroll` : ''}
"
>
{@html journals_journal_entry_obj.content}
{@html journals_journal_entry_obj.content}
</div>
<!-- This needs to remain hidden for the copy function to work and us not seeing the rendered HTML version. -->

View File

@@ -67,7 +67,7 @@ let { lq__journal_obj_li }: Props = $props();
<section
class="ae_section ae_footer ae_meta journal__meta mt-2 flex flex-col sm:flex-row gap-1 items-center justify-center text-sm text-gray-500"
class:hidden={!$ae_loc.administrator_access && !$ae_loc.edit_mode}
class:hidden={!$ae_loc.administrator_access || !$ae_loc.edit_mode}
>
<div class="ae_group">
{#if !journals_journal_obj.updated_on}