natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

allow scrolling from body again, keep scrollbar in widgets

This commit is contained in:
Freeplay 2023-06-08 14:16:00 -04:00
parent 2c39e99875
commit 449a75319a
4 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/client/src/init.ts
View File

@ -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;
})(); })();

2
packages/client/src/style.scss
View File

@ -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 {

16
packages/client/src/ui/universal.vue
View File

@ -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;

20
packages/client/src/ui/universal.widgets.vue
View File

@ -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 { > :first-child {
margin-top: 0; margin-top: calc(var(--margin) * 2);
}
} }
> .add { > .add {