Merge pull request '[PR]: Split content/sidebar scrolling on default/centered views' (#10292) from esm/calckey:fix/column-scroll-split into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10292
This commit is contained in:
Kainoa Kanter 2023-06-08 16:46:42 +00:00
commit 4dbe74a6bd
3 changed files with 8 additions and 14 deletions

View File

@ -219,6 +219,7 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
const rootEl = document.createElement("div");
rootEl.id = MISSKEY_MOUNT_DIV_ID;
rootEl.style.height = "100%";
document.body.appendChild(rootEl);
return rootEl;
})();

View File

@ -111,6 +111,7 @@ html._themeChanging_ {
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.swiper-slide {

View File

@ -20,7 +20,7 @@
</MkStickyContainer>
<div v-if="isDesktop" ref="widgetsEl" class="widgets">
<XWidgets @mounted="attachSticky" />
<XWidgets />
</div>
<button
@ -380,17 +380,6 @@ const onContextmenu = (ev: MouseEvent) => {
);
};
const attachSticky = (el: any) => {
const sticky = new StickySidebar(widgetsEl);
window.addEventListener(
"scroll",
() => {
sticky.calc(window.scrollY);
},
{ passive: true }
);
};
function top() {
window.scroll({ top: 0, behavior: "smooth" });
}
@ -451,7 +440,7 @@ console.log(mainRouter.currentRoute.value.name);
$widgets-hide-threshold: 1090px;
// 100vh ... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc(var(--vh, 1vh) * 100);
height: 100%;
box-sizing: border-box;
display: flex;
@ -534,7 +523,7 @@ console.log(mainRouter.currentRoute.value.name);
width: 750px;
background: var(--panel);
border-radius: 0;
overflow: clip;
overflow: auto;
--margin: 12px;
background: var(--bg);
}
@ -554,6 +543,7 @@ console.log(mainRouter.currentRoute.value.name);
> .contents {
width: 100%;
min-width: 0;
overflow: auto;
$widgets-hide-threshold: 1090px;
@media (max-width: $widgets-hide-threshold) {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
@ -563,7 +553,9 @@ console.log(mainRouter.currentRoute.value.name);
> .widgets {
padding: 0 var(--margin);
width: 300px;
flex: 0 0 auto;
box-sizing: content-box;
overflow: auto;
@media (max-width: $widgets-hide-threshold) {
display: none;