Simple Machines Community Forum

SMF Development => Bug Reports => Topic started by: Antechinus on February 24, 2020, 08:11:05 PM

Title: 2.1: Attachments below posts are a mess.
Post by: Antechinus on February 24, 2020, 08:11:05 PM
Installed the latest nightly last night. Attachments are a jumble. :P

The problem is having vertical-align: top; set in the CSS. It makes the mess pretty much unreadable if there are a range of attachments (see first screenshot).

The minimum fix is to change it to vertical-align: bottom; which makes the description texts much easier to scan (see second screenshot).

Frankly this still isn't the best though, because you have left-aligned text and centered thumbnails. It would be better to decide which alignment you want and stick with it. If you want left aligned, see third screenshot.

My 2c is that overall, for a range of possible attachments and thumbs, it would be best to centre the thumbs and text, and to give a bit of delineation around the descriptions for extra clarity (see last screenshot).

Any of these fixes are trivially easy to do, and you can save a bit of superfluous "cargo cult programming" in the CSS while you're at it (for example, there is no point declaring margin: 0 auto; on .attachment_top as it is block display by default and therefore full-width, so no margin at all).

If you want code for this stuff you can have it. If you don't, enjoy the current mess. :)
Title: Re: 2.1: Attachments below posts are a mess.
Post by: live627 on February 24, 2020, 09:35:47 PM
Doesn't SMF already have too many borders?
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Antechinus on February 24, 2020, 09:48:19 PM
Quote from: Antechinus on February 24, 2020, 08:11:05 PMIf you want code for this stuff you can have it. If you don't, enjoy the current mess. :)
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Gwenwyfar on April 29, 2020, 07:49:45 AM
This actually looks better, maybe an improvement is that the border could go around each attachment (image + details) instead?

Spacing/ordering is still a bit of a mess though, I wonder if making attachments a list (each one is a list item containing all its innards, I may or may not already have changed it, I don't remember), then using some flex or grid magics could help.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Antes on April 29, 2020, 08:36:51 AM
Well, the solution itself is not the solution (not even close to the best ngl)... The solution starts with categorizing the attachment one has preview and others after that you can separate them within the categories (in this case Images -simplifying it- & others) so we can show images with their previews and put little line-break (no borders please I beg) and show rest of them 3 by 3 (or 2 by 2) in list order.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Gwenwyfar on April 29, 2020, 08:41:40 AM
Good idea. Maybe attach a class to them (after it being a list), then you can change their display order: in css. Might conflict with someone wanting a specific order to their attachments, but reordering them is not really a thing, is it? It would be quite the effort to even order them in the first place.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Antes on April 29, 2020, 08:43:15 AM
Quote from: Gwenwyfar on April 29, 2020, 08:41:40 AM
Good idea. Maybe attach a class to them (after it being a list), then you can change their display order: in css.

I much rather safe approach on there and wrap categories (if exist) with a div container... surely inside that container we can use flex & align items to flex-end for consistent look & feel.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Gwenwyfar on April 29, 2020, 08:43:58 AM
Having two lists for each "category" seems more complicated. But either works.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: SychO on April 29, 2020, 08:45:58 AM
Quote from: Gwenwyfar on April 29, 2020, 08:41:40 AM
Good idea. Maybe attach a class to them (after it being a list), then you can change their display order: in css. Might conflict with someone wanting a specific order to their attachments, but reordering them is not really a thing, is it? It would be quite the effort to even order them in the first place.

I think It'd be more convenient to reorder them server side instead.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Antes on April 29, 2020, 08:55:14 AM
Quote from: Gwenwyfar on April 29, 2020, 08:43:58 AM
Having two lists for each "category" seems more complicated. But either works.

Categories to separate the images from others, we are not going to create sub-cats (even tho they are cute) for upper categories.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Arantor on April 29, 2020, 08:59:43 AM
Or you give non image attachments a generic icon for their file type.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Gwenwyfar on April 29, 2020, 09:08:08 AM
Quote from: Arantor on April 29, 2020, 08:59:43 AM
Or you give non image attachments a generic icon for their file type.
... and make them all the same size :P

Fair.

I think I'm trying too much to think on "SMF logic" here, of trying to keep things mostly as they are, and failing at it - because I can't be arsed. I'd just take the whole thing apart and do it over if I'm honest.
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Antes on April 29, 2020, 09:10:27 AM
Quote from: Arantor on April 29, 2020, 08:59:43 AM
Or you give non image attachments a generic icon for their file type.

Title: Re: 2.1: Attachments below posts are a mess.
Post by: Arantor on April 29, 2020, 09:19:29 AM
Why not? It worked really well in LevGal ;D
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Bloc on April 29, 2020, 12:22:46 PM
Quote from: Arantor on April 29, 2020, 08:59:43 AM
Or you give non image attachments a generic icon for their file type.
Thats probably the best solution. Consistant look for both attachments and image attachments. Just add a class that says something about the extension in each attachment container and let css take care of the rest.


Title: Re: 2.1: Attachments below posts are a mess.
Post by: Kindred on April 29, 2020, 02:39:17 PM
I'm on board with this
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Antes on April 29, 2020, 05:37:59 PM
This is what I'm talking about (the code I wrote is really bad! but this is the output I want to achieve).
Title: Re: 2.1: Attachments below posts are a mess.
Post by: Gwenwyfar on April 29, 2020, 05:40:26 PM
It's an improvement :)