Optimize character list layouts

This commit is contained in:
SillyLossy
2023-05-08 15:16:55 +03:00
parent 1774636883
commit 7d181fd2e8
3 changed files with 19 additions and 16 deletions

View File

@ -1857,27 +1857,24 @@
<div name="Character List Panel" id="rm_characters_block" class="right_menu"> <div name="Character List Panel" id="rm_characters_block" class="right_menu">
<div id="charListFixedTop"> <div id="charListFixedTop">
<div class="form_create_bottom_buttons_block"> <form id="form_character_search_form" action="javascript:void(null);">
<div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div> <div id="rm_button_create" title="Create New Character" class="menu_button fa-solid fa-user-plus "></div>
<div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div> <div id="character_import_button" title="Import Character from File" class="menu_button fa-solid fa-file-arrow-up "></div>
<div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div> <div id="rm_button_group_chats" title="Create New Chat Group" class="menu_button fa-solid fa-users-gear "></div>
</div> <input id="character_search_bar" class="text_pole" type="search" placeholder="Search..." maxlength="50" />
<form id="form_character_search_form" action="javascript:void(null);">
<input id="character_search_bar" class="text_pole" type="search" placeholder="Character search..." maxlength="50" />
<select id="character_sort_order" title="Characters sorting order"> <select id="character_sort_order" title="Characters sorting order">
<option data-field="name" data-order="asc">Name, A-Z</option> <option data-field="name" data-order="asc">A-Z</option>
<option data-field="name" data-order="desc">Name, Z-A</option> <option data-field="name" data-order="desc">Z-A</option>
<option data-field="date_added" data-order="desc">Date added, newer first</option> <option data-field="date_added" data-order="desc">Newest</option>
<option data-field="date_added" data-order="asc">Date added, older first</option> <option data-field="date_added" data-order="asc">Oldest</option>
<option data-field="fav" data-order="desc" data-rule="boolean">Favorites first</option> <option data-field="fav" data-order="desc" data-rule="boolean">Favorites</option>
<option data-field="date_last_chat" data-order="desc">Recently chatted</option> <option data-field="date_last_chat" data-order="desc">Recent</option>
<option data-field="chat_size" data-order="desc">Most chatted</option> <option data-field="chat_size" data-order="desc">Most chats</option>
<option data-field="chat_size" data-order="asc">Least chatted</option> <option data-field="chat_size" data-order="asc">Least chats</option>
</select> </select>
</form> </form>
<div class="rm_tag_controls"> <div class="rm_tag_controls">
<div id="rm_tag_filter" class="tags"></div> <div id="rm_tag_filter" class="tags"></div>
<div class="tags_view menu_button fa-solid fa-tags" title="Manage Tags"></div>
</div> </div>
</div> </div>
<div id="rm_print_characters_block"></div> <div id="rm_print_characters_block"></div>

View File

@ -18,6 +18,7 @@ const TAG_LOGIC_AND = true; // switch to false to use OR logic for combining tag
const CHARACTER_SELECTOR = '#rm_print_characters_block > div'; const CHARACTER_SELECTOR = '#rm_print_characters_block > div';
const ACTIONABLE_TAGS = { const ACTIONABLE_TAGS = {
VIEW: { id: 2, name: 'Manage tags', color: 'rgba(150, 100, 100, 0.5)', action: onViewTagsListClick, icon: 'fa-solid fa-tags' },
FAV: { id: 1, name: 'Show only favorites', color: 'rgba(255, 255, 0, 0.5)', action: applyFavFilter, icon: 'fa-solid fa-star' }, FAV: { id: 1, name: 'Show only favorites', color: 'rgba(255, 255, 0, 0.5)', action: applyFavFilter, icon: 'fa-solid fa-star' },
GROUP: { id: 0, name: 'Show only groups', color: 'rgba(100, 100, 100, 0.5)', action: filterByGroups, icon: 'fa-solid fa-users' }, GROUP: { id: 0, name: 'Show only groups', color: 'rgba(100, 100, 100, 0.5)', action: filterByGroups, icon: 'fa-solid fa-users' },
} }

View File

@ -1059,20 +1059,25 @@ select option:not(:checked) {
#form_character_search_form { #form_character_search_form {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: stretch;
margin: 5px; margin: 5px;
column-gap: 10px; column-gap: 5px;
}
#form_character_search_form .menu_button {
margin: 0;
} }
#character_sort_order { #character_sort_order {
margin: 0; margin: 0;
flex: 1; flex: 1;
height: auto;
} }
#character_search_bar { #character_search_bar {
margin: 0;
flex: 1; flex: 1;
padding-left: 0.75em; padding-left: 0.75em;
margin: 0;
} }
input[type=search]::-webkit-search-cancel-button { input[type=search]::-webkit-search-cancel-button {