lfg2025/sapien
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix signup install step footer layout

Browse Source
This commit is contained in:
Dorian
2026-05-15 17:48:08 -05:00
parent 9fe43d60a3
commit a0b0417eee
2 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/App.vue
View File

@@ -3642,12 +3642,26 @@ watch(mobileMenuOpen, (open) => {
</p>
</div>
<div class="modal-footer border-t border-white/10 p-5">
<button v-if="signupStep > 0 && signupStep < 5" class="secondary-action" type="button" @click="previousStep">
Back
</button>
<div class="modal-footer border-t border-white/10 p-5" :class="{ 'install-step-footer': signupStep === 1 }">
<template v-if="signupStep === 0">
<button class="primary-action" type="button" @click="startSignup">
Start signup
</button>
</template>
<template v-if="signupStep === 5">
<template v-else-if="signupStep === 1">
<button class="secondary-action" type="button" @click="previousStep">
Back
</button>
<button class="primary-action" type="button" @click="handlePwaInstallPrimary">
{{ pwaInstallPrimaryLabel }}
</button>
<button v-if="installPlatform !== 'ios' && !isPwaStandalone" class="skip-app-action" type="button" @click="continueWithoutInstall">
Skip app
</button>
</template>
<template v-else-if="signupStep === 5">
<button class="secondary-action" type="button" @click="openBackup">
Export
</button>
@@ -3655,24 +3669,21 @@ watch(mobileMenuOpen, (open) => {
Import
</button>
</template>
<button v-if="signupStep === 0" class="primary-action" type="button" @click="startSignup">
Start signup
</button>
<button v-else-if="signupStep === 1" class="primary-action" type="button" @click="handlePwaInstallPrimary">
{{ pwaInstallPrimaryLabel }}
</button>
<button v-if="signupStep === 1 && installPlatform !== 'ios' && !isPwaStandalone" class="skip-app-action" type="button" @click="continueWithoutInstall">
Skip app
</button>
<button v-else-if="signupStep < 4" class="primary-action" type="button" @click="nextStep">
Continue
</button>
<button v-else-if="signupStep === 4" class="primary-action" type="button" :disabled="isCreatingMembership" @click="createMembership">
<span v-if="isCreatingMembership" class="button-spinner-only" aria-label="Creating card">
<img src="/images/small-logo.svg" alt="" />
</span>
<template v-else>Enable alerts & create card</template>
</button>
<template v-else>
<button class="secondary-action" type="button" @click="previousStep">
Back
</button>
<button v-if="signupStep < 4" class="primary-action" type="button" @click="nextStep">
Continue
</button>
<button v-else-if="signupStep === 4" class="primary-action" type="button" :disabled="isCreatingMembership" @click="createMembership">
<span v-if="isCreatingMembership" class="button-spinner-only" aria-label="Creating card">
<img src="/images/small-logo.svg" alt="" />
</span>
<template v-else>Enable alerts & create card</template>
</button>
</template>
</div>
</div>
</div>

10
src/style.css
View File

@@ -1203,6 +1203,16 @@ body.menu-open {
grid-column: 1 / -1;
}
.modal-footer.install-step-footer {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.modal-footer.install-step-footer .primary-action {
grid-column: auto;
min-height: 3.85rem;
white-space: nowrap;
}
.skip-app-action {
grid-column: 1 / -1;
justify-self: center;