• Welcome to Simple Machines Community Forum. Please login or sign up.
November 29, 2021, 11:19:17 PM

News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord


2.1: Attachments below posts are a mess.

Started by Antechinus, February 24, 2020, 08:11:05 PM

Previous topic - Next topic

Antechinus

February 24, 2020, 08:11:05 PM Last Edit: October 14, 2021, 08:37:07 PM by Diego Andrés
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. :)

live627


Antechinus

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. :)

Gwenwyfar

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.
"It is impossible to communicate with one that does not wish to communicate"

Antes

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.

Gwenwyfar

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.
"It is impossible to communicate with one that does not wish to communicate"

Antes

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.

Gwenwyfar

Having two lists for each "category" seems more complicated. But either works.
"It is impossible to communicate with one that does not wish to communicate"

SychO

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.
Checkout My Themes:
-

Potato  •  Ackerman  •  SunRise  •  NightBreeze

Antes

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.

Arantor

Or you give non image attachments a generic icon for their file type.
No good deed goes unpunished
All helpful urges should be circumvented

Gwenwyfar

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.
"It is impossible to communicate with one that does not wish to communicate"

Antes


Arantor

Why not? It worked really well in LevGal ;D
No good deed goes unpunished
All helpful urges should be circumvented

Bloc

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.



Kindred

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.<br /><br />"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Antes

This is what I'm talking about (the code I wrote is really bad! but this is the output I want to achieve).

Gwenwyfar

"It is impossible to communicate with one that does not wish to communicate"

Advertisement: