[FEATURE_REQUEST] Center sections, make items the same size by truncating longer item description

[polhaghverdian]

Is your feature request related to a problem? If so, please describe.

No response

Describe the solution you'd like

REQ1: Centered sections should be applied when less then 4 sections is available. Otherwise the lists starts from left to right and is not centered on the screen.

REQ2: Make items the same size by truncating item description.

Priority

Low (Nice-to-have)

Is this something you would be keen to implement

No response

[Lissy93]

Thanks very much for your suggestions :)

REQ1: Makes sense, and I agree it looks off, so will update this to be centred :) But when there's only a single section (example), I think is should remain left aligned by default. Does that sound okay?

REQ2: So with the item size, the text should actually be automatically truncated (and then visible on hover), is this not happening for you? But I agree it could do with some improvement. Do you mean width, or length of the item? I'll refresh my flex-box knowledge and try and improve this :)

I'll try and get this implemented this week, or next weekend, and will update you here once done :)

[polhaghverdian]

Thanks for the response 👍 @Lissy93

REQ1: That sounds totally fine when there is only one section :)

REQ2: The text is visible on hover, however the text is not truncated. But it depends on how long it is allowed to be before being truncated. But i can see that it is enough long that the item increases in height and that creates inconsistency between the items in terms of length.

[Lissy93]

Oh yeah, sorry I didn't realise you meant the description text, that makes sense now, thank you for the screenshot.

I can easily truncate the description text, and your right, it would look much neater if all items were the same height.

[jhelmink]

Just butting in here to say, I think the sections should have an option for centered, left (or right?) aligned when set to auto, regardless of the number of sections. So if you go over the max number of columns wide, the next sections would be centered below.

I realise this probably makes it particularly complicated though 😂🤞

[Lissy93]

Hey @polhaghverdian

So REQ2 is done in PR #261, and merged this evening.

With REQ1, I realized this is actually already available, just switch to Horizontal layout.

I know your issue was around centering content in the Auto layout, but I'm not sure how possible this is- Basically content is already centered by default, but since it's using grid-layout to position items, and the number of columns is responsive, and calculated based on screen size, you have an empty column causing it to be off-center. If you know a responsive way around this, then please do let me know :)

The solution is to use flex-box instead. And this is what the Horizonal layout is. Here all sections are centered, and the number of columns is equal to the number of sections.

Does this work for you?

Don't forget that you can also specify your own styles, to display content however you like. Try this, update to V 1.8.5, switch to Horizontal layout, then add something like .item-group-container { max-width: 800px; } to the custom CSS, and I think that will produce exactly the result you're looking for :) If it doesn't let me know, and see what else can be done.

I've also added an option for you to specify number of columns for Auto layout, which you can then use to center content (e.g. set colCount: 2), and this will also center your content.

[polhaghverdian]

Hi @Lissy93

First of all thank you so much for taking the time and implemented my suggestions!

REQ1: Is great i can see now that the items have the same size, due to truncating of the item descriptions. However i have just a small wish, could you perhaps add three dots after the truncated text or something similar to indicate that the text has been truncated?

REQ2: I updated my docker container to v 1.8.5. I followed your alternative solution and used CSS to decrease the max-width of item-group-container and set it to 1200px. I also added colCount: 3 ( I have now three sections, thats why i choose 3 and not 2) in the configuration file to get the desired result. It works great. I have no complains :)

[Lissy93]

Oops, I forgot about that, sorry. I pushed an update in 7ede2c4 which should implement the ellipse/ three dots, and it now and looks something like this.

Hope that helps - Feel free to reach out again if you need anything else :)

[Lissy93]

P.s I really love your custom theme! When you've got your dashboard all setup, would you like to share it on the User Showcase? But no worries if not :)