From 63f5168015e19275745bc390c0ee54af9d7d6473 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 4 Nov 2024 16:59:30 -0500
Subject: [PATCH] Making things looks nicer. Various fixes.

---
 src/lib/element_tiptap_editor.svelte          | 56 +++++++++++++++----
 .../ae_idaa_comp__event_obj_id_edit.svelte    | 28 +---------
 .../ae_idaa_comp__event_obj_id_view.svelte    |  8 +--
 .../ae_idaa_comp__event_obj_li.svelte         |  7 ++-
 .../ae_idaa_comp__event_obj_qry.svelte        |  6 +-
 5 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/src/lib/element_tiptap_editor.svelte b/src/lib/element_tiptap_editor.svelte
index 83553768..7b562482 100644
--- a/src/lib/element_tiptap_editor.svelte
+++ b/src/lib/element_tiptap_editor.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { onMount, onDestroy } from 'svelte';
+import { fade } from 'svelte/transition'
 import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
 import TextStyle from '@tiptap/extension-text-style'
@@ -11,6 +12,7 @@ import { Editor } from "@tiptap/core";
 // import Typography from '@tiptap/extension-typography' ????
 
 import "./element_tiptap_editor.scss";
+	import { cubicOut } from 'svelte/easing';
 
 // https://tiptap.dev/docs/examples/basics/default-text-editor
 // https://tiptap.dev/docs/examples/basics/formatting
@@ -144,17 +146,41 @@ function getContent() {
             show_menu = false;
         }
     }}
-    class="editor border border-gray-300 rounded p-1 pb-2 bg-gray-200"
+    on:mouseenter={() => {
+        if (default_minimal) {
+            show_menu = true;
+        }
+    }}
+    class="editor border border-gray-300 rounded p-1 bg-gray-200 transition-all duration-1000"
+    class:font-mono={show_menu}
+    class:py-2={show_menu}
     >
 
-      {#if editor && show_menu}
-        <div class="control-group bg-gray-200 border-b border-gray-400 p-1">
-          <div class="button-group flex flex-row flex-wrap gap-4 items-center justify-between">
+    <!-- && show_menu -->
+    <!-- class:h-0={!show_menu} -->
+    <!-- class:h-auto={show_menu} -->
+    <!-- class:opacity-0={!show_menu} -->
+    <!-- class:opacity-100={show_menu} -->
+    {#if editor && show_menu}
+    <div
+        transition:fade={{delay: 150, duration: 750, easing: cubicOut}}
+        class="
+            control-group button-group
+            bg-gray-200
+            border-b border-gray-400
+            p-1
+            transition-all duration-1000
+            flex flex-row flex-wrap gap-4
+            items-center justify-between
+            "
+        >
+
+        <!-- <div class="button-group flex flex-row flex-wrap gap-4 items-center justify-between"> -->
 
             <span>
                 <button
                     type="button"
-                    on:click={() => console.log(editor?.getHTML()) && editor.chain().toggleBold().run()}
+                    on:click={() => editor.chain().toggleBold().run()}
                     disabled={!editor.can().chain().focus().toggleBold().run()}
                     class="btn btn-sm variant-glass-secondary hover:variant-filled-secondary rounded-md font-bold"
                     class:variant-ghost-secondary={editor.isActive("bold") ?? false}
@@ -408,17 +434,17 @@ function getContent() {
                 </button>
             </span> -->
 
+        <!-- </div> -->
 
-          </div>
-        </div>
-      {/if}
+    </div>
+    {/if} <!-- show_menu -->
 
-      <div
+    <div
         bind:this={element}
-        class="tiptap bg-slate-100 px-1 py-2"
+        class="tiptap bg-slate-100 px-2 py-2 relative"
         >
         <span
-            class="placeholder text-sm text-gray-400 italic"
+            class="placeholder text-sm text-gray-400 italic absolute"
             contenteditable="false"
             hidden={editor?.getHTML() !== '<p></p>'}
             >{placeholder}</span>
@@ -428,4 +454,12 @@ function getContent() {
 </div>
 
 <style lang="scss">
+// :global(.ProseMirror) {
+//     padding: .25em;
+// }
+:global(.ProseMirror-focused) {
+    // padding: .25em;
+    // box-shadow: 0 0 0 2px hsla(208, 99%, 55%, .1);
+    outline: none;
+}
 </style>
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
index 6ebb46c5..57948b56 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_edit.svelte
@@ -1313,14 +1313,9 @@ async function handle_delete_event_obj({event_id, method='disable'}) {
 
 
 <style>
-.ae_section .ae_options {
-    /* align-self: center; */
-}
-
-textarea.event__description {
-    /* width: 100%; */
-    /* max-width: 100%; */
-}
+/* .ae_section .ae_options {
+    align-self: center;
+} */
 
 .event__physical_virtual .ae_group {
     display: flex;
@@ -1354,21 +1349,4 @@ textarea.event__description {
     align-items: center;
 }
 
-/* .ae_edit.event_obj {
-    border: dashed thin hsla(0,0%,70%,1);
-
-    margin: .5em .25em;
-    padding: .5em .25em;
-
-    background-color: hsla(0,0%,90%,1);
-} */
-
-/* .ae_d_none, .d-none {
-    display: none;
-} */
-
-:global(.tox .tox-promotion, .tox .tox-statusbar__branding) {
-    display: none !important;
-    /* visibility: hidden !important; */
-}
 </style>
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_view.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_view.svelte
index bb7e2595..82f4915a 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_view.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_id_view.svelte
@@ -343,10 +343,10 @@ onMount(() => {
     font-style: italic;
 }
 
-.event_obj .ae_meta {
-    /* flex-direction: column; */
-    /* justify-content: space-between; */
-}
+/* .event_obj .ae_meta {
+    flex-direction: column;
+    justify-content: space-between;
+} */
 
 .event_obj .ae_meta .ae_group {
     flex-direction: row;
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
index b034f7ae..e31b121b 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_li.svelte
@@ -49,9 +49,10 @@ onMount(() => {
         >
 
         <header class="ae_header event__header">
-            <h3>
+            <h3
+                class="flex flex-row gap-2 items-center">
                 <span class="event__name">{idaa_event_obj?.name}</span>
-                <span class="badge badge-info bg-info">
+                <span class="badge badge-info variant-glass-tertiary">
                     {#if idaa_event_obj?.physical && idaa_event_obj?.virtual}
                         <span class="fas fa-home m-1"></span> F2F and <span class="fas fa-laptop m-1"></span> Virtual
                     {:else if idaa_event_obj?.physical}
@@ -61,7 +62,7 @@ onMount(() => {
                     {/if}
                 </span>
                 {#if idaa_event_obj?.type}
-                    <span class="badge badge-info bg-info"><span class="fas fa-user-md m-1"></span> {idaa_event_obj?.type}</span>
+                    <span class="badge badge-info variant-glass-secondary"><span class="fas fa-user-md m-1"></span> {idaa_event_obj?.type}</span>
                 {/if}
                 {#if $ae_loc.trusted_access && idaa_event_obj?.hide}
                     <span class="badge badge-warning"><span class="fas fa-exclamation-triangle m-1"></span> Hidden</span>
diff --git a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
index 364d6eb0..b7e8c84d 100644
--- a/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
+++ b/src/routes/idaa/(idaa)/recovery_meetings/ae_idaa_comp__event_obj_qry.svelte
@@ -247,7 +247,7 @@ async function handle_qry__event(
             </button>
         </div>
 
-        <fieldset class="flex flex-row gap-1 w-full items-center justify-center">
+        <fieldset class="flex flex-row flex-wrap gap-4 w-full items-center justify-center">
             <div class="legend inline-block">
                 Location?</div>
             <!-- <div class="ae_row ae_flex_justify_around ae_width_md"> -->
@@ -274,7 +274,7 @@ async function handle_qry__event(
             <!-- </div> -->
         </fieldset>
 
-        <fieldset class="flex flex-row gap-1 w-full items-center justify-center">
+        <fieldset class="flex flex-row flex-wrap gap-4 w-full items-center justify-center">
             <div class="legend inline-block">
                 Type?
             </div>
@@ -350,7 +350,7 @@ async function handle_qry__event(
         <div>Error: {error.message}</div>
     {/await} -->
 
-    <div class="ae_group ae_row flex flex-row gap-1 w-full items-center justify-center">
+    <div class="ae_group ae_row flex flex-row flex-wrap gap-1 w-full items-center justify-center">
 
         <!-- Max events select options -->
         <span