New answers tagged lists
I think the problem that user would face is inability to 'Quickly Refer' desired content if all the content is displayed at same time to the user. Displaying four long lists won't help. A tab based view would work better in this scenario. User would still have access to top level topics (Carbs, Vegetable, Proteins...) at one place and it would work ...
I think huge amounts of data are always difficult to display on mobile. You can think about displaying them in a table or as a list type. Tabs are not a bad idea for the four "categories" you have there for the nutrients. https://material.angularjs.org/latest/demo/tabs or https://material.google.com/components/tabs.html https://material.angularjs.org/...
I suggest you forget about minimizing the amount of clicks, specially on mobile. Number of clicks don't really matter if user knows exactly what (s)he wants. You can simply divide the content on pages, tabs or accordion menus. Must read: Stop Counting Clicks Must read: UX Myths
If possible it is better to have two separate buttons see the post: Expand/collapse all - Combined or separate button(s)?
You could save clicks and effort by simply removing the radio buttons. Why don't you simply let the user click on the buttons on the right (e.g. "Cliente") to open a modal? Once that is filled out you can display a little checkmark image right of the button. To indicate the opening of a modal on button click you should consider changing the text to "...
I think it is very important to distinguish draggable items because not all items have the drag functionality. I agree with your suggestion to at least show some indication that items are draggable. This is most often achieved by having the drag icon appear when hovering over a draggable element: I think adding another visual indicator will help ...
Top 50 recent answers are included