Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect display of messages on multiple lines #12

Open
rugk opened this issue Apr 14, 2018 · 11 comments · May be fixed by #226, #262 or #306
Open

Incorrect display of messages on multiple lines #12

rugk opened this issue Apr 14, 2018 · 11 comments · May be fixed by #226, #262 or #306
Assignees
Labels
bug Something isn't working good first issue Good for newcomers hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com help wanted Extra attention is needed
Milestone

Comments

@rugk
Copy link
Owner

rugk commented Apr 14, 2018

https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines

Currently the icon is e.g. shown in the middle anyway.

@rugk rugk added the bug Something isn't working label Apr 14, 2018
@rugk rugk changed the title Optimize messages for multiple lines Incorrect display of messages over multiple lines Apr 14, 2018
@rugk rugk changed the title Incorrect display of messages over multiple lines Incorrect display of messages on multiple lines Apr 14, 2018
@rugk rugk added the good first issue Good for newcomers label May 12, 2018
@rugk
Copy link
Owner Author

rugk commented May 22, 2018

Also the action button must be wrapped…

@rugk rugk added the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Oct 14, 2018
@rugk rugk removed the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Oct 31, 2018
@rugk rugk pinned this issue Jun 3, 2019
@anmol5varma
Copy link

I can help with this but would need more context.

@rugk
Copy link
Owner Author

rugk commented Aug 10, 2019

Okay, thanks. You're right this needs a little more information.

STR

Trigger a long message, e.g. like this:

  1. Go to the settings.
  2. Set quite similar colors for background and QR code color, i.e. e.g. #A0A0C1 and #FFFFFF.

What happens

This error message is shown:
image

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

@rugk rugk added the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Sep 25, 2019
@lazy-sunshine
Copy link

@rugk Is this issue open for me to work on ? Thanks

@rugk
Copy link
Owner Author

rugk commented Oct 2, 2019

Of course, feel free to take it on. Thanks. 😃

@rugk rugk added this to the v1.7 milestone Oct 17, 2019
@rugk rugk removed the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Nov 7, 2019
@rugk rugk modified the milestones: v1.7, 2.0 May 31, 2020
@rugk rugk added the hacktoberfest Hacktoberfest 2020, https://hacktoberfest.digitalocean.com label Sep 29, 2020
Fanksies added a commit to Fanksies/offline-qr-code that referenced this issue Oct 3, 2020
@Fanksies
Copy link

Fanksies commented Oct 3, 2020

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.

@rugk rugk linked a pull request Oct 4, 2020 that will close this issue
@rugk rugk added the help wanted Extra attention is needed label Oct 4, 2020
@rugk
Copy link
Owner Author

rugk commented Apr 15, 2021

@Fanksies Sorry for the late reply, as far as I see in #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 Fanksies@9b83e84, 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.

@no1atall
Copy link

If this is still open to work on, I would like to give this a shot please.

@rugk
Copy link
Owner Author

rugk commented Oct 29, 2021

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…

@rugk rugk removed this from the 1.8 milestone Nov 20, 2021
@Hamjaster
Copy link

Is this issue still open, I'd fix it, but want a bit explanation how when the error message is displayed :)

@rugk
Copy link
Owner Author

rugk commented Sep 23, 2023

@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 #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.

@rugk rugk assigned Hamjaster and unassigned no1atall Sep 23, 2023
@rugk rugk unpinned this issue Jun 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment