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

Tweak UI

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 { > header {
display: flex; display: flex;
position: relative; position: relative;
z-index: 2; z-index: 10;
// TODO position: sticky;
// position: sticky; top: var(--stickyTop, 0px);
// top: var(--stickyTopOffset); backdrop-filter: blur(20px);
// backdrop-filter: blur(20px);
> .title { > .title {
margin: 0; margin: 0;

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

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

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

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