- fix charPanel div heights - fix noHotswap area height & flex dir

506e2f2c6f186fb30a0fff6ce80c54b732e8cd2d

RossAscends <124905043+RossAscends@users.noreply.github.com>

Parents: 192d50afb0975cf95c5120e9f1a9b1c40ea54e8e
6 files changed, +59 -21Ignore whitespace
public/css/st-tailwind.css+5 -1
@@ -332,6 +332,10 @@
332332 overflow: hidden;
333333}
334334
335+.overflowYScroll {
336+ overflow-y: scroll;
337+}
338+
335339.padding0 {
336340 padding: 0;
337341}
@@ -614,4 +618,4 @@ ul.li-padding-bot10 li {
614618
615619.wordBreakAll {
616620 word-break: break-all;
617621}
621 \ No newline at end of file
public/css/toggle-dependent.css+8 -1
@@ -19,6 +19,7 @@ body:not(.tts) #ttsExtensionNarrateAll {
1919}
2020
2121body.no-hotswap .hotswap,
22+body.no-hotswap .hotswap~hr,
2223body.no-timer .mes_timer,
2324body.no-timestamps .timestamp,
2425body.no-tokenCount .tokenCounterDisplay,
@@ -28,6 +29,12 @@ body.hideChatAvatars .mesAvatarWrapper .avatar {
2829 display: none !important;
2930}
3031
32+body.no-hotswap #CharListButtonAndHotSwaps .flex-container {
33+ flex-wrap: nowrap;
34+ align-items: flex-end;
35+ flex-flow: row;
36+}
37+
3138body.hideChatAvatars .last_mes:not(.smallSysMes) {
3239 padding-bottom: 20px !important;
3340}
@@ -521,4 +528,4 @@ label[for="trim_spaces"]:not(:has(input:checked)) small {
521528
522529label[for="bind_preset_to_connection"]:has(input:checked) {
523530 color: var(--active);
524531}
531 \ No newline at end of file
public/index.html+19 -17
@@ -140,7 +140,7 @@
140140 <div data-preset-manager-import="novel" class="margin0 menu_button_icon menu_button" title="Import preset" data-i18n="[title]Import preset">
141141 <i class="fa-fw fa-solid fa-file-import"></i>
142142 </div>
143143 <div data-preset-manager-export="novel" class="margin0 menu_button_icon menu_button" title="Export preset" data-i18n="[title]Export preset">
144144 <i class="fa-fw fa-solid fa-file-export"></i>
145145 </div>
146146 <div data-preset-manager-delete="novel" class="margin0 menu_button_icon menu_button" title="Delete the preset" data-i18n="[title]Delete the preset">
@@ -663,7 +663,7 @@
663663 <div data-source="openrouter" class="range-block">
664664 <div class="range-block-title" title="Allow compressing requests by removing messages from the middle of the prompt.">
665665 <span data-i18n="Middle-out Transform">Middle-out Transform</span>
666666 <a href="https://openrouter.ai/docs/transforms" target="_blank" rel="noreferrer noopener" class="note-link-span fa-solid fa-circle-question"></a>
667667 </div>
668668 <div class="wide100p">
669669 <select id="openrouter_middleout" class="text_pole">
@@ -3300,16 +3300,16 @@
33003300 <span id="vertexai_service_account_info"></span>
33013301 </div>
33023302 <textarea id="vertexai_service_account_json" class="text_pole textarea_compact" rows="4" placeholder='Paste your Service Account JSON content here, e.g.:
33033303 {
33043304 "type": "service_account",
33053305 "project_id": "your-project-id",
33063306 "private_key_id": "...",
33073307 "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
33083308 "client_email": "...",
33093309 "client_id": "...",
33103310 "auth_uri": "https://accounts.google.com/o/oauth2/auth",
33113311 "token_uri": "https://oauth2.googleapis.com/token"
33123312 }'></textarea>
33133313 <div data-for="vertexai_service_account_json" class="neutral_warning" data-i18n="For privacy reasons, your Service Account JSON content will be hidden after you reload the page.">
33143314 For privacy reasons, your Service Account JSON content will be hidden after you reload the page.
33153315 </div>
@@ -3825,7 +3825,7 @@
38253825 <input id="instruct_bind_to_context" type="checkbox" style="display:none;" />
38263826 <small><i class="fa-solid fa-link menu_button margin0"></i></small>
38273827 </label>
38283828 <label id="instruct_enabled_label" for="instruct_enabled" class="checkbox_label flex1" title="Enable Instruct Mode" data-i18n="[title]instruct_enabled">
38293829 <input id="instruct_enabled" type="checkbox" style="display:none;" />
38303830 <small><i class="fa-solid fa-power-off menu_button togglable margin0"></i></small>
38313831 </label>
@@ -5284,7 +5284,7 @@
52845284 <div class="flex-container wide100p alignitemscenter spaceBetween flexNoGap">
52855285 <div class="flex-container alignItemsBaseline wide100p">
52865286 <div class="flex1 flex-container alignItemsBaseline">
52875287 <h3 class="margin0" >
52885288 <span data-i18n="Persona Management">Persona Management</span>
52895289 <a href="https://docs.sillytavern.app/usage/core-concepts/personas/" target="_blank">
52905290 <span class="fa-solid fa-circle-question note-link-span"></span>
@@ -5455,10 +5455,12 @@
54555455 <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>
54565456 </div>
54575457 <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
54585458 <div class="hotswap avatars_inline scroll-reset-container expander" data-i18n="[no_favs]Favorite characters to add them to HotSwaps" no_favs="Favorite characters to add them to HotSwaps"></div>
5459+ </div>
5460+ <hr class="wide100p">
54595461 </div>
54605462 </div>
5461- <hr>
5463+
54625464 <!-- this div structure must be preserved until group peeking can adjust -->
54635465 <div id="rm_PinAndTabs">
54645466 <div id="right-nav-panel-tabs" class="">
@@ -7488,4 +7490,4 @@
74887490 </script>
74897491</body>
74907492
74917493</html>
7493 \ No newline at end of file
public/script.js+22 -0
@@ -10339,9 +10339,25 @@ export async function doNavbarIconClick() {
1033910339 icon.toggleClass('openIcon closedIcon');
1034010340 drawer.toggleClass('openDrawer closedDrawer');
1034110341
10342+ //commented code is to prevent scrollbars showing during transition, if we want to do that
10343+ //'scrollableInner' only exists on samplers panel though, so will need different logic for each drawer
10344+ //this does create an undesireable leftward width retraction of about 15px if a natural scrollbar pops after transition
10345+ //however, if we don't prevent the transition scrollbar, we get a 15px expansion right when it is no longer needed
10346+ //we get to pick our poison. (or...we go with just opacity transitions and stop caring about height and layout shifts.)
10347+ //only true fix for this is to make scrollbars always show (overflow-y:scroll), and style them so they are transparent until div hover
10348+ //this creates a 15px perma-padding on the right of the div tho, even when not needed
10349+ //example of this can be seen on STMP's pastChat list
10350+
10351+ //drawer.find('.scrollableInner').addClass('overflowHidden'); //prevents scrollbars
10352+ //await delay(250); //this duration is presumed
10353+ //drawer.find('.scrollableInner').removeClass('overflowHidden'); //restore after transition
10354+
1034210355 if (targetDrawerID === 'right-nav-panel') {
1034310356 favsToHotswap();
1034410357 $('#rm_print_characters_block').trigger('scroll');
10358+ const hotSwapBlockHeight = $('#CharListButtonAndHotSwaps').css('height');
10359+ const heightMinusHotSwapBlockHeight = 'calc(100% - ' + hotSwapBlockHeight + ')';
10360+ $('#rm_ch_create_block, #rm_characters_block').css('height', heightMinusHotSwapBlockHeight);
1034510361 }
1034610362
1034710363 // Set the height of "autoSetHeight" textareas within the drawer to their scroll height
@@ -10353,8 +10369,14 @@ export async function doNavbarIconClick() {
1035310369 }
1035410370 }
1035510371 } else if (drawerWasOpenAlready) {
10372+
10373+ //drawer.find('.scrollableInner').toggleClass('overflowHidden'); //prevents scrollbars
10374+
1035610375 icon.toggleClass('closedIcon openIcon');
1035710376 drawer.toggleClass('closedDrawer openDrawer');
10377+
10378+ //await delay(250); //this duration is presumed
10379+ //drawer.find('.scrollableInner').toggleClass('overflowHidden'); //restore to default
1035810380 }
1035910381}
1036010382
public/scripts/power-user.js+3 -0
@@ -453,6 +453,9 @@ function fixMarkdown(text, forDisplay) {
453453function switchHotswap() {
454454 $('body').toggleClass('no-hotswap', !power_user.hotswap_enabled);
455455 $('#hotswapEnabled').prop('checked', power_user.hotswap_enabled);
456+ const hotSwapBlockHeight = $('#CharListButtonAndHotSwaps').css('height');
457+ const heightMinusHotSwapBlockHeight = 'calc(100% - ' + hotSwapBlockHeight + ')';
458+ $('#rm_ch_create_block, #rm_characters_block').css('height', heightMinusHotSwapBlockHeight);
456459}
457460
458461function switchTimer() {
public/style.css+2 -2
@@ -3369,7 +3369,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
33693369#form_create {
33703370 display: flex;
33713371 flex-direction: column;
33723372 height: calc(100% - var(--topBarBlockSize));
33733373 overflow-y: auto;
33743374 padding: 1px;
33753375}
@@ -6209,4 +6209,4 @@ body:not(.movingUI) .drawer-content.maximized {
62096209.info-block.error {
62106210 border-color: var(--error-color, #e87f7f);
62116211 background-color: rgba(241, 163, 163, 0.2);
62126212}
6212 \ No newline at end of file