From deb2efc16ee00c23d2705cd6fb34e3550b11a099 Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Mon, 26 Jun 2023 04:17:06 +0900
Subject: [PATCH] realign character panel

---
 public/index.html                  | 108 +++++++++++++++--------------
 public/scripts/RossAscends-mods.js |   2 +-
 public/style.css                   |  60 ++++++++++++++--
 3 files changed, 112 insertions(+), 58 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6789944cb..0a7346777 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2455,71 +2455,77 @@
                                 <input id="character_name_pole" name="ch_name" class="text_pole" placeholder="Name this character" maxlength="50" value="" autocomplete="off">
                             </div>
 
+                            <div id="result_info" class="flex-container" title="Token counts may be inaccurate and provided just for reference.">&nbsp;</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">
                                     <img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
                                     <input hidden type="file" id="add_avatar_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp">
                                 </label>
-
                                 <div class="flex-container flexFlowColumn">
-                                    <label for="char-management-dropdown">
-                                        <select id="char-management-dropdown">
-                                            <option value="default" disabled selected>Options</option>
-                                            <option id="set_character_world">
-                                                <i class="fa-solid fa-globe"></i> Link to World Info
-                                            </option>
-                                            <option id="import_character_info">
-                                                <i class="fa-solid fa-file-import"></i> Import Embedded World Info
-                                            </option>
-                                            <option id="set_chat_scenario">
-                                                Scenario Override
-                                            </option>
-                                            <option id="renameCharButton">
-                                                Rename
-                                            </option>
-                                            <option id="dupe_button">
-                                                Duplicate
-                                            </option>
-                                            <option id="export_button">
-                                                Export
-                                            </option>
-                                            <option id="delete_button">
-                                                Delete
-                                            </option>
-                                        </select>
-                                    </label>
+                                    <div class="flex-container flexFlowColumn">
+                                        <div class="flex-container justifyContentFlexEnd">
+                                            <label for="char-management-dropdown">
+                                                <select id="char-management-dropdown">
+                                                    <option value="default" disabled selected>Options</option>
+                                                    <option id="set_character_world">
+                                                        <i class="fa-solid fa-globe"></i> Link to World Info
+                                                    </option>
+                                                    <option id="import_character_info">
+                                                        <i class="fa-solid fa-file-import"></i> Import Card Lore
+                                                    </option>
+                                                    <option id="set_chat_scenario">
+                                                        Scenario Override
+                                                    </option>
+                                                    <option id="renameCharButton">
+                                                        Rename
+                                                    </option>
+                                                    <option id="dupe_button">
+                                                        Duplicate
+                                                    </option>
+                                                    <option id="export_button">
+                                                        Export
+                                                    </option>
+                                                    <option id="delete_button">
+                                                        Delete
+                                                    </option>
+                                                </select>
+                                            </label>
 
-                                    <div class="form_create_bottom_buttons_block">
-                                        <div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
+                                            <div class="form_create_bottom_buttons_block flexnowrap">
+                                                <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"></div>
-                                        <input type="hidden" id="fav_checkbox" name="fav" />
-                                        <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
-                                        <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore"></div>
-                                        <!-- <div id="export_button" class="menu_button fa-solid fa-file-export " 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"></div> -->
-                                        <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" 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"></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"></div>
+                                                <input type="hidden" id="fav_checkbox" name="fav" />
+                                                <div id="advanced_div" class="menu_button fa-solid fa-book " title="Advanced Definitions"></div>
+                                                <div id="world_button" class="menu_button fa-solid fa-globe" title="Character Lore"></div>
+                                                <!-- <div id="export_button" class="menu_button fa-solid fa-file-export " 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"></div> -->
+                                                <label for="create_button" id="create_button_label" class="menu_button fa-solid fa-user-check" 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"></div> -->
+                                            </div>
+                                        </div>
+
+                                        <div id="tags_div" class="marginBot5">
+                                            <div class="tag_controls">
+                                                <input id="tagInput" class="text_pole tag_input wide100p margin0" placeholder="Search / Create tags" maxlength="25" />
+                                                <div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
+                                            </div>
+                                            <div id="tagList" class="tags"></div>
+                                        </div>
                                     </div>
-                                    <div id="result_info" class="justifyCenter flex-container" title="Token counts may be inaccurate and provided just for reference.">&nbsp;</div>
                                 </div>
                             </div>
 
                         </div>
                         <hr>
 
-                        <div id="tags_div" class="marginBot5">
-                            <div class="tag_controls">
-                                <input id="tagInput" class="text_pole tag_input wide100p margin0" placeholder="Search / Create tags" maxlength="25" />
-                                <div class="tags_view menu_button fa-solid fa-tags" title="View all tags"></div>
-                            </div>
-                            <div id="tagList" class="tags"></div>
-                        </div>
+
 
                         <div id="description_div" class="marginBot5">
                             <span data-i18n="Description">Description</span>
@@ -3425,4 +3431,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index 8dec587fd..cd9c3da49 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -292,7 +292,7 @@ export function RA_CountCharTokens() {
         $("#result_info").html(`<small>${count_tokens} Tokens (${perm_tokens} Permanent)</small>`);
     } else {
         $("#result_info").html(`
-        <div class="flex-container flexFlowColumn alignitemscenter">
+        <div class="flex-container alignitemscenter">
             <div class="flex-container flexnowrap flexNoGap">
                 <small class="flex-container flexnowrap flexNoGap">
                     <div class="neutral_warning">${count_tokens}</div>&nbsp;Tokens (<div class="neutral_warning">${perm_tokens}</div><div>&nbsp;Permanent)</div>
diff --git a/public/style.css b/public/style.css
index 66b9d9c44..20ec26e22 100644
--- a/public/style.css
+++ b/public/style.css
@@ -702,6 +702,7 @@ hr {
     width: 50px;
     height: 50px;
     border-style: none;
+    flex: 1;
 }
 
 .last_mes .mesAvatarWrapper {
@@ -769,6 +770,27 @@ hr {
     box-shadow: 0 0 5px var(--black50a);
 }
 
+.character_select .avatar,
+body.big-avatars .character_select .avatar {
+    flex: unset;
+}
+
+/*
+.character_select .avatar img {
+    flex: unset;
+    width: 50px;
+    height: 50px;
+    width: unset;
+    aspect-ratio: 1 / 1;
+}
+
+,
+body.big-avatars .character_select .avatar img {
+    min-width: 60px;
+    aspect-ratio: unset;
+}
+
+ */
 body.no-hotswap .hotswap {
     display: none !important;
 }
@@ -784,13 +806,16 @@ body.no-timestamps .timestamp {
 body.big-avatars .avatar {
     width: 60px;
     height: 90px;
+    /* width: unset; */
     border-style: none;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
+    /* align-self: unset; */
     overflow: visible;
     border-radius: 10px;
+    flex: 1
 }
 
 body.big-avatars #user_avatar_block .avatar,
@@ -806,8 +831,8 @@ body.big-avatars #user_avatar_block .avatar img {
 }
 
 body.big-avatars .avatar img {
-    width: 100%;
-    height: 100%;
+    width: 60px;
+    height: 90px;
     object-fit: cover;
     object-position: center;
     border: 1px solid var(--black30a);
@@ -1503,10 +1528,21 @@ body.big-avatars .ch_description {
     width: 100%;
     flex-wrap: wrap;
     margin-top: 0px;
-    /* margin-bottom: 6px; */
     align-items: center;
 }
 
+/* #avatar_div_div.avatar img {
+    height: 90%;
+    width: unset;
+    aspect-ratio: 1/1;
+}
+
+body.big-avatars #avatar_div_div.avatar img {
+    height: 90%;
+    width: unset;
+    aspect-ratio: 2 / 3;
+}
+ */
 #user-settings-block h4,
 #user-settings-block h3 {
     margin: 5px 0;
@@ -1706,6 +1742,7 @@ grammarly-extension {
 #result_info {
     font-size: calc(var(--mainFontSize) - 0.1rem);
     font-weight: bold;
+    margin-bottom: 5px;
 }
 
 /* Focus */
@@ -2362,6 +2399,12 @@ input[type="range"]::-webkit-slider-thumb {
     color: var(--SmartThemeBodyColor);
 }
 
+#char-management-dropdown,
+#tagInput {
+    height: 35px;
+    margin-bottom: 0;
+}
+
 .nice-link:hover {
     opacity: 1;
 }
@@ -3973,7 +4016,6 @@ toolcool-color-picker {
     width: 30% !important;
 }
 
-
 .justifyLeft {
     text-align: start;
     justify-content: left;
@@ -3989,6 +4031,10 @@ toolcool-color-picker {
     justify-content: space-around;
 }
 
+.justifyContentFlexEnd {
+    justify-content: flex-end;
+}
+
 .spaceEvenly {
     justify-content: space-evenly;
 }
@@ -4420,7 +4466,8 @@ body.waifuMode #avatar_zoom_popup {
         aspect-ratio: 2 / 3;
     }
 
-    .world_entry_thin_controls, #persona-management-block {
+    .world_entry_thin_controls,
+    #persona-management-block {
         flex-direction: column;
     }
 
@@ -4678,6 +4725,7 @@ body.waifuMode #avatar_zoom_popup {
     .drawer25pWidth {
         flex-basis: max(calc(100% / 2 - 10px), 180px);
     }
+
     .drawer33pWidth {
         flex-basis: max(calc(100% / 2 - 10px), 180px);
     }
@@ -4754,4 +4802,4 @@ body.waifuMode #avatar_zoom_popup {
     #horde_model {
         height: unset;
     }
-}
+}
\ No newline at end of file