feat: create mobile friendly lists #769
Conversation
Yeah definitely interested. One important use case to address though will be multiple children and how to make the card look to capture that. Ideally it is consistent across all models. Otherwise we'll just need to identify the important information from each model to display in the card.
Makes sense I think. Notes are pretty common across models so this would also be an important one to make consistent.
Ageed. |
Added the avatar helper that you built |
Just as an idea here: For the android app, I made it so that one would swipe the whole screen left or right and make sure that the last active child remains the default selected one. That seems to cover most use-cases of babybuddy, I would imagine, since one typically cares for a single child, or twins, making it easy to switch between one ore two children with a single button press. Since swiping is a bit awkward to implement, I suggest some "flipper buttons" on the top as a simple alternative. You could even make the list expandable in a combobox so that can one select a child from a list...
|
|
I think thats a great idea. i will probably reuse Pills i developed for edit forms for simplicty. I do think the app should have a single child vs multi child mode. Right now its multi child focused, i think we can setup something for single child then remove a bunch of stuff from the ui, i will probably do that in a separate pr |
|
@cdubz, decide to just follow a similar pattern for notes on the original table to save some time :), hope it is okay 
|
|
Creted an issue for the child flipper as its a global change in filters.html, so best to handle it seperately |
billybonks
force-pushed
the
mobile-feats/lists
branch
from
e2727ce
to
4d9acee
Compare
billybonks
changed the title
|
Changes made to handle the image edge case.
let me know if you find any other funny behaviours |
|
@cdubz i have also refactored the code, in preparation to reuse across lists can you review the last commit please, and let me know if you want me to change anything with the architecture before i move forward |
billybonks
force-pushed
the
mobile-feats/lists
branch
from
8b3c620
to
d4dd984
Compare
| <div class="mobile-list"> | ||
| {% for change in object_list %}<div class="row"></div>{% endfor %} | ||
| </div> | ||
| <div class="table-responsive"> |
There was a problem hiding this comment.
This can be removed now, right? I think this is causing an empty second list div:
Once that's resolved this is good to go!
Used the prebuilt helper that should have all accessability solutions. If a use has not uploaded an image might be best to use a letter to indicate who the child is. For accounts with only one child its better to remove the picture but that can be a global update (single child mode)
Cards would have variable size due to notes, so the avatar might be a tiny spec if the note is long enough. also changed the alignement for cards with notes to ensure the avatar is always visible
billybonks
force-pushed
the
mobile-feats/lists
branch
from
d4dd984
to
186d700
Compare
We will need to create the list for every list. Enable customisation of the main details using template extension, followed pattern set by cards on dashboard. Secondary details will be the same for all lists for now, this might change as i apply the feature across lists
Sleep only shows duration
1. if duration is 0minutes it displays nothing
2. we can add nap+icon on the right side might need to decrease font
size due to content length
Tummy time
1. I did not add milestone, perhaps this we can see if anyone requests
it later. as it is a free form text field it coudl be complicated
Pumping time was pretty straight foward amount and duration.
Most models have a start and end time. where as daipers have only time.
modified the base template to show start if time is null
billybonks
force-pushed
the
mobile-feats/lists
branch
from
186d700
to
5cf26de
Compare
|
@cdubz sorry for the delay. I fixed the issue you mentioned #769 (comment). i started to explore adding more lists to find issues and i did find some please see commentary on last commit. in addition to those commentaries i found issues with the pumping experience. wanted to get your thoughts before i move forward. @MrApplejuice how did you display the lists on your mobile app 
|
|
@billybonks your latest changes look good me! I don't see any direct questions in your commits -- was there are issue you need some feedback on? |
|
@billybonks let me know if you want to continue work on this or for me to pick it up. I think it's far enough long as-is that I could finalize it if you're not able to get back to it for now. |
For what it is worth, because I was directly asked and because better late than never:
I am working on localization right now, therefore the text is partially Dutch right now. This is how I did it in the Android app. It is pretty much the timeline and only the timeline with infinite scrolling if you are scrolling to the bottom. The idea being that you do not really care about the category of what had happened, but about the most recent events. A strong color scheme plus iconography makes sure that one can hopefully check at-a-glance what has happened. However, this makes the lists not super comparable. I would probably leave out the duration and just use the start and end times, because, personally found those to be a useful to see at a glance than the duration which I pretty much only would use for statistics of aggregation or similar. |
Tables on mobile do not work well because you have to scroll left and right, this will allow us to view all the required information at once.
Before making a reusable template to use for all lists i wanted to see if this is something that the project would like to have. It is possible to rejig the table into cards but its way more ergonomic to just render a separate list of cards.
i was thinking of adding notes as a details at the bottom of the card that a user could open and close. The delete button would go into the edit page. i assume people mostly look at the data and edit versus deleting; thats why i am happy to move it a bit deeper