From 8d507c2de7d2d3a97c6ccb0d29cdf04cdb927cd4 Mon Sep 17 00:00:00 2001
From: Freeplay <freeplay@duck.com>
Date: Thu, 8 Jun 2023 14:16:00 -0400
Subject: [PATCH] allow scrolling from body again, keep scrollbar in widgets
---
packages/client/src/init.ts | 1 -
packages/client/src/style.scss | 2 --
packages/client/src/ui/universal.vue | 16 +++++++++-------
packages/client/src/ui/universal.widgets.vue | 20 ++++++++++++--------
4 files changed, 21 insertions(+), 18 deletions(-)
diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index 13d3d31b1..5d9ae12f3 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -219,7 +219,6 @@ 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;
})();
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 454751da3..b225c77ca 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -73,7 +73,6 @@ html {
body::-webkit-scrollbar {
width: 12px;
height: 12px;
-
}
body::-webkit-scrollbar-thumb {
border-radius: 100px;
@@ -111,7 +110,6 @@ html._themeChanging_ {
html, body {
margin: 0;
padding: 0;
- height: 100%;
}
.swiper-slide {
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index ff942c5f7..d376ad1fe 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -19,7 +19,7 @@
</main>
</MkStickyContainer>
- <div v-if="isDesktop" ref="widgetsEl" class="widgets">
+ <div v-if="isDesktop" ref="widgetsEl" class="widgets-container">
<XWidgets />
</div>
@@ -523,7 +523,7 @@ console.log(mainRouter.currentRoute.value.name);
width: 750px;
background: var(--panel);
border-radius: 0;
- overflow: auto;
+ overflow: clip;
--margin: 12px;
background: var(--bg);
}
@@ -543,19 +543,21 @@ 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);
}
}
- > .widgets {
- padding: 0 var(--margin);
- width: 300px;
+ > .widgets-container {
+ margin-right: calc(var(--margin) / 2);
+ width: calc(300px + (var(--margin) * 1.5));
flex: 0 0 auto;
box-sizing: content-box;
- overflow: auto;
+ > :deep(.widgets) {
+ padding-left: var(--margin);
+ padding-right: calc(var(--margin) / 2);
+ }
@media (max-width: $widgets-hide-threshold) {
display: none;
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index d86d41ed8..deb5c27eb 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -1,5 +1,5 @@
<template>
- <aside class="efzpzdvf" :aria-label="i18n.ts._deck._columns.widgets">
+ <aside class="widgets" :aria-label="i18n.ts._deck._columns.widgets">
<MkAd class="a" :prefer="['widget']" />
<XWidgets
:edit="editMode"
@@ -83,20 +83,24 @@ function updateWidgets(widgets) {
</script>
<style lang="scss" scoped>
-.efzpzdvf {
+.widgets {
position: sticky;
+ top: var(--stickyTop, 0px);
height: min-content;
min-height: 100vh;
- padding: var(--margin) 0;
- box-sizing: border-box;
+ max-height: 100vh;
+ box-sizing: content-box;
+ overflow: hidden auto;
+ &:not(:hover):not(:focus-within)::-webkit-scrollbar {
+ width: 0;
+ }
> * {
margin: var(--margin) 0;
width: 300px;
-
- &:first-child {
- margin-top: 0;
- }
+ }
+ > :first-child {
+ margin-top: calc(var(--margin) * 2);
}
> .add {