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

Enable multiline badge text banner and 'Project' line in card #832

Closed
jmertic opened this issue Jul 14, 2022 · 19 comments
Closed

Enable multiline badge text banner and 'Project' line in card #832

jmertic opened this issue Jul 14, 2022 · 19 comments
Assignees

Comments

@jmertic
Copy link
Contributor

jmertic commented Jul 14, 2022

First request, let the next under the badges be multiline; see image below for where I'm talking about. Ideally that text would change to 'Technical Project\nIncubation'

Screen Shot 2022-07-14 at 7 40 05 AM

Second, notice the text for 'LF Energy Technical Project' cuts off as it's too long. Would be great for it to not cut off or wrap perhaps.

Screen Shot 2022-07-14 at 7 40 15 AM

@AndreyKozlov1984
Copy link
Contributor

Well, I'll have to take a look at that, certainly. We generate all pages during the build time, so the plan is to run a Chrome in the background, calculate the text size and make a word wrap if necessary.

@AndreyKozlov1984 AndreyKozlov1984 self-assigned this Jul 15, 2022
@jmertic
Copy link
Contributor Author

jmertic commented Aug 12, 2022

Hey @AndreyKozlov1984 - any updates on this?

@AndreyKozlov1984
Copy link
Contributor

Ok, focusing on this task now

@AndreyKozlov1984
Copy link
Contributor

@jmertic
image

I support the big_picture_label like : Early Adoption - Incubation, the rule is simple - if there are more than 20 symbols I make it 2 lines, now when it is multiline - if - is present in the label, I replace it with a new line, otherwise word wrap happens automatically

@jmertic
Copy link
Contributor Author

jmertic commented Aug 17, 2022

Awesome - thank you @AndreyKozlov1984! That looks awesome!

Can you do something similar on the cards themselves?

@AndreyKozlov1984
Copy link
Contributor

AndreyKozlov1984 commented Aug 17, 2022

With cards it looks complicated, my best approach would be to treat ' - ' as a line break. If we can agree that multiline is triggered by the presence of ' - ' in the text and that is replace with a new line, then yeah, I can get it working

@AndreyKozlov1984
Copy link
Contributor

On your screenshot it is basically not enough space, even for a multiline

@jmertic
Copy link
Contributor Author

jmertic commented Aug 17, 2022 via email

@jmertic
Copy link
Contributor Author

jmertic commented Aug 18, 2022

On your screenshot it is basically not enough space, even for a multiline

Hmm - what other options do I have then? Could we have the badge two lines with line one the title and line two the text?

@jmertic
Copy link
Contributor Author

jmertic commented Sep 1, 2022

Checking back in @AndreyKozlov1984 - seeing if you thought about my earlier comment and had any suggestions.

@AndreyKozlov1984
Copy link
Contributor

Yes, multiline seems fine, I am a concerned with automatic detection of multiline, thus the label should somehow contain the information that we need to make it multiline. Maybe "!" or "..." or "-" on the end,

image

image

@jmertic That one is possible for this tag, just I need to have a clear way to see that multiline is necessary, like "-" in the text.
I thought about a total number of characters, but that seems to be unreliable.

@AndreyKozlov1984
Copy link
Contributor

My proposal is that " - " in the value would mean we want a multiline. And, say, over 30 characters either in the name or in the value. Is this good ?

@jmertic
Copy link
Contributor Author

jmertic commented Sep 1, 2022

Love it! Thanks @AndreyKozlov1984

@AndreyKozlov1984
Copy link
Contributor

Ok, I am pushing the change at this moment, the criteria is over 30 characters or "-" in the value, works well for LF-Energy

I will ping you when this is deployed to production

@jmertic
Copy link
Contributor Author

jmertic commented Sep 1, 2022 via email

@AndreyKozlov1984
Copy link
Contributor

Done!

image

@jmertic
Copy link
Contributor Author

jmertic commented Sep 1, 2022

Awesome! I am seeing some alignment issues in my deploy preview below...

https://deploy-preview-565--lfenergy.netlify.app/?selected=carbon-data-specification-consortium-cdsc

Can you take a quick peek?

@AndreyKozlov1984
Copy link
Contributor

Done, I have updated the landscapeapp.

@jmertic
Copy link
Contributor Author

jmertic commented Sep 2, 2022

Awesome - thank you @AndreyKozlov1984 !

@jmertic jmertic closed this as completed Sep 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants