Skip to main content


!Friendica Support

I'm considering changing the engagement details below posts and comments now that Bookface shows icons for them. The current appearance is a vertical list, which can leave a lot of unused space to the right of it, plus all the explanatory text feels redundant and visually cluttering to me:

Current Bookface engagement counts in vertical list with descriptions.

So I'm considering eliminating the explanatory text and going with a horizontal list of just names (for single interactions) and counts (that trigger the pop-over list) like this:

Proposed engagement list with mix of names and counts in horizontal list.

But that got me to an option with just icons and counts, which is similar to how Facebook and Misskey/Sharkey show reactions/engagements:

Proposed engagement with icons and counts in horizontal list


Which is what I'd prefer as it looks the cleanest and most consistent.

Thoughts on this proposed change? (I really wish Friendica had polls for this sort of thing!)

#Bookface #Friendica #proposal

Would it help with writing the handling logic if "reactions and reshares" and "attendance" were instead on two rows, which would still bring it down from six to just two rows, and only one row for content that isn't events? At least then there's no left/right logic necessary I hope?

I need a proper development environment setup to experiment more with UI changes myself. Preferably a Docker/Podman setup that isn't vscode/microsoft-specific (devcontainer). While vagrant does support docker the friendica vagrant setup is currently only written for libvirt and virtualbox.

The left/right logic isn't a problem on desktop, it's more of a problem on mobile because the screen is so narrow if three items are shown in a row and the last one has a pop-over the position of the pop-over needs to be right: 0px; or it will partly be off-screen, which breaks the mobile layout.

I haven't given up, but it's going to need a lot more CSS logic than just a float or flex layout offer. Probably some "nth" sibling element checking for :empty or something.

I'd really like to get it working for mobile since the entire reason I started messing with this was to compact that information for the mobile layout.

I've mostly been thinking about and using the desktop layout and I think any of your suggestions would be a good improvement there as well!

I'm familiar with CSS too but I have a hard time fully visualizing the problem to come up with good suggestions. Once I have a dev setup I can hopefully help a bit more with things like this.

⇧