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>
<section class="relative">
<!-- <section class="relative"> -->
<section class="relative transition-all">
<!-- Menu Button -->
<button
type="button"
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"
>
<Menu size="1.5em" class="inline-block" />
@@ -1301,17 +1302,31 @@ $effect(() => {
</button>
<!-- Menu -->
{#if show_menu}
<!-- {#if show_menu} -->
<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"> -->
<!-- Category code for journal entry -->
<!-- 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">
Category:
</span>
@@ -1482,7 +1497,7 @@ $effect(() => {
<!-- Toggle if entry should be used as a template entry (cloneable). Only visible in edit_mode. -->
<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={() => {
tmp_entry_obj.template = !$lq__journal_entry_obj?.template;
update_journal_entry();
@@ -1989,7 +2004,7 @@ $effect(() => {
{/if}
</div>
{/if}
<!-- {/if} -->
</section>

View File

@@ -115,13 +115,14 @@ function verify_journal_passcode() {
</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 -->
<button
type="button"
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"
>
<Menu size="1.5em" class="inline-block" />
@@ -129,11 +130,25 @@ function verify_journal_passcode() {
</button>
<!-- Menu -->
{#if show_menu}
<!-- {#if show_menu} -->
<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="fas fa-info-circle text-blue-500"></span>
@@ -252,9 +267,10 @@ function verify_journal_passcode() {
</div>
{/if}
<!-- {/if} -->
</section>
</div>
</header>