Improve community lists style

[fadelkon]

fixes https://github.com/LemmyNet/lemmy-ui/issues/578

I'm editing in the browser, so this is not tested at all yet

[fadelkon]

How can I test it @dessalines ?

In a context with the other 4 services up, I would do docker build . and then... docker run SOMENAME (?)

[dessalines]

https://join-lemmy.org/docs/en/contributing/local_development.html#run-a-local-development-instance

[fadelkon]

I achieved what I wanted, but it was difficult for me to contain a chain of unwanted changes, but I'm happy i did it.

I tried directly the changes on https://info.prou.be and they are online already for you to check. I loaded the dist/ folder of my local setup into the lemmy-ui internal filesystem.

~~However, there is one major issue that I need help with because I can't find how I broke it: the navbar's user dropdown list, and the "show more" button of the post listings bottom toolbox, both made with tippy.js , stopped working, they don't unfold when clicked.~~

~~Also translations are not shown now, I suspect that both issues could be related with my lousy testing strategy.~~

EDIT: I was doing yarn build:dev all the time. Doing yarn build:prod fixed the dropdowns and translation issues :)

There's also one minor style issue: the post listing's bottom toolbox text are now in a slight vertical unalignment. They are supposed to align on baseline, but it's not pixel perfect now.

I attach edited before/after screenshots in the next comment

[fadelkon]

In pink, what is working. In yellow, what it's not.

The contribution:

1. Communities without a logo, now show a semitransparent grey logo as a placeholder. Actually it's a simple div with background color.
2. Communities with names so long that become multiline, align naturally with their logo, centering vertically the logo with all the name lines.
3. There's some vertical space now for community logos to breath
4. And non visual change: post listing toolbox is now a flex container, and I split some elements with their own <li> so that they can align mutually. This also gives us more control on line overflow and how much space each element can take.

Before

After

[fadelkon]

Change number 4. was necessary because with the changes I did to "CommunityLink" to be displayed better on the vertical lists, was doing line breaks in this horizontal list.

I made up the term "toolbox". Maybe it's more of an info-line? anyway. It's the underlined div in the central page.

[Nutomic]

In general the changes look great, but the grey community icon placeholder looks quite ugly. Maybe you could use a placeholder icon similar to this one, though i'm not sure what exactly the icon should be. Or you could use the site icon as placeholder, but that wont work if its missing as well, and might be weird for remote communities.

[fadelkon]

In general the changes look great, but the grey community icon placeholder looks quite ugly. Maybe you could use a placeholder icon similar to this one, though i'm not sure what exactly the icon should be. Or you could use the site icon as placeholder, but that wont work if its missing as well, and might be weird for remote communities.

Usually placeholder images say a lot of the software or platforms, and thus I didn't want to propose anything in particular. Also I'm not a designer. Aseptic pictures also mean things; in facebook it looks like an id card, and that's what facebook is about. I could use something like this 3 people is a community, but it's boring.

At most, what about lemmy logo itself?

Something I can try is using the community icon with lowered contrast and higher brightness. Some kind of watermark effect. But may not work with all icons, for instance, what about fair icons with lot of transparent?

[Nutomic]

I'm also not sure whats the best option for a placeholder. I suppose it can be done later, you could open an issue to present some options and discuss them.

[dessalines]

@fadelkon any updates?

[fadelkon]

I'm haven't worked on it again yet. When I can slot some hours on it, I will let you know the results. I'm aware of this, just it's been not the time yet. Is it ok for you? I see there are some conflicts now, but I'll rebase the changes taking care not to destroy anything.

El 15/4/22 a les 23:40, Dessalines ha escrit:

@fadelkon https://github.com/fadelkon any updates?

— Reply to this email directly, view it on GitHub https://github.com/LemmyNet/lemmy-ui/pull/579#issuecomment-1100426001, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE3JLLNDY5WBLEFNOIC4O6DVFHO3RANCNFSM5OM47KFA. You are receiving this because you were mentioned.Message ID: @.***>