mirror/hotomoe
1
0
Fork 0
mirror of https://github.com/hotomoe/hotomoe synced 2024-11-24 15:16:13 +09:00
Code

Tweak UI

Browse Source
This commit is contained in:
syuilo 2021-04-14 03:34:56 +09:00
parent 930127348a
commit e404e5e2de
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/client/components/ui/folder.vue
View File

@ -98,11 +98,10 @@ export default defineComponent({
> header {
display: flex;
position: relative;
z-index: 2;
// TODO
// position: sticky;
// top: var(--stickyTopOffset);
// backdrop-filter: blur(20px);
z-index: 10;
position: sticky;
top: var(--stickyTop, 0px);
backdrop-filter: blur(20px);
> .title {
margin: 0;

2
src/client/directives/sticky-container.ts
View File

@ -5,7 +5,7 @@ export default {
//const query = binding.value;
const header = src.children[0];
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop');
const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop') || '0px';
src.style.setProperty('--stickyTop', `${parseInt(currentStickyTop) + header.offsetHeight}px`);
header.style.setProperty('--stickyTop', currentStickyTop);
header.style.position = 'sticky';

1
src/client/ui/universal.vue
View File

@ -259,6 +259,7 @@ export default defineComponent({
> .contents {
width: 100%;
min-width: 0;
--stickyTop: #{$header-height};
&.withHeader {
padding-top: $header-height;