Encapsulated widgets and better layout

[bobintetley]

The main screens for animal, person, waiting list, lost animal, incident etc. all contain raw HTML. Same goes for the move_* screens.

There is no need to do this. tableform has fields_render and fields_bind. The former allows us to create a column of widgets and labels from a list of objects, as used by all of the table screens.

At present, those base screens also use a horrible nested table layout, which is not friendly for portrait mobiles at all. If you're lucky you can scroll horizontal, but it looks terrible.

By simply making those screens use 2 or 3 divs with display: inline-block and a maximum pixel width suitable for mobiles (<480? check), they will stack on portrait mobile but layout as they do now without the need for tables.

Using fields_render and fields_bind will simplify the code in those screens and make the widgets encapsulated so that if we ever want to move away from JQuery UI in the future, it will be a lot easier.

[bobintetley]

added bootstrap-grid.css - may as well use their flexbox/grid rather than rolling our own

[bobintetley]

not sure about using bootstrip grid after all - tried it out with their flexbox container and forces even width columns, which isn't what we always want and causes layout problems. I was still using a table within each column for simplicity. This might be a bigger job and requires a move away from tables altogether. Using tableform.fields_render with nextcol, is still the way to go though as it abstracts everything from the caller.

[bobintetley]

previous commit is a temp fix for portrait mobile to stack nested tables for now while the refactoring to use fields_render is done

[bobintetley]

don't know what I was on about with bootstrap grids, having used them a LOT in the rewriting of the management UI and mobile UI, they are just the job. Replaced the temporary measures with bootstrap. By encapsulating the widget generation as described with tableform, we can slowly move to bootstrap in future. It is a far superior framework to JQUI.

[bobintetley]

consideration is needed for all of the table views. They don't work at all on portrait mobile. Similar to what you did with another system, could we just use a media query to lay the columns out vertically on portrait mobile?

[bobintetley]

advanced find screens are currently broken on portrait mobile too. Added html.search_* methods to common_html.js to make them easier to refactor. I think for the double date fields (Entered between.. and.... ) these should output the two date fields side by side without a separate label so that they become one field - otherwise the second date can get orphaned between desktop and portrait mobile views.

Wondering now if common_html is the right place, maybe all toolkit specifics should be hidden in common_widgets or a new common_ui or something (with tableform delegating to this module).

[bobintetley]

we're using bootstrap grids right now instead of the outer nested tables, but there are issues with it expanding too much into the space (exactly like the old tables did, but they at least size properly on mobile).

I've added our own asm-row and asm-col, which are being used by the find screens and bulk change right now. They aren't quite drop-in replacements for bootstrap row/col though, and they are styling table cells, which is really smelly.

I think this is the order that things need to happen in:

1. Base screens need to be updated to use fields_render, allowing that function to render the container and making sure there's no table tags in the code for those screens.

2. Update tableform.fields_render to remove all use of tables. Field rows will be written as block divs instead of tr and if rowid is not supplied, then one is calculated from post_field if set (eg: post_field + "row"). The container for the whole thing will be an asm-row, with an asm-col for each column. When nextcol is encountered, the current asm-col div is closed and a new one opened - exactly like we did with the horrible nested table mess.

3. Label styles: labels in columns should be a fixed width and be given their own class for identification purposes (easy when it's all done through fields_render). They can finally have end alignment applied to them instead of the td. The fixed width could be 200px since we aim for 200px with widgets, and with gutters that will all fit on a 480px wide smartphone.

[bobintetley]

additional sliders on screens are borked on mobile - they're fixed to a 3 column table layout

[bobintetley]

The reflow table widget breaks the filters - you no longer know what they are filtering on. They need a label at the side too.

[bobintetley]

additional fields should be using tableform.render_X methods now that they expect to output a complete row/field