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 @@
5485 </div>5485 </div>
5486 </div>5486 </div>
5487 <!-- end group peeking cope structure-->5487 <!-- end group peeking cope structure-->
5488
5489 <div class="scrollableInner">
5488 <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">5490 <div name="Solo Char Create/Edit Panel" id="rm_ch_create_block" class="right_menu flex-container flexFlowColumn" style="display: none;">
5489 <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">5491 <form id="form_create" action="javascript:void(null);" method="post" enctype="multipart/form-data">
5490 <div id="avatar-and-name-block">5492 <div id="avatar-and-name-block">
@@ -5820,6 +5822,7 @@
5820 </div>5822 </div>
5821 <div id="rm_print_characters_block" class="flexFlowColumn"></div>5823 <div id="rm_print_characters_block" class="flexFlowColumn"></div>
5822 </div>5824 </div>
5825 </div>
5823 </nav>5826 </nav>
5824 </div>5827 </div>
5825 </div>5828 </div>
public/script.js+0 -3
@@ -10355,9 +10355,6 @@ export async function doNavbarIconClick() {
10355 if (targetDrawerID === 'right-nav-panel') {10355 if (targetDrawerID === 'right-nav-panel') {
10356 favsToHotswap();10356 favsToHotswap();
10357 $('#rm_print_characters_block').trigger('scroll');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);
10361 }10358 }
1036210359
10363 // Set the height of "autoSetHeight" textareas within the drawer to their scroll height10360 // 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) {
453function switchHotswap() {453function switchHotswap() {
454 $('body').toggleClass('no-hotswap', !power_user.hotswap_enabled);454 $('body').toggleClass('no-hotswap', !power_user.hotswap_enabled);
455 $('#hotswapEnabled').prop('checked', power_user.hotswap_enabled);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);
459}456}
460457
461function switchTimer() {458function switchTimer() {
public/style.css+39 -38
@@ -3369,7 +3369,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
3369#form_create {3369#form_create {
3370 display: flex;3370 display: flex;
3371 flex-direction: column;3371 flex-direction: column;
3372 height: calc(100% - var(--topBarBlockSize));3372 height: 100%;
3373 overflow-y: auto;3373 overflow-y: auto;
3374 padding: 1px;3374 padding: 1px;
3375}3375}
@@ -4996,43 +4996,6 @@ a:hover {
4996/* Right nav panel and nav-toggle */4996/* Right nav panel and nav-toggle */
4997/* ############################################################# */4997/* ############################################################# */
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
5036#nav-toggle {4999#nav-toggle {
5037 position: fixed;5000 position: fixed;
5038 right: 13px;5001 right: 13px;
@@ -5476,6 +5439,44 @@ body:not(.movingUI) .drawer-content.maximized {
5476 }5439 }
5477}5440}
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
5479.scrollableInner {5480.scrollableInner {
5480 overflow-x: hidden;5481 overflow-x: hidden;
5481 height: calc(100% - 30px);5482 height: calc(100% - 30px);