From dae90373e75bef06ebcc9d8ed08a202e7f7980e6 Mon Sep 17 00:00:00 2001
From: Wolfsblvt <wolfsblvt@gmx.de>
Date: Thu, 7 Mar 2024 05:20:43 +0100
Subject: [PATCH] Tag Filters: Improve grid view

- Add character count to groups and folders in grid view
- Fix name cut-off for groups
---
 public/css/toggle-dependent.css | 26 +++++++++++++++++++++++---
 public/index.html               |  9 +++++----
 public/style.css                |  4 ++++
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/public/css/toggle-dependent.css b/public/css/toggle-dependent.css
index 4d07c618d..b5add2bde 100644
--- a/public/css/toggle-dependent.css
+++ b/public/css/toggle-dependent.css
@@ -41,6 +41,7 @@ body.charListGrid #rm_print_characters_block {
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select,
 body.charListGrid #rm_print_characters_block .character_select,
+body.charListGrid #rm_print_characters_block .group_select,
 #user_avatar_block.gridView .avatar-container {
     width: 30%;
     align-items: flex-start;
@@ -50,10 +51,19 @@ body.charListGrid #rm_print_characters_block .character_select,
     max-width: 100px;
 }
 
+body.charListGrid #rm_print_characters_block .character_name_block {
+    gap: 0; /* Save a bit of space here */
+    margin-bottom: 0;
+}
+
 body.charListGrid #rm_print_characters_block .bogus_folder_select .ch_name,
+body.charListGrid #rm_print_characters_block .bogus_folder_select .bogus_folder_counter,
 body.charListGrid #rm_print_characters_block .character_select .ch_name,
 body.charListGrid #rm_print_characters_block .group_select .ch_name,
-#user_avatar_block.gridView .avatar-container .ch_name {
+body.charListGrid #rm_print_characters_block .group_select .group_select_counter,
+#user_avatar_block.gridView .avatar-container .ch_name,
+#user_avatar_block.gridView .avatar-container .bogus_folder_counter,
+#user_avatar_block.gridView .avatar-container .group_select_counter {
     width: 100%;
     max-width: 100px;
     text-align: center;
@@ -62,6 +72,7 @@ body.charListGrid #rm_print_characters_block .group_select .ch_name,
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select .character_name_block,
 body.charListGrid #rm_print_characters_block .character_select .character_name_block,
+body.charListGrid #rm_print_characters_block .group_select .group_name_block,
 #user_avatar_block.gridView .avatar-container .character_name_block {
     width: 100%;
     flex-direction: column;
@@ -74,7 +85,9 @@ body.charListGrid #rm_print_characters_block .character_select .character_name_b
 
 body.charListGrid #rm_print_characters_block .bogus_folder_select .character_select_container,
 body.charListGrid #rm_print_characters_block .character_select .character_select_container,
-#user_avatar_block.gridView .avatar-container .character_select_container {
+body.charListGrid #rm_print_characters_block .group_select .group_select_container,
+#user_avatar_block.gridView .avatar-container .character_select_container,
+#user_avatar_block.gridView .avatar-container .group_select_container {
     width: 100%;
     justify-content: center;
     max-width: 100px;
@@ -95,9 +108,9 @@ body.charListGrid #rm_print_characters_block .group_select .group_name_block {
 
 body.charListGrid #rm_print_characters_block .ch_description,
 body.charListGrid #rm_print_characters_block .tags_inline,
-body.charListGrid #rm_print_characters_block .character_version,
 body.charListGrid #rm_print_characters_block .group_select_block_list,
 body.charListGrid #rm_print_characters_block .ch_avatar_url,
+body.charListGrid #rm_print_characters_block .character_version,
 body.charListGrid #rm_print_characters_block .character_name_block_sub_line,
 #user_avatar_block.gridView .avatar-container .ch_description,
 body.charListGrid #rm_print_characters_block .bogus_folder_select_back .bogus_folder_back_placeholder {
@@ -108,9 +121,16 @@ body.charListGrid #rm_print_characters_block .bogus_folder_select_back .avatar {
     display: flex !important;
 }
 
+
+body.charListGrid #rm_print_characters_block .ch_add_placeholder {
+    display: flex !important;
+    opacity: 0; /* Hack for keeping the spacing */
+}
+
 /*big avatars mode page-wide changes*/
 
 body.big-avatars .character_select .avatar,
+body.big-avatars .group_select .avatar,
 body.big-avatars .bogus_folder_select .avatar {
     flex: unset;
 }
diff --git a/public/index.html b/public/index.html
index 6d532d60e..92ba990bc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4749,8 +4749,9 @@
             <div class="flex-container wide100pLess70px character_select_container">
                 <div class="wide100p character_name_block">
                     <span class="ch_name"></span>
-                    <small class="character_version"></small>
-                    <small class="ch_avatar_url"></small>
+                    <small class="ch_additional_info ch_add_placeholder">+++</small>
+                    <small class="ch_additional_info character_version"></small>
+                    <small class="ch_additional_info ch_avatar_url"></small>
                 </div>
                 <i class="ch_fav_icon fa-solid fa-star"></i>
                 <input class="ch_fav" value="" hidden />
@@ -5000,7 +5001,7 @@
             <div class="flex-container wide100pLess70px gap5px group_select_container">
                 <div class="wide100p group_name_block character_name_block">
                     <div class="ch_name"></div>
-                    <small class="character_version group_select_counter"></small>
+                    <small class="ch_additional_info group_select_counter"></small>
                 </div>
                 <small class="character_name_block_sub_line">in this group</small>
                 <i class='group_fav_icon fa-solid fa-star'></i>
@@ -5018,7 +5019,7 @@
             <div class="flex-container wide100pLess70px character_select_container">
                 <div class="wide100p character_name_block">
                     <span class="ch_name"></span>
-                    <small class="character_version bogus_folder_counter"></small>
+                    <small class="ch_additional_info bogus_folder_counter"></small>
                 </div>
                 <small class="character_name_block_sub_line bogus_folder_hidden_counter"></small>
                 <div class="bogus_folder_avatars_block avatars_inline avatars_inline_small tags tags_inline"></div>
diff --git a/public/style.css b/public/style.css
index d152f6d97..002cf8ecd 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1644,6 +1644,10 @@ input[type=search]:focus::-webkit-search-cancel-button {
     color: var(--grey7070a);
 }
 
+.character_name_block .ch_add_placeholder {
+    display: none;
+}
+
 .ch_avatar_url {
     font-style: italic;
 }