usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(frontend): refactor page styles

This commit is contained in:
syuilo 2025-03-22 18:25:45 +09:00
parent 16cde5568d
commit b5f86e5210
5 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/frontend/src/components/global/PageWithHeader.vue
View File

@ -4,11 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkStickyContainer class="_pageScrollable"> <div :class="[$style.root, reversed ? '_pageScrollableReversed' : '_pageScrollable']">
<template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template> <MkStickyContainer>
<slot></slot> <template #header><MkPageHeader v-model:tab="tab" :actions="actions" :tabs="tabs"/></template>
<template #footer><slot name="footer"></slot></template> <div :class="$style.body">
</MkStickyContainer> <slot></slot>
</div>
<template #footer><slot name="footer"></slot></template>
</MkStickyContainer>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -21,6 +25,7 @@ const props = withDefaults(defineProps<{
thin?: boolean; thin?: boolean;
hideTitle?: boolean; hideTitle?: boolean;
displayMyAvatar?: boolean; displayMyAvatar?: boolean;
reversed?: boolean;
}>(), { }>(), {
tabs: () => ([] as Tab[]), tabs: () => ([] as Tab[]),
}); });
@ -29,5 +34,11 @@ const tab = defineModel<string>('tab');
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.root {
}
.body {
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
</style> </style>

6
packages/frontend/src/pages/channel.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"> <PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :class="$style.main"> <MkSpacer :contentMax="700">
<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
<div v-if="channel && tab === 'overview'" class="_gaps"> <div v-if="channel && tab === 'overview'" class="_gaps">
<div class="_panel" :class="$style.bannerContainer"> <div class="_panel" :class="$style.bannerContainer">
@ -270,10 +270,6 @@ definePage(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.main {
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
.footer { .footer {
-webkit-backdrop-filter: var(--MI-blur, blur(15px)); -webkit-backdrop-filter: var(--MI-blur, blur(15px));
backdrop-filter: var(--MI-blur, blur(15px)); backdrop-filter: var(--MI-blur, blur(15px));

6
packages/frontend/src/pages/list.vue
View File

@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</p> </p>
</div> </div>
</MkSpacer> </MkSpacer>
<MkSpacer v-else-if="list" :contentMax="700" :class="$style.main"> <MkSpacer v-else-if="list" :contentMax="700">
<div v-if="list" class="members _margin"> <div v-if="list" class="members _margin">
<div :class="$style.member_text">{{ i18n.ts.members }}</div> <div :class="$style.member_text">{{ i18n.ts.members }}</div>
<div class="_gaps_s"> <div class="_gaps_s">
@ -106,10 +106,6 @@ definePage(() => ({
})); }));
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.main {
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
.userItem { .userItem {
display: flex; display: flex;
} }

6
packages/frontend/src/pages/my-lists/list.vue
View File

@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<PageWithHeader :actions="headerActions" :tabs="headerTabs"> <PageWithHeader :actions="headerActions" :tabs="headerTabs">
<MkSpacer :contentMax="700" :class="$style.main"> <MkSpacer :contentMax="700">
<div v-if="list" class="_gaps"> <div v-if="list" class="_gaps">
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.settings }}</template> <template #label>{{ i18n.ts.settings }}</template>
@ -197,10 +197,6 @@ definePage(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.main {
min-height: calc(100cqh - (var(--MI-stickyTop, 0px) + var(--MI-stickyBottom, 0px)));
}
.userItem { .userItem {
display: flex; display: flex;
} }

9
packages/frontend/src/style.scss
View File

@ -184,6 +184,15 @@ rt {
overscroll-behavior: contain; overscroll-behavior: contain;
} }
._pageScrollableReversed {
height: 100%;
overflow: auto;
overflow-y: scroll;
overscroll-behavior: contain;
display: flex;
flex-direction: column-reverse;
}
._indicatorCircle { ._indicatorCircle {
display: inline-block; display: inline-block;
width: 1em; width: 1em;