Revisit purchase list editor

dboehmer commented 3 years ago

Not part of this issue:

list of purchase lists /purchase_lists
for now strategy desktop first, mobile will come later:-)
[x] replace text in "remove" buttons with waste basket icon
- by default grey
- on hover red
[x] tabular view with light grey lines, split long bullet list points in columns: total, date, dishes
- not yet defined: display of dish comments: extra column??
- all "remove" buttons vertically aligned
- numbers (amount of items, amounts of dish ingredients) right aligned
[x] move buttons for convertible units from far right to left, just below the current total amount+current unit (maybe smaller font size)
[x] drop table column Convert to …

rico-hengst commented 3 years ago

Issue partially implemented!

Screenshot from 2021-01-03 17-38-02

Remarks see image: Small button-group with including a form breaks button-group The unit conversion via button close to the amount column is not finished (A). The usage of a bootstrap button-group is preferred. In this case the form include the button-group breaks the expected layout. My suggestion:

modification of the controller to change units
controller dont uses form parameters
so we are able to create simple buttons in a button-group within onclick="window.location.href=controller...url"*

Convert column ... still exists (B)

Remove button ... was moved in front to dishes column (C)

Dishes column ... contains now a "inner" table (D). I think we should discuss the inner table dis-advantage!

Currently the columns of our different section tables are no well horizontal aligned, see C,D.

dboehmer commented 3 years ago

My suggestion:

modification of the controller to change units

controller dont uses form parameters

so we are able to create simple buttons in a button-group within onclick="window.location.href=controller...url"

I’m not sure what you mean. The btn-group can’t contain multiple <form> with hidden inputs and submit buttons, right?

Well, the conversion is a data change and that must not happen via HTTP GET. I think the solution would be to give each submit button in the btn-group a unique name or value.

You’ve used <button>s instead of <input type="submit">. I think, you can give both a name and a value to each of them. So can you just replace the hidden inputs with a name/value attribute pair on the <button>?

(Later on [not in this issue] we can make such forms act with JavaScript and „Ajax“ and work without a complete page reload.)

dboehmer commented 3 years ago

Dishes column ... contains now a "inner" table (D). I think we should discuss the inner table dis-advantage!

Currently the columns of our different section tables are no well horizontal aligned, see C,D.

Yeah, nested tables are a no-go. I’ve just checked it up in master: previously it was a <ul> in the <td>. I see 2 possible solutions:

still a <li> button with invisible (no) bullet points (like in the nav bars)
a table row for each dish ingedient and rowspan on all other columns, colspan=4 for the main table heading Dishes

Solution 1 will probably not allow to vertically align date, meal and dish. Do you feel like going for 2?

dboehmer commented 3 years ago

I will assist you with:

[x] enable button group to POST form for unit conversion
[x] provide next lower and next higher number from controller for TT
[x] provide a TT variable window_title that allows setting the <head><title> without setting the title in <body>

dboehmer commented 3 years ago

Currently the highlighted button for the current unit has no action but is clickable:

On page load: highlighted, clickable

After click:

I tried <button class="..." disabled> but then it’s not highlighted:

[x] make button for current unit not clickable but highlighted

dboehmer commented 3 years ago

[x] fix whitespace

dboehmer commented 3 years ago

We’ve just settled to drop our custom increase/decrease butttons. Instead we don’t hide the browser-builtin buttons.

Instead use defaultNumbers: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#offering_suggested_values

[x] drop custom increase/decrease buttons
[x] stop hiding the default increase/decrease buttons
[x] provide next_lower_value and next_higher_value as defaultNumbers

dboehmer / coocook

Revisit purchase list editor #133