Revisit purchase list editor

Question

Revisit purchase list editor

dboehmer opened this issue 4 years ago · comments

Daniel Böhmer commented 4 years ago

Not part of this issue:

list of purchase lists /purchase_lists
for now strategy desktop first, mobile will come later:-)

replace text in "remove" buttons with waste basket icon
- by default grey
- on hover red
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
move buttons for convertible units from far right to left, just below the current total amount+current unit (maybe smaller font size)
drop table column Convert to …

rico-hengst · Answer 1 · Mon Jan 04 2021 01:16:58 GMT+0800 (China Standard Time)

Issue partially implemented!

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.

Daniel Böhmer · Answer 2 · Sat Jan 09 2021 18:06:53 GMT+0800 (China Standard Time)

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.)

Daniel Böhmer · Answer 3 · Sat Jan 09 2021 18:15:05 GMT+0800 (China Standard Time)

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?

Daniel Böhmer · Answer 4 · Thu Feb 04 2021 06:50:33 GMT+0800 (China Standard Time)

I will assist you with:

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

Daniel Böhmer · Answer 5 · Wed Mar 10 2021 23:20:30 GMT+0800 (China Standard Time)

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:

make button for current unit not clickable but highlighted

Daniel Böhmer · Answer 6 · Wed Mar 10 2021 23:58:20 GMT+0800 (China Standard Time)

fix whitespace

Daniel Böhmer · Answer 7 · Thu Mar 18 2021 06:20:18 GMT+0800 (China Standard Time)

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

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