Wrap right menu in scrollableInner

4bb5f8daa9a1800148a35df8ac78f784e5cf2fa7

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 506e2f2c6f186fb30a0fff6ce80c54b732e8cd2d
4 files changed, +42 -44Showing whitespace changes
public/index.html+3 -0
@@ -5485,6 +5485,8 @@
54855485 </div>
54865486 </div>
54875487 <!-- end group peeking cope structure-->
5488+
5489+ <div class="scrollableInner">
54885490 <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
54895491 <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
54905492 <div id="avatar-and-name-block">
@@ -5820,6 +5822,7 @@
58205822 </div>
58215823 <div id="rm_print_characters_block" class="flexFlowColumn"></div>
58225824 </div>
5825+ </div>
58235826 </nav>
58245827 </div>
58255828 </div>
public/script.js+0 -3
@@ -10355,9 +10355,6 @@ export async function doNavbarIconClick() {
1035510355 if (targetDrawerID === 'right-nav-panel') {
1035610356 favsToHotswap();
1035710357 $('#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);
1036110358 }
1036210359
1036310360 // Set the height of "autoSetHeight" textareas within the drawer to their scroll height
public/scripts/power-user.js+0 -3
@@ -453,9 +453,6 @@ 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);
459456}
460457
461458function switchTimer() {
public/style.css+39 -38
@@ -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}
@@ -4996,43 +4996,6 @@ a:hover {
49964996/* Right nav panel and nav-toggle */
49974997/* ############################################################# */
49984998
4999-#right-nav-panel {
5000- width: calc((100vw - var(--sheldWidth) - 2px) /2);
5001- width: calc((100dvw - var(--sheldWidth) - 2px) /2);
5002- max-height: calc(100vh - var(--topBarBlockSize));
5003- max-height: calc(100dvh - var(--topBarBlockSize));
5004- height: 0;
5005- position: fixed;
5006- top: 0;
5007- margin: 0;
5008- right: 0;
5009- left: calc(100% - var(--sheldWidth) /2 + var(--sheldWidth) +1px);
5010- padding: 5px;
5011- margin-bottom: 5px;
5012- backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
5013- background-color: var(--SmartThemeBlurTintColor);
5014- -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
5015- z-index: 3000;
5016-
5017- border: 1px solid var(--SmartThemeBorderColor);
5018-
5019- box-shadow: none;
5020- border-radius: 10px;
5021- overflow: hidden;
5022- flex-flow: column;
5023- min-width: 100px;
5024-}
5025-
5026-#right-nav-panel.openDrawer {
5027- height: calc(100vh - var(--topBarBlockSize));
5028- height: calc(100dvh - var(--topBarBlockSize));
5029- height: calc-size((100dvh - var(--topBarBlockSize)), size);
5030-
5031- @starting-style {
5032- height: 0;
5033- }
5034-}
5035-
50364999#nav-toggle {
50375000 position: fixed;
50385001 right: 13px;
@@ -5476,6 +5439,44 @@ body:not(.movingUI) .drawer-content.maximized {
54765439 }
54775440}
54785441
5442+.fillRight {
5443+ width: calc((100vw - var(--sheldWidth) - 2px) /2);
5444+ width: calc((100dvw - var(--sheldWidth) - 2px) /2);
5445+ max-height: calc(100vh - var(--topBarBlockSize));
5446+ max-height: calc(100dvh - var(--topBarBlockSize));
5447+ height: 0;
5448+ position: fixed;
5449+ top: 0;
5450+ margin: 0;
5451+ right: 0;
5452+ left: calc(100% - var(--sheldWidth) /2 + var(--sheldWidth) +1px);
5453+ padding: 5px;
5454+ margin-bottom: 5px;
5455+ backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
5456+ background-color: var(--SmartThemeBlurTintColor);
5457+ -webkit-backdrop-filter: blur(calc(var(--SmartThemeBlurStrength)));
5458+ z-index: 3000;
5459+
5460+ border: 1px solid var(--SmartThemeBorderColor);
5461+
5462+ box-shadow: none;
5463+ border-radius: 10px;
5464+ overflow: hidden;
5465+ flex-flow: column;
5466+ min-width: 100px;
5467+}
5468+
5469+.fillRight.openDrawer {
5470+ display: flex;
5471+ height: calc(100vh - var(--topBarBlockSize));
5472+ height: calc(100dvh - var(--topBarBlockSize));
5473+ height: calc-size((100dvh - var(--topBarBlockSize)), size);
5474+
5475+ @starting-style {
5476+ height: 0;
5477+ }
5478+}
5479+
54795480.scrollableInner {
54805481 overflow-x: hidden;
54815482 height: calc(100% - 30px);