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

(enhance) 戻る・次へボタンを全ページでstickyに

This commit is contained in:
kakkokari-gtyih 2023-10-25 21:15:10 +09:00
parent 6a95b8c1c0
commit 783c9ca52d
1 changed files with 61 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/frontend/src/components/MkUserSetupDialog.vue
View File

@ -49,24 +49,32 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<template v-else-if="page === 1"> <template v-else-if="page === 1">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :marginMin="20" :marginMax="28"> <div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<XProfile/> <XProfile/>
<div class="_buttonsCenter" style="margin-top: 16px;"> </MkSpacer>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton> <MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton> <MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div> </div>
</MkSpacer> </div>
</div>
</div> </div>
</template> </template>
<template v-else-if="page === 2"> <template v-else-if="page === 2">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :marginMin="20" :marginMax="28"> <div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<XPrivacy/> <XPrivacy/>
<div class="_buttonsCenter" style="margin-top: 16px;"> </MkSpacer>
<div :class="$style.pageFooter">
<div class="_buttonsCenter">
<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton> <MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
<MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton> <MkButton primary rounded gradate data-cy-user-setup-continue @click="page++">{{ i18n.ts.continue }} <i class="ti ti-arrow-right"></i></MkButton>
</div> </div>
</MkSpacer> </div>
</div>
</div> </div>
</template> </template>
<template v-else-if="page === 3"> <template v-else-if="page === 3">
@ -119,7 +127,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<template v-else-if="page === 6"> <template v-else-if="page === 6">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :marginMin="20" :marginMax="28"> <div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<XTutorialNote phase="aboutNote"/> <XTutorialNote phase="aboutNote"/>
</MkSpacer> </MkSpacer>
<div :class="$style.pageFooter"> <div :class="$style.pageFooter">
@ -129,10 +138,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template v-else-if="page === 7"> <template v-else-if="page === 7">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :marginMin="20" :marginMax="28"> <div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<div class="_gaps"> <div class="_gaps">
<XTutorialNote phase="howToReact" @reacted="isReactionTutorialPushed = true"/> <XTutorialNote phase="howToReact" @reacted="isReactionTutorialPushed = true"/>
<div v-if="!isReactionTutorialPushed">{{ i18n.ts._initialTutorial._reaction.reactToContinue }}</div> <div v-if="!isReactionTutorialPushed">{{ i18n.ts._initialTutorial._reaction.reactToContinue }}</div>
@ -145,10 +156,12 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template v-else-if="page === 8"> <template v-else-if="page === 8">
<div style="height: 100cqh; overflow: auto;"> <div style="height: 100cqh; overflow: auto;">
<MkSpacer :marginMin="20" :marginMax="28"> <div :class="$style.pageRoot">
<MkSpacer :marginMin="20" :marginMax="28" :class="$style.pageMain">
<XTutorialTimeline phase="howToReact"/> <XTutorialTimeline phase="howToReact"/>
</MkSpacer> </MkSpacer>
<div :class="$style.pageFooter"> <div :class="$style.pageFooter">
@ -158,6 +171,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<template v-else-if="page === 9"> <template v-else-if="page === 9">
<div :class="$style.centerPage"> <div :class="$style.centerPage">
@ -294,10 +308,21 @@ async function later(later: boolean) {
box-sizing: border-box; box-sizing: border-box;
} }
.pageRoot {
display: flex;
flex-direction: column;
min-height: 100%;
}
.pageMain {
flex-grow: 1;
}
.pageFooter { .pageFooter {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
left: 0; left: 0;
flex-shrink: 0;
padding: 12px; padding: 12px;
border-top: solid 0.5px var(--divider); border-top: solid 0.5px var(--divider);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);