Cosmetic issues with the new structured packagings page

[monsieurtanuki]

The new structured packagings page was written quickly, as a Minimum Viable Page.

There are pending less important issues:

### Tasks
- [x] Appropriate Card color in Dark mode (cf. #3504)
- [x] Check if we need hints for text fields or info in whatever format, as the fields are not always self-explanatory
- [ ] Check if we would be better off with cached autocomplete data (for shape, material, recycling) - probably there aren't that many values, and the autocomplete needs the internet
- [x] Handle the fields as numeric for `int?` (number of units) and `double?` (weight in grams) - with a specific keyboard option?
- [x] Check if the numeric values are correct before being sent - for the moment we only try to convert them from text fields, with a lazy `null` value if the text field does not contain a numeric
- [ ] Check that the value of the keyboard "next" key is actually "next"or "terminate" when appropriate - I think that for the moment it's always "terminate" even when there are fields afterwards
- [ ] Cursor is at top of 1st component when adding a 2nd component #3622

Part of

• 515

[teolemon]

• Ok, surprise demo with the Cabinet Ministériel tomorrow morning to check if the minister can put her skin promoting the app, it seems.

potential beef up ideas

• I think a little space between the fields would go a long way to make it feel cleaner
• Perhaps we can add the icons from the maximalist design

[teolemon]

Can we add warnings ? "Hint: Sometimes, the materials like ♵ are hidden below the pack, in 3D, on the plastic." "Hint: For accurate packaging weight measurements, please clean any food residue and then dry any water."

[monsieurtanuki]

@teolemon I think I accidentally added spaces in #3513 (cf. screenshot) - is that spaced enough? Do you have the URLs or SVGs for the logos? It could be something like that:

[monsieurtanuki]

Can we add warnings ?

Like that, repeated for each component? Or just written for the first component? Or written on top of the page? Or written somewhere else?

[teolemon]

The svgs are above

[teolemon]

I think we can repeat for now.

[monsieurtanuki]

The svgs are above

Yes and no: as far as I'm concerned, I see a copy/paste of black raster icons, but nothing vectorial.

[teolemon]

I would make the field title full width, so that it does not compete for width with the field

[monsieurtanuki]

I would make the field title full width, so that it does not compete for width with the field

You mean ICON + TITLE on one line (possibly with a hint as subtitle), and one line below the field (but still half the screen width, right?). If you ask me it looks like a lot of wasted space. So don't ask me ;)

[monsieurtanuki]

For the repeated hints, we could do like in simple input pages: an optional info icon that opens the full info:

collapsed	expanded

[teolemon]

The counter and material are raster, damn, fixing that I was thinking full screen width, but given multiple components, that might be way too much vertical space, indeed

[teolemon]

[teolemon]

I have to run now, I can do something custom, but meanwhile: here's https://world-fr.openfoodfacts.org/images/lang/en/packaging/04-ldpe.90x90.svg

[teolemon]

Right clicking the minitatures all should point you to SVGs

[teolemon]

Could we build the card title as we input it ? "Component #1 - {nb_of_units} {material} {shape}"

[monsieurtanuki]

We don't have enough space to put both on the same line. Suggestions:	number first	number last

With the side effect for the "number last" suggestion when the component is empty - there's no title and just a subtitle. Could be easily solved with the following:

• if the component is empty, "number first" (a 'component n°1' title and no subtitle)
• else, "number last" (a data relevant title and a 'component n°1' subtitle)

[monsieurtanuki]

That said, the autocomplete feature is flawed and the slightest change to it makes the app behaves unpredictably. Therefore, refreshing the component label is definitely not for today.

[teolemon]

I've had backlash on putting the field and the title and the icon on the same line, from @alexgarel who has a small device.

In the initial mockup, this was edge to edge, so let's try going this way (plus icons possibly)

[teolemon]

# Unit = element, not unit of measure
msgctxt "packaging_number_of_units_description"
msgid "Enter the number of packaging units of the same shape and material contained in the product."
msgstr "Enter the number of packaging units of the same shape and material contained in the product."

msgctxt "packaging_shape_description"
msgid "Enter the shape name listed in the recycling instructions if they are available, or select a shape."
msgstr "Enter the shape name listed in the recycling instructions if they are available, or select a shape."

msgctxt "packaging_material_description"
msgid "Enter the specific material if it can be determined (a material code inside a triangle can often be found on packaging parts), or a generic material (for instance plastic or metal) if you are unsure."
msgstr "Enter the specific material if it can be determined (a material code inside a triangle can often be found on packaging parts), or a generic material (for instance plastic or metal) if you are unsure."

msgctxt "packaging_recycling_description"
msgid "Enter recycling instructions only if they are listed on the product."
msgstr "Enter recycling instructions only if they are listed on the product."

# Unit = element, not unit of measure
msgctxt "packaging_weight_description"
msgid "Remove any remaining food and wash and dry the packaging part before weighting. If possible, use a scale with 0.1g or 0.01g precision."
msgstr "Remove any remaining food and wash and dry the packaging part before weighting. If possible, use a scale with 0.1g or 0.01g precision."

# Unit = element, not unit of measure
msgctxt "packaging_quantity_per_unit_description"
msgid "Enter the net weight or net volume and indicate the unit (for example g or ml)."
msgstr "Enter the net weight or net volume and indicate the unit (for example g or ml)."

[monsieurtanuki]

@teolemon Do you mean you want those info/hints for each item, instead of just info/hints for material and weight?