From 7d4e689bec8fb73e0eb85f3dc060939027294899 Mon Sep 17 00:00:00 2001
From: Kristan Schlikow <kristian@schlikow.de>
Date: Tue, 9 Apr 2024 19:03:35 +0200
Subject: [PATCH] Update layout for avatar tags and controls

---
 public/css/mobile-styles.css |   5 +-
 public/css/tags.css          |   2 +-
 public/index.html            | 132 +++++++++++++++++------------------
 public/style.css             |  30 ++++++--
 4 files changed, 93 insertions(+), 76 deletions(-)

diff --git a/public/css/mobile-styles.css b/public/css/mobile-styles.css
index 3156e9207..5a27ed760 100644
--- a/public/css/mobile-styles.css
+++ b/public/css/mobile-styles.css
@@ -208,7 +208,6 @@
     #cfgConfig,
     #logprobsViewer,
     #movingDivs > div {
-        height: calc(100vh - 45px);
         height: calc(100svh - 45px);
         min-width: 100% !important;
         width: 100% !important;
@@ -221,6 +220,7 @@
         top: var(--topBarBlockSize) !important;
         left: 0 !important;
         backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
+        padding-right: 15px;
     }
 
     #floatingPrompt,
@@ -241,6 +241,9 @@
     /*     .avatar_div {
         margin-top: 5px;
     } */
+    #avatar_controls {
+        padding:
+    }
 
     #character_popup {
         width: 100%;
diff --git a/public/css/tags.css b/public/css/tags.css
index 8c25eb1dd..11806c69a 100644
--- a/public/css/tags.css
+++ b/public/css/tags.css
@@ -99,7 +99,7 @@
 
 #bulkTagsList,
 #tagList.tags {
-    margin: 2px 0;
+    margin: 5px 0;
 }
 
 #bulkTagsList,
diff --git a/public/index.html b/public/index.html
index cd5cf7d59..7c9f9deee 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4150,7 +4150,7 @@
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
                     </div>
                     <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
-                        <div class="hotswap avatars_inline flex-container"></div>
+                        <div class="hotswap avatars_inline flex-container expander"></div>
                     </div>
                 </div>
                 <hr>
@@ -4187,76 +4187,74 @@
                                     Tokens: <span data-token-counter="character_name_pole" data-token-permanent="true">counting...</span>
                                 </div>
                             </div>
-                            <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5">
-                                <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
-                                    <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
-                                    <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
-                                </label>
-                                <div class="flex-container flexFlowColumn">
-                                    <div class="flex-container flexFlowColumn">
-                                        <div class="flex-container justifyContentFlexEnd flexFlowColumn">
-                                            <div class="form_create_bottom_buttons_block">
-                                                <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
-                                                <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
-                                                <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
-                                                <input type="hidden" id="fav_checkbox" name="fav" />
-                                                <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions" data-i18n="[title]Advanced Definition"></div>
-                                                <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore" data-i18n="[title]Character Lore"></div>
-                                                <div class="chat_lorebook_button menu_button fa-solid fa-passport" title="Chat Lore" data-i18n="[title]Chat Lore"></div>
-                                                <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download" data-i18n="[title]Export and Download"></div>
-                                                <!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
-                                                <!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->
-                                                <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character" data-i18n="[title]Duplicate Character"></div>
-                                                <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
-                                                    <input type="submit" id="create_button" name="create_button">
-                                                </label>
-                                                <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
-                                            </div>
-                                            <label class="flex1" for="char-management-dropdown">
-                                                <select id="char-management-dropdown">
-                                                    <option value="default" disabled selected data-i18n="More...">More...</option>
-                                                    <option id="set_character_world" data-i18n="Link to World Info">
-                                                        Link to World Info
-                                                    </option>
-                                                    <option id="import_character_info" data-i18n="Import Card Lore">
-                                                        Import Card Lore
-                                                    </option>
-                                                    <option id="set_chat_scenario" data-i18n="Scenario Override">
-                                                        Scenario Override
-                                                    </option>
-                                                    <option id="convert_to_persona" data-i18n="Convert to Persona">
-                                                        Convert to Persona
-                                                    </option>
-                                                    <option id="renameCharButton" data-i18n="Rename">
-                                                        Rename
-                                                    </option>
-                                                    <option id="character_source" data-i18n="Link to Source">
-                                                        Link to Source
-                                                    </option>
-                                                    <option id="replace_update" data-i18n="Replace / Update">
-                                                        Replace / Update
-                                                    </option>
-                                                    <!--<option id="dupe_button">
-                                                            Duplicate
-                                                        </option>
-                                                        <option id="export_button">
-                                                            Export
-                                                        </option>
-                                                        <option id="delete_button">
-                                                            Delete
-                                                        </option>-->
-                                                </select>
+                            <div class="flex-container flexFlowColumn">
+                                <div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
+                                    <label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
+                                        <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
+                                        <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
+                                    </label>
+                                    <div class="flex-container" id="avatar_controls">
+                                        <div class="form_create_bottom_buttons_block">
+                                            <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
+                                            <!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
+                                            <div id="favorite_button" class="menu_button fa-solid fa-star" title="Add to Favorites" data-i18n="[title]Add to Favorites"></div>
+                                            <input type="hidden" id="fav_checkbox" name="fav" />
+                                            <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions" data-i18n="[title]Advanced Definition"></div>
+                                            <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore" data-i18n="[title]Character Lore"></div>
+                                            <div class="chat_lorebook_button menu_button fa-solid fa-passport" title="Chat Lore" data-i18n="[title]Chat Lore"></div>
+                                            <div id="export_button" class="menu_button fa-solid fa-file-export " title="Export and Download" data-i18n="[title]Export and Download"></div>
+                                            <!-- <div id="set_chat_scenario" class="menu_button fa-solid fa-scroll" title="Set a chat scenario override"></div> -->
+                                            <!-- <div id="set_character_world" class="menu_button fa-solid fa-globe" title="Set a character World Info / Lorebook"></div> -->
+                                            <div id="dupe_button" class="menu_button fa-solid fa-clone " title="Duplicate Character" data-i18n="[title]Duplicate Character"></div>
+                                            <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" title="Create Character" data-i18n="[title]Create Character">
+                                                <input type="submit" id="create_button" name="create_button">
                                             </label>
+                                            <div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
                                         </div>
-                                        <div id="tags_div">
-                                            <div class="tag_controls">
-                                                <input id="tagInput" class="text_pole textarea_compact tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="50" />
-                                                <div class="tags_view menu_button fa-solid fa-tags" title="View all tags" data-i18n="[title]View all tags"></div>
-                                            </div>
-                                            <div id="tagList" class="tags"></div>
-                                        </div>
+                                        <label class="flex1 height100p" for="char-management-dropdown">
+                                            <select id="char-management-dropdown">
+                                                <option value="default" disabled selected data-i18n="More...">More...</option>
+                                                <option id="set_character_world" data-i18n="Link to World Info">
+                                                    Link to World Info
+                                                </option>
+                                                <option id="import_character_info" data-i18n="Import Card Lore">
+                                                    Import Card Lore
+                                                </option>
+                                                <option id="set_chat_scenario" data-i18n="Scenario Override">
+                                                    Scenario Override
+                                                </option>
+                                                <option id="convert_to_persona" data-i18n="Convert to Persona">
+                                                    Convert to Persona
+                                                </option>
+                                                <option id="renameCharButton" data-i18n="Rename">
+                                                    Rename
+                                                </option>
+                                                <option id="character_source" data-i18n="Link to Source">
+                                                    Link to Source
+                                                </option>
+                                                <option id="replace_update" data-i18n="Replace / Update">
+                                                    Replace / Update
+                                                </option>
+                                                <!--<option id="dupe_button">
+                                                        Duplicate
+                                                    </option>
+                                                    <option id="export_button">
+                                                        Export
+                                                    </option>
+                                                    <option id="delete_button">
+                                                        Delete
+                                                    </option>-->
+                                            </select>
+                                        </label>
                                     </div>
                                 </div>
+                                <div id="tags_div">
+                                    <div class="tag_controls">
+                                        <input id="tagInput" class="text_pole textarea_compact tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="50" />
+                                        <div class="tags_view menu_button fa-solid fa-tags" title="View all tags" data-i18n="[title]View all tags"></div>
+                                    </div>
+                                    <div id="tagList" class="tags"></div>
+                                </div>
                             </div>
                         </div>
                         <hr>
diff --git a/public/style.css b/public/style.css
index 2ff9ef394..04e5cf64d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -939,8 +939,8 @@ body.reduced-motion #bg_custom {
 }
 
 .avatar img {
-    width: var(--avatar-base-width);
-    height: var(--avatar-base-height);
+    width: calc(var(--avatar-base-width) + 5px);
+    height: calc(var(--avatar-base-height) + 5px);
     object-fit: cover;
     object-position: center center;
     border-radius: var(--avatar-base-border-radius-round);
@@ -985,9 +985,7 @@ body.reduced-motion #bg_custom {
 }
 
 .avatars_inline .avatar {
-    margin-top: calc(var(--avatar-base-border-radius));
-    margin-left: calc(var(--avatar-base-border-radius));
-    margin-bottom: calc(var(--avatar-base-border-radius));
+    margin: calc(var(--avatar-base-border-radius));
 }
 
 .avatars_inline .avatar:last-of-type {
@@ -1652,6 +1650,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
 .missing-avatar.inline_avatar {
     padding: unset;
     border-radius: var(--avatar-base-border-radius-round);
+    width: fit-content;
 }
 
 /*applies to char list and mes_text char display name*/
@@ -2000,6 +1999,19 @@ grammarly-extension {
     justify-content: center;
     align-items: center;
     align-self: center !important;
+    width: 100%;
+    height: 100%;
+    /* Avoids cutting off the box shadow on the avatar*/
+    margin: 10px;
+}
+
+#avatar_controls {
+    height: 100%;
+    width: 100%;
+    flex-grow: 1;
+    justify-content: flex-end;
+    flex-flow: column;
+    padding: 10px 10px 10px 0;
 }
 
 #description_div,
@@ -2210,11 +2222,11 @@ grammarly-extension {
     font-weight: bold;
     padding: 5px;
     margin: 0;
-    height: 26px;
     filter: grayscale(0.5);
     text-align: center;
     font-size: 17px;
     aspect-ratio: 1 / 1;
+    flex: 0.075;
 }
 
 .menu_button:hover,
@@ -2633,7 +2645,11 @@ input[type="range"]::-webkit-slider-thumb {
     color: var(--SmartThemeBodyColor);
 }
 
-#char-management-dropdown,
+#char-management-dropdown {
+    height: 100%;
+    margin-bottom: 0;
+}
+
 #tagInput {
     height: 26px;
     margin-bottom: 0;