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

19
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
templ CreateProfile(action string, method string, data CreateProfileData) {
<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 class="w-full py-1">
<sl-progress-bar value="50"></sl-progress-bar>
@ -47,10 +47,27 @@ templ CreateProfile(action string, method string, data CreateProfileData) {
</sl-button>
</div>
<style>
.card-form {
margin: 1rem;
}
.card-form [slot='footer'] {
display: flex;
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>