rugk
Incorrect display of messages on multiple lines
https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines
Currently the icon is e.g. shown in the middle anyway.
Okay, thanks. You're right this needs a little more information.
STR
Trigger a long message, e.g. like this:
- Go to the settings.
- Set quite similar colors for background and QR code color, i.e. e.g.
#A0A0C1and#FFFFFF.
What happens
This error message is shown:
What should happen
As per the linked doc in such a case the icon should be aligned at the top and not centered. Also, the action button should possibly(!) be wrapped on a new line (if it makes sense – in that example it probably makes, but this has to be seen whether it looks good.)
Proposed solution
This mostly needs some CSS quirks.
One pointer would the common.css file: https://github.com/rugk/offline-qr-code/blob/master/src/common/common.css
I decided to do my own take on this and noticed too late that someone had already attempted it before (I'm new to contributing to open source projects) I've submitted my own PR on this issue nonetheless for your consideration.
@Fanksies Sorry for the late reply, as far as I see in https://github.com/rugk/offline-qr-code/pull/226 I was not really satisfied with the solution to merge it yet. So your solution may fix it differently and thus be better than my one, here? I just see your commit https://github.com/Fanksies/offline-qr-code/commit/9b83e84524d84207bb091d156f250c4dca8a28f9, but no PR.
However, if you want, feel free to also look at the other PR.
IĂ„m still seeking a "proper" solution for this issue.
If this is still open to work on, I would like to give this a shot please.
Sure, feel free to give it a try, @no1atall, I'll assign you. Please have a look at the previous (unsuccessful) tries, as you can see this is likely a tricky CSS task here…
Is this issue still open, I'd fix it, but want a bit explanation how when the error message is displayed :)
@Hamjaster Yeah, sure, you can take it. And thanks a lot in advance. If you have any issues or questions, e.g. how to implement a certain thing or how a thing works, feel free to ask. Also note GitHub's help can help on topics on how to use GitHub and e.g. how to create and update pull requests.
As for how it should look, the initial link redirects now, but you can find it in the archive: https://web.archive.org/web/20220519062052/https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines Scroll down to “Message on Multiple Lines” if needed. Also see the text that is written as an explanation. IIRC this part is quite hard to implement with the current (flexbox-based) design:
The call-to-action-buttons break into a new line below the message and are aligned to the start of the message.
BTW a JSFiddle or similar using the same CSS as we use, would also be very helpful for a start, as you can see there were many attempts at this one, but the CSS is not actually simple. Maybe one would need to switch to CSS grid? That could be a solution. Also check out the recent PR https://github.com/rugk/offline-qr-code/pull/306 to see whether you could take that up or use as a basis already, and if it already solves the issue, you could just continue/take-over the PR.