Mostly style improvements for mobile sized

This commit is contained in:
Scott Idem
2025-09-03 16:19:54 -04:00
parent 7364ce5527
commit 66510c8ff1
2 changed files with 45 additions and 14 deletions

View File

@@ -1288,12 +1288,13 @@ $effect(() => {
</div> </div>
<section class="relative"> <!-- <section class="relative"> -->
<section class="relative transition-all">
<!-- Menu Button --> <!-- Menu Button -->
<button <button
type="button" type="button"
onclick={() => (show_menu = !show_menu)} onclick={() => (show_menu = !show_menu)}
class="btn variant-outline-secondary hover:preset-filled-secondary-500 transition py-1 px-2 w-24 *:hover:inline" class="btn variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 *:hover:inline transition-all"
title="Toggle menu" title="Toggle menu"
> >
<Menu size="1.5em" class="inline-block" /> <Menu size="1.5em" class="inline-block" />
@@ -1301,17 +1302,31 @@ $effect(() => {
</button> </button>
<!-- Menu --> <!-- Menu -->
{#if show_menu} <!-- {#if show_menu} -->
<div <div
class="absolute top-12 right-0 bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 z-50 w-80 space-y-0.5 border border-gray-500" class="
absolute top-12 right-0
p-4 z-50 w-80
space-y-0.5
bg-white dark:bg-gray-800
border border-gray-500
shadow-xl rounded-lg
min-w-72
max-w-fit
"
class:hidden={show_menu}
> >
<!-- <div class="flex flex-row flex-wrap gap-1 items-center justify-end"> --> <!-- <div class="flex flex-row flex-wrap gap-1 items-center justify-end"> -->
<!-- Category code for journal entry --> <!-- Category code for journal entry -->
<!-- Give list of categories to base the new entry on --> <!-- Give list of categories to base the new entry on -->
<div class="flex flex-row items-center justify-evenly gap-2 w-full"> <div
class="
flex flex-row items-center justify-evenly gap-2 w-full
"
>
<span class="text-sm text-gray-500 hidden sm:inline"> <span class="text-sm text-gray-500 hidden sm:inline">
Category: Category:
</span> </span>
@@ -1482,7 +1497,7 @@ $effect(() => {
<!-- Toggle if entry should be used as a template entry (cloneable). Only visible in edit_mode. --> <!-- Toggle if entry should be used as a template entry (cloneable). Only visible in edit_mode. -->
<button <button
type="button" type="button"
class:hidden={($lq__journal_obj.cfg_json?.hide_btn_template) || !$ae_loc.edit_mode} class:hidden={($lq__journal_obj?.cfg_json?.hide_btn_template) || !$ae_loc.edit_mode}
onclick={() => { onclick={() => {
tmp_entry_obj.template = !$lq__journal_entry_obj?.template; tmp_entry_obj.template = !$lq__journal_entry_obj?.template;
update_journal_entry(); update_journal_entry();
@@ -1989,7 +2004,7 @@ $effect(() => {
{/if} {/if}
</div> </div>
{/if} <!-- {/if} -->
</section> </section>

View File

@@ -115,13 +115,14 @@ function verify_journal_passcode() {
</h2> </h2>
<div class="grow flex flex-row flex-wrap gap-2 items-center justify-end">
<section class="relative"> <section class="relative transition-all">
<!-- Menu Button --> <!-- Menu Button -->
<button <button
type="button" type="button"
onclick={() => (show_menu = !show_menu)} onclick={() => (show_menu = !show_menu)}
class="btn variant-outline-secondary hover:preset-filled-secondary-500 transition py-1 px-2 w-24 *:hover:inline" class="btn variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 *:hover:inline transition-all"
title="Toggle menu" title="Toggle menu"
> >
<Menu size="1.5em" class="inline-block" /> <Menu size="1.5em" class="inline-block" />
@@ -129,11 +130,25 @@ function verify_journal_passcode() {
</button> </button>
<!-- Menu --> <!-- Menu -->
{#if show_menu} <!-- {#if show_menu} -->
<div <div
class="absolute top-12 right-0 bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 z-50 w-80 space-y-0.5 border border-gray-500" class="
absolute top-12 right-0
p-4 z-50 w-80
space-y-0.5
bg-white dark:bg-gray-800
border border-gray-500
shadow-xl rounded-lg
min-w-72
max-w-fit
"
class:hidden={show_menu}
> >
<div class="flex flex-row flex-wrap gap-1 items-center justify-between"> <div
class="
flex flex-row flex-wrap items-center justify-evenly gap-2 w-full
"
>
<span class="text-sm text-gray-500"> <span class="text-sm text-gray-500">
<span class="fas fa-info-circle text-blue-500"></span> <span class="fas fa-info-circle text-blue-500"></span>
@@ -252,9 +267,10 @@ function verify_journal_passcode() {
</div> </div>
{/if} <!-- {/if} -->
</section> </section>
</div>
</header> </header>