More compact layout of right panel

This commit is contained in:
SillyLossy
2023-05-08 16:09:05 +03:00
parent 7d181fd2e8
commit 977bfbf4f5
5 changed files with 20 additions and 18 deletions

View File

@ -1672,16 +1672,17 @@
<div class="fa-solid checked fa-lock" alt=""></div> <div class="fa-solid checked fa-lock" alt=""></div>
</label> </label>
</div> </div>
<div class="hotswap flex-container justifyCenter">
</div>
<div id="right-nav-panel-tabs"> <div id="right-nav-panel-tabs">
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div> <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
<div class="right_menu_button" id="rm_button_selected_ch"> <div id="rm_button_selected_ch">
<h2></h2> <h2></h2>
</div> </div>
</div> </div>
</div> </div>
<div class="hotswap flex-container justifyCenter">
</div>
<div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;"> <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
<form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data"> <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">

View File

@ -274,7 +274,7 @@ async function RA_autoloadchat() {
export async function favsToHotswap() { export async function favsToHotswap() {
const selector = ['#rm_print_characters_block .character_select', '#rm_print_characters_block .group_select'].join(','); const selector = ['#rm_print_characters_block .character_select', '#rm_print_characters_block .group_select'].join(',');
const container = $('#rm_PinAndTabs .hotswap'); const container = $('#right-nav-panel .hotswap');
const template = $('#hotswap_template .hotswapAvatar'); const template = $('#hotswap_template .hotswapAvatar');
container.empty(); container.empty();
const maxCount = 6; const maxCount = 6;

View File

@ -171,7 +171,7 @@ async function convertSoloToGroupChat() {
const character = characters[this_chid]; const character = characters[this_chid];
// Populate group required fields // Populate group required fields
const name = getUniqueName(`Chat with ${character.name}`, y => groups.findIndex(x => x.name === y) !== -1); const name = getUniqueName(`Group: ${character.name}`, y => groups.findIndex(x => x.name === y) !== -1);
const avatar = getThumbnailUrl('avatar', character.avatar); const avatar = getThumbnailUrl('avatar', character.avatar);
const chatName = humanizedDateTime(); const chatName = humanizedDateTime();
const chats = [chatName]; const chats = [chatName];

View File

@ -1066,7 +1066,7 @@ async function createGroup() {
const memberNames = characters.filter(x => members.includes(x.avatar)).map(x => x.name).join(", "); const memberNames = characters.filter(x => members.includes(x.avatar)).map(x => x.name).join(", ");
if (!name) { if (!name) {
name = `Chat with ${memberNames}`; name = `Group: ${memberNames}`;
} }
// placeholder // placeholder

View File

@ -562,10 +562,6 @@ code {
} }
.hotswap {
top: -5px;
}
.hotswapAvatar, .hotswapAvatar,
.hotswapAvatar .avatar { .hotswapAvatar .avatar {
width: 50px !important; width: 50px !important;
@ -814,18 +810,21 @@ input[type="file"] {
} }
#right-nav-panel-tabs { #right-nav-panel-tabs {
margin-top: 5px;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
width: 100%;
max-height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 5px; flex: 1;
gap: 10px;
overflow: hidden;
} }
#right-nav-panel-tabs .right_menu_button:last-of-type { #rm_PinAndTabs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
#right-nav-panel-tabs .right_menu_button {
padding-right: 0; padding-right: 0;
} }
@ -911,10 +910,12 @@ input[type="file"] {
} }
#rm_button_selected_ch h2 { #rm_button_selected_ch h2 {
cursor: pointer;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
margin: 0;
} }
.selected-right-tab { .selected-right-tab {