yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-03-31 13:19:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

fix(frontend): fix broken styles

Browse source
This commit is contained in:
syuilo 2025-03-23 21:23:52 +09:00
parent 260d35e2f0
commit 0471e457fe
5 changed files with 9 additions and 18 deletions
packages
frontend-shared/js
const.ts
frontend/src
components/global
MkStickyContainer.vue
di.tsstyle.scss
ui
universal.vue

6
packages/frontend-shared/js/const.ts
View file

@ -109,12 +109,6 @@ export const ROLE_POLICIES = [
'canImportUserLists',
] as const;
// なんか動かない
//export const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP');
//export const CURRENT_STICKY_BOTTOM = Symbol('CURRENT_STICKY_BOTTOM');
export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM';
export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg';
export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg';
export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg';

11
packages/frontend/src/components/global/MkStickyContainer.vue
View file

@ -23,8 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue';
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@@/js/const.js';
import type { Ref } from 'vue';
import { DI } from '@/di.js';
const rootEl = useTemplateRef('rootEl');
const headerEl = useTemplateRef('headerEl');
@ -32,13 +31,13 @@ const footerEl = useTemplateRef('footerEl');
const headerHeight = ref<string | undefined>();
const childStickyTop = ref(0);
const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
provide(CURRENT_STICKY_TOP, childStickyTop);
const parentStickyTop = inject(DI.currentStickyTop, ref(0));
provide(DI.currentStickyTop, childStickyTop);
const footerHeight = ref<string | undefined>();
const childStickyBottom = ref(0);
const parentStickyBottom = inject<Ref<number>>(CURRENT_STICKY_BOTTOM, ref(0));
provide(CURRENT_STICKY_BOTTOM, childStickyBottom);
const parentStickyBottom = inject(DI.currentStickyBottom, ref(0));
provide(DI.currentStickyBottom, childStickyBottom);
const calc = () => {
// コンポーネントが表示されてないけどKeepAliveで残ってる場合などは null になる

2
packages/frontend/src/di.ts
View file

@ -12,4 +12,6 @@ export const DI = {
mock: Symbol() as InjectionKey<boolean>,
pageMetadata: Symbol() as InjectionKey<Ref<Record<string, any>>>,
viewId: Symbol() as InjectionKey<string>,
currentStickyTop: Symbol() as InjectionKey<Ref<number>>,
currentStickyBottom: Symbol() as InjectionKey<Ref<number>>,
};

4
packages/frontend/src/style.scss
View file

@ -179,14 +179,14 @@ rt {
._pageScrollable {
height: 100%;
overflow: auto;
overflow: clip;
overflow-y: scroll;
overscroll-behavior: contain;
}
._pageScrollableReversed {
height: 100%;
overflow: auto;
overflow: clip;
overflow-y: scroll;
overscroll-behavior: contain;
display: flex;

4
packages/frontend/src/ui/universal.vue
View file

@ -97,7 +97,6 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { defineAsyncComponent, provide, onMounted, computed, ref, watch, useTemplateRef } from 'vue';
import { instanceName } from '@@/js/config.js';
import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js';
import { isLink } from '@@/js/is-link.js';
import XCommon from './_common_/common.vue';
import type { Ref } from 'vue';
@ -200,16 +199,13 @@ const onContextmenu = (ev) => {
};
const navFooterHeight = ref(0);
provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight);
watch(navFooter, () => {
if (navFooter.value) {
navFooterHeight.value = navFooter.value.offsetHeight;
window.document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`);
window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
} else {
navFooterHeight.value = 0;
window.document.body.style.setProperty('--MI-stickyBottom', '0px');
window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
}
}, {