- fix charPanel div heights - fix noHotswap area height & flex dir
| @@ -332,6 +332,10 @@ | ||
| 332 | 332 | overflow: hidden; |
| 333 | 333 | } |
| 334 | 334 | |
| 335 | +.overflowYScroll { | |
| 336 | + overflow-y: scroll; | |
| 337 | +} | |
| 338 | + | |
| 335 | 339 | .padding0 { |
| 336 | 340 | padding: 0; |
| 337 | 341 | } |
| @@ -19,6 +19,7 @@ body:not(.tts) #ttsExtensionNarrateAll { | ||
| 19 | 19 | } |
| 20 | 20 | |
| 21 | 21 | body.no-hotswap .hotswap, |
| 22 | +body.no-hotswap .hotswap~hr, | |
| 22 | 23 | body.no-timer .mes_timer, |
| 23 | 24 | body.no-timestamps .timestamp, |
| 24 | 25 | body.no-tokenCount .tokenCounterDisplay, |
| @@ -28,6 +29,12 @@ body.hideChatAvatars .mesAvatarWrapper .avatar { | ||
| 28 | 29 | display: none !important; |
| 29 | 30 | } |
| 30 | 31 | |
| 32 | +body.no-hotswap #CharListButtonAndHotSwaps .flex-container { | |
| 33 | + flex-wrap: nowrap; | |
| 34 | + align-items: flex-end; | |
| 35 | + flex-flow: row; | |
| 36 | +} | |
| 37 | + | |
| 31 | 38 | body.hideChatAvatars .last_mes:not(.smallSysMes) { |
| 32 | 39 | padding-bottom: 20px !important; |
| 33 | 40 | } |
| @@ -5455,10 +5455,12 @@ | ||
| 5455 | 5455 | <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> |
| 5456 | 5456 | </div> |
| 5457 | 5457 | <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p"> |
| 5458 | 5458 | <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 | 5459 | </div> |
| 5460 | + <hr class="wide100p"> | |
| 5460 | 5461 | </div> |
| 5461 | 5462 | <hr/div> |
| 5463 | + | |
| 5462 | 5464 | <!-- this div structure must be preserved until group peeking can adjust --> |
| 5463 | 5465 | <div id="rm_PinAndTabs"> |
| 5464 | 5466 | <div id="right-nav-panel-tabs" class=""> |
| @@ -10339,9 +10339,25 @@ export async function doNavbarIconClick() { | ||
| 10339 | 10339 | icon.toggleClass('openIcon closedIcon'); |
| 10340 | 10340 | drawer.toggleClass('openDrawer closedDrawer'); |
| 10341 | 10341 | |
| 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 | + | |
| 10342 | 10355 | if (targetDrawerID === 'right-nav-panel') { |
| 10343 | 10356 | favsToHotswap(); |
| 10344 | 10357 | $('#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); | |
| 10345 | 10361 | } |
| 10346 | 10362 | |
| 10347 | 10363 | // Set the height of "autoSetHeight" textareas within the drawer to their scroll height |
| @@ -10353,8 +10369,14 @@ export async function doNavbarIconClick() { | ||
| 10353 | 10369 | } |
| 10354 | 10370 | } |
| 10355 | 10371 | } else if (drawerWasOpenAlready) { |
| 10372 | + | |
| 10373 | + //drawer.find('.scrollableInner').toggleClass('overflowHidden'); //prevents scrollbars | |
| 10374 | + | |
| 10356 | 10375 | icon.toggleClass('closedIcon openIcon'); |
| 10357 | 10376 | drawer.toggleClass('closedDrawer openDrawer'); |
| 10377 | + | |
| 10378 | + //await delay(250); //this duration is presumed | |
| 10379 | + //drawer.find('.scrollableInner').toggleClass('overflowHidden'); //restore to default | |
| 10358 | 10380 | } |
| 10359 | 10381 | } |
| 10360 | 10382 | |
| @@ -453,6 +453,9 @@ function fixMarkdown(text, forDisplay) { | ||
| 453 | 453 | function switchHotswap() { |
| 454 | 454 | $('body').toggleClass('no-hotswap', !power_user.hotswap_enabled); |
| 455 | 455 | $('#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); | |
| 456 | 459 | } |
| 457 | 460 | |
| 458 | 461 | function switchTimer() { |
| @@ -3369,7 +3369,7 @@ input[type=search]:focus::-webkit-search-cancel-button { | ||
| 3369 | 3369 | #form_create { |
| 3370 | 3370 | display: flex; |
| 3371 | 3371 | flex-direction: column; |
| 3372 | 3372 | height: calc(100% - var(--topBarBlockSize)); |
| 3373 | 3373 | overflow-y: auto; |
| 3374 | 3374 | padding: 1px; |
| 3375 | 3375 | } |