Fix label display issue when label contains SVG image #491 #493

Merged

tordans merged 7 commits from fix-answer-with-image-style-#491 into develop

2021-10-01 00:35:48 +02:00

tordans commented

2021-09-30 21:52:46 +02:00

(Migrated from github.com)

This is based on top of https://github.com/pietervdvn/MapComplete/pull/485 to use the JIT mode.

Commits

Replace inline style with TW classes
29e7fea
Refactoring: Small html/variables changes
43618fe
Refactoring: Random spaces / newline changes
b8dc106
Checkboxes: Margin only bottom …
9889b0d
We only need it to the bottom and left/right mess with w-full in this css-setup.
TW Classes instead of inline; no pointer event "all" …
821c976
The way I read https://developer.mozilla.org/de/docs/Web/CSS/pointer-events, pointer-events: all is a special SVG thing and what we want here, is what TW provides with pointer-events-none https://tailwindcss.com/docs/pointer-events so that event pass through.
Fix #491 with custom HTML/Classes inside translations …
8e040a8
This is not the fixed I hoped for, but the JS generates so many empty  tags that I cannot get rid of, that it is not possible to style this "from the outside", which is unfortunate.
==> Follow up question: Is there a way to get rid of those empty spans?

Screenshots

nl-a nl-b

en-a en-b

Fixes #491

This is based on top of https://github.com/pietervdvn/MapComplete/pull/485 to use the JIT mode. ---- # Commits * Replace inline style with TW classes 29e7fea * Refactoring: Small html/variables changes 43618fe * Refactoring: Random spaces / newline changes b8dc106 * Checkboxes: Margin only bottom … 9889b0d We only need it to the bottom and left/right mess with w-full in this css-setup. * TW Classes instead of inline; no pointer event "all" … 821c976 The way I read https://developer.mozilla.org/de/docs/Web/CSS/pointer-events, `pointer-events: all` is a special SVG thing and what we want here, is what TW provides with `pointer-events-none` https://tailwindcss.com/docs/pointer-events so that event pass through. * Fix #491 with custom HTML/Classes inside translations … 8e040a8 This is not the fixed I hoped for, but the JS generates so many empty `` tags that I cannot get rid of, that it is not possible to style this "from the outside", which is unfortunate. ==> Follow up question: Is there a way to get rid of those empty spans? ![image](https://user-images.githubusercontent.com/111561/135521083-629713cb-535b-4043-a5ed-7627211ea2ba.png) ---- # Screenshots <img width="388" alt="nl-a" src="https://user-images.githubusercontent.com/111561/135521212-cbbfe3ff-32be-44d8-88cb-c3bdb4190b6e.png"> <img width="396" alt="nl-b" src="https://user-images.githubusercontent.com/111561/135521207-9b77455e-2ec7-41d7-b10d-a02b7d06f6d3.png"> <img width="394" alt="en-a" src="https://user-images.githubusercontent.com/111561/135521205-42238854-252c-48bc-a2d1-08e0ff8d1150.png"> <img width="402" alt="en-b" src="https://user-images.githubusercontent.com/111561/135521200-287e828a-668d-4ec0-84e0-409db72aeadf.png"> --- Fixes #491

pietervdvn commented

2021-10-01 00:35:43 +02:00

(Migrated from github.com)

Really cool again!

This is not the fixed I hoped for, but the JS generates so many empty tags that I cannot get rid of, that it is not possible to style this "from the outside", which is unfortunate.
==> Follow up question: Is there a way to get rid of those empty spans?

Some 'spans' are generated by Combine elements, I should optimize those one day.
While you were working on it, I also encapsulated those answers in a div with flex + flex col, so I merged both changes.

Really cool again! > This is not the fixed I hoped for, but the JS generates so many empty tags that I cannot get rid of, that it is not possible to style this "from the outside", which is unfortunate. ==> Follow up question: Is there a way to get rid of those empty spans? Some 'spans' are generated by Combine elements, I should optimize those one day. While you were working on it, I also encapsulated those answers in a div with flex + flex col, so I merged both changes.

👍 1

tordans commented

2021-10-01 06:49:34 +02:00

(Migrated from github.com)

@pietervdvn I just thought about another approach that would make this setup a bit cleaner IMO:
Would it be possible to split the translations in something like …

Now…

                    "6": {
                        "then": "<div class='flex gap-4'><img class='w-12' src='./assets/layers/charging_station/Type1_J1772.svg'/><p><b>Type 1 with cable</b> (J1772)</p></div>"
                    },

Then…

                    "6": {
                        "optImage": "<img class='w-12' src='./assets/layers/charging_station/Type1_J1772.svg'/>"
                        "then": "<p><b>Type 1 with cable</b> (J1772)"
                    },

(Or does it have to be like this?)

                    "6": {
                        "then": {
                            "optImage": "<img class='w-12' src='./assets/layers/charging_station/Type1_J1772.svg'/>"
                            "text": "<p><b>Type 1 with cable</b> (J1772)"
                        }
                    },

This would allow tho move the flex-divs inside code an only apply then if optImgage is present.

One could also use optImagePath to move even more HTML to the code, but that would disallow other possible "workarounds" like different image sizes and such.

However, ATM I don't understand enough of the code to know how to build this…

@pietervdvn I just thought about another approach that would make this setup a bit cleaner IMO: Would it be possible to split the translations in something like … Now… ```json "6": { "then": "<div class='flex gap-4'><img class='w-12' src='./assets/layers/charging_station/Type1_J1772.svg'/>Type 1 with cable (J1772)</div>" }, ``` Then… ```json "6": { "optImage": "<img class='w-12' src='./assets/layers/charging_station/Type1_J1772.svg'/>" "then": "Type 1 with cable (J1772)" }, ``` (Or does it have to be like this?) ```json "6": { "then": { "optImage": "<img class='w-12' src='./assets/layers/charging_station/Type1_J1772.svg'/>" "text": "Type 1 with cable (J1772)" } }, ``` This would allow tho move the flex-divs inside code an only apply then if `optImgage` is present. One could also use `optImagePath` to move even more HTML to the code, but that would disallow other possible "workarounds" like different image sizes and such. However, ATM I don't understand enough of the code to know how to build this…

No reviewers

No labels

Rows
Columns