Feat: Increase mobile friendliness of forms #760
Conversation
cdubz
added
enhancement
billybonks
force-pushed
the
feat/mobile-friendly-forms
branch
2 times, most recently
from
af2b31c
to
530b360
Compare
|
@cdubz seems like an unrelated test failure https://github.com/babybuddy/babybuddy/actions/runs/7811519906/job/21306747076?pr=760#step:8:42 passed locally |
Yeah that is an unreliable test I need to sort out at some point. It fails randomly. Seems to be some issue related to timezones. |
billybonks
force-pushed
the
feat/mobile-friendly-forms
branch
from
530b360
to
dc74887
Compare
In order to promote less clicks on the mobile experience, this wideget will splat out the drop down options similar to child select
In order to have more control and flexiability on how elements are rendered create field set implementation. every field set gets rendered in order, and uses the template specified. This should probably be built into the metaclass of the form but i have no idea how to do that.
Create choices template to have all multi choice experience be the same as radio select choices. Moved notes and tags into advanced template in order to reduce the amount of fields in a form for users. Given that these two fields are usually a catch all for anything that is not in the core data model. it is not garunteed that users will use them. If a user does decide to use the fields we will store that selection in localstorage so that they dont have to open it every time. I put the javascript into the page section, as i seem to have had issues with javascript blocks overriding each other.
on mobile it text align center Increased the font size so its easier to click Added translations
having it directly in the page html is not ideal, now its properly isolated. Also use the new classname
billybonks
force-pushed
the
feat/mobile-friendly-forms
branch
from
dc74887
to
111ec34
Compare
There was a problem hiding this comment.
I think I have just one last complaint here -- the radio buttons (see Type and Method in this example) need some more spacing. They seem to be right up against each other right now.
There may be a better way to lay them out generally but just added some evened out spacing would be a nice enough tweak here.
|
@cdubz, i tried to make them take up all available space, with spacing. 
My only concern was that the buttons become quite huge on desktop. 
so i only grow the buttons on mobile 
|
1. add default spacing 2. increase size to use all space on mobile
|
Looks good! Thanks for you work on this! |
While experimenting on #754. I explored variations of form layout with fewer input boxes and replaced drop downs for pills to reduce clicks on mobile.
What I don't want to do is create an entirely forked UI, so this PR attempted to add the elements but using the original skin.
I added the advanced option, as I believe that people will use tags and notes because there is something they cannot represent in the core data model, so ideally, it is not a core feature that people use. For that reason, it defaults to hidden until people use it. Then, it will use the last toggle state.
My implementation of the fieldset might not be ideal; I just did it so that I knew how to do it in Django (hardly code in Python/Django), so feel free to modify or let me know how you want it done.
Adding the toggle code for the details, as I did, is probably not ideal. I'm happy to change.
We could bring back the drop-downs on the desktop if we wanted to by rendering both and using a media query.
Screenshots