go/sonr
go/sonr
1
1
Fork 0
mirror of https://github.com/onsonr/sonr.git synced 2025-03-10 13:07:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

style: Improve mobile responsiveness for create profile form

Browse Source
This commit is contained in:
Prad Nukala 2024-12-10 00:46:38 -05:00
parent 49c8a8c6d0
commit 6127d80f2a
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
pkg/common/styles/forms/create_profile.templ
View File

@ -18,7 +18,7 @@ func (d CreateProfileData) IsHumanLabel() string {
// ProfileForm is a standard form styled like a card // ProfileForm is a standard form styled like a card
templ CreateProfile(action string, method string, data CreateProfileData) { templ CreateProfile(action string, method string, data CreateProfileData) {
<form action={ templ.SafeURL(action) } method={ method }> <form action={ templ.SafeURL(action) } method={ method }>
<sl-card class="card-form gap-4 max-w-lg"> <sl-card class="card-form gap-4 w-full max-w-lg mx-auto px-4 sm:px-6">
<div slot="header"> <div slot="header">
<div class="w-full py-1"> <div class="w-full py-1">
<sl-progress-bar value="50"></sl-progress-bar> <sl-progress-bar value="50"></sl-progress-bar>
@ -47,12 +47,29 @@ templ CreateProfile(action string, method string, data CreateProfileData) {
</sl-button> </sl-button>
</div> </div>
<style> <style>
.card-form [slot='footer'] { .card-form {
display: flex; margin: 1rem;
justify-content: space-between; }
align-items: center; .card-form [slot='footer'] {
} display: flex;
</style> justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
@media (max-width: 640px) {
.card-form {
margin: 0.5rem;
}
.card-form [slot='footer'] {
flex-direction: column-reverse;
width: 100%;
}
.card-form [slot='footer'] sl-button {
width: 100%;
}
}
</style>
</sl-card> </sl-card>
</form> </form>
} }