Fix thumbnail left alignment

Xyphyn / photon

A replacement for lemmy-ui with more features, a better design, and more customizability.

https://phtn.app

GNU Affero General Public License v3.0

366 stars 40 forks source link

Fix thumbnail left alignment #323

Closed sevonj closed 2 months ago

sevonj commented 4 months ago

Describe the bug Left thumbnail alignment does not affect embeds. As a result, thumbnails on the feed bounce left and right depending on the post type, which is somewhat annoying.

Edit: More left align issues

To Reproduce (if applicable)

Set thumbnail alignment to left
Browse in list view

Tasks:

[x] (list view) - Apply thumbnail alignment to embeds. ~~#344~~ 80fff16671b9e519148456eaa7c96cb545072115
[x] (list view) - Consistent horizontal position of meta block. #353
[x] (compact view) - Consistent horizontal position of meta block. #340
[x] Alt text is obscured by the left sidebar. 6c047be49d3f8bda9de81fd083c4716864274f43

Expected behavior Consistent thumbnail position on both alignment options.

Screenshots

Versions

Browser: Firefox
Photon version: 1.29.5

sevonj commented 3 months ago

I spent some more time thinking about ways to make left alignment look cleaner.

I don't like these paths at all:

The best idea I have so far is this:

Use normal "media" item for embed thumbnails when leftAlign is on.
Reserve the space even if there is no media when leftAlign is on.
- Maybe put some kind of text post symbol there.
Change the layout so that embed comes after media.

Title and meta moved above in list view:

Compact mode:

@Xyphyn Opinion on having roughly this kind of layout for leftAlign?

Xyphyn commented 3 months ago

Sure I completely forgot about left alignment

sevonj commented 3 months ago

I rebuilt that draft and pushed it to https://github.com/sevonj/photon/tree/left_align

It's rough, but I think the the layout idea is ok.

Changed views:

list (left align)
compact (left align)
compact (right align)

Screenshots

List left ![image](https://github.com/Xyphyn/photon/assets/100710152/9aee837f-850e-4992-8194-12d6b585d877) Compact left ![image](https://github.com/Xyphyn/photon/assets/100710152/9929f6c9-13c0-4724-a07b-ab888d64b083) Compact right ![image](https://github.com/Xyphyn/photon/assets/100710152/969d8d46-9a22-42ce-8d90-d92397f53e73)

sevonj commented 3 months ago

I wasn't really happy with my previous draft for list view. Left and right alignments had different layouts and it looked kinda weird anyway.

So I had another go: My new approach doesn't try to bend the embed thumbnails to match the normal ones. They stay in the embed card. Instead, I made the normal layout more consistent with embeds by moving the meta block above.

We could also increase the size a bit, maybe even match the width of the embed thumbnail.

Edit: https://github.com/sevonj/photon/tree/listview-leftalign-draft

sevonj commented 3 months ago

I guess I'll add alt text to the list.

sevonj commented 3 months ago

I see that list view layout has become near identical to compact layout.

At this point, instead of working a new solution, I suggest just removing the filter for selfposts in PostMediaCompact to make it consistent.

https://github.com/Xyphyn/photon/blob/80fff16671b9e519148456eaa7c96cb545072115/src/lib/components/lemmy/post/media/PostMediaCompact.svelte#L20C1-L20C3

sevonj commented 2 months ago

Looks like we're done here!