allow scrolling from body again, keep scrollbar in widgets
This commit is contained in:
parent
2c39e99875
commit
449a75319a
|
@ -219,7 +219,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
|
||||||
|
|
||||||
const rootEl = document.createElement("div");
|
const rootEl = document.createElement("div");
|
||||||
rootEl.id = MISSKEY_MOUNT_DIV_ID;
|
rootEl.id = MISSKEY_MOUNT_DIV_ID;
|
||||||
rootEl.style.height = "100%";
|
|
||||||
document.body.appendChild(rootEl);
|
document.body.appendChild(rootEl);
|
||||||
return rootEl;
|
return rootEl;
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -73,7 +73,6 @@ html {
|
||||||
body::-webkit-scrollbar {
|
body::-webkit-scrollbar {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
|
|
||||||
}
|
}
|
||||||
body::-webkit-scrollbar-thumb {
|
body::-webkit-scrollbar-thumb {
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
|
@ -111,7 +110,6 @@ html._themeChanging_ {
|
||||||
html, body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide {
|
.swiper-slide {
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
</main>
|
</main>
|
||||||
</MkStickyContainer>
|
</MkStickyContainer>
|
||||||
|
|
||||||
<div v-if="isDesktop" ref="widgetsEl" class="widgets">
|
<div v-if="isDesktop" ref="widgetsEl" class="widgets-container">
|
||||||
<XWidgets />
|
<XWidgets />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -523,7 +523,7 @@ console.log(mainRouter.currentRoute.value.name);
|
||||||
width: 750px;
|
width: 750px;
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
overflow: auto;
|
overflow: clip;
|
||||||
--margin: 12px;
|
--margin: 12px;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
}
|
}
|
||||||
|
@ -543,19 +543,21 @@ console.log(mainRouter.currentRoute.value.name);
|
||||||
> .contents {
|
> .contents {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: auto;
|
|
||||||
$widgets-hide-threshold: 1090px;
|
$widgets-hide-threshold: 1090px;
|
||||||
@media (max-width: $widgets-hide-threshold) {
|
@media (max-width: $widgets-hide-threshold) {
|
||||||
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
|
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> .widgets {
|
> .widgets-container {
|
||||||
padding: 0 var(--margin);
|
margin-right: calc(var(--margin) / 2);
|
||||||
width: 300px;
|
width: calc(300px + (var(--margin) * 1.5));
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
overflow: auto;
|
> :deep(.widgets) {
|
||||||
|
padding-left: var(--margin);
|
||||||
|
padding-right: calc(var(--margin) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: $widgets-hide-threshold) {
|
@media (max-width: $widgets-hide-threshold) {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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']" />
|
<MkAd class="a" :prefer="['widget']" />
|
||||||
<XWidgets
|
<XWidgets
|
||||||
:edit="editMode"
|
:edit="editMode"
|
||||||
|
@ -83,20 +83,24 @@ function updateWidgets(widgets) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.efzpzdvf {
|
.widgets {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
top: var(--stickyTop, 0px);
|
||||||
height: min-content;
|
height: min-content;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: var(--margin) 0;
|
max-height: 100vh;
|
||||||
box-sizing: border-box;
|
box-sizing: content-box;
|
||||||
|
overflow: hidden auto;
|
||||||
|
&:not(:hover):not(:focus-within)::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
margin: var(--margin) 0;
|
margin: var(--margin) 0;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
|
> :first-child {
|
||||||
|
margin-top: calc(var(--margin) * 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
> .add {
|
> .add {
|
||||||
|
|
Loading…
Reference in New Issue