Topic: [Feature] Revert to old search layout

Posted under Site Bug Reports & Feature Requests

The default view is absolutely awful on desktop, giant blurry thumbnails that in some cases crop out over 50% of the image, this will give a rather poor initial impression to any new users.
When you change it to small/not cropped it's still a downgrade, as all images have these awful gray borders that reduce visual clarity.

Would be great if this change be rolled back until e621 folks improve it so it's not a downgrade.

DRLa

Member

Even on mobile I find they're too big. I have a large phone and 3 in a row was perfectly usable.

GG

Member

smaugthedragon said:
The default view is absolutely awful on desktop, giant blurry thumbnails that in some cases crop out over 50% of the image, this will give a rather poor initial impression to any new users.
When you change it to small/not cropped it's still a downgrade, as all images have these awful gray borders that reduce visual clarity.

Would be great if this change be rolled back until e621 folks improve it so it's not a downgrade.

From the e6 thread, put this in custom css:

/* restore old layout */

@media (min-width: 800px) {
body[data-st-contain="true"] article.thumbnail {
min-height: unset;
max-width: var(--thumb-image-size);
}
}

body[data-st-contain="true"] article.thumbnail a {
background: unset;
height: unset;
}

body[data-st-contain="true"] article.thumbnail img {
width: unset;
max-width: 100%;
}

article.thumbnail .desc {
max-width: var(--thumb-image-size);
height: unset;
}

/* make blacklisted avatars less scuffed */

.comment-post-grid .author-info .avatar .post-thumbnail.blacklisted img {
padding: 150px 150px 0 0;
background-size: 150px;
}

Gear icon under search, full, small. That gets it back to something resembling sanity. At least until they take away custom css.

Whoever keeps track of the underlying codebase seems determined to destroy usability with goofy "upgrades", this is just the most recent in a long line. I don't even bother browsing e6 directly anymore, it's become so terrible to look at (I only stop in here occasionally, so I care less.)

gg said:
From the e6 thread, put this in custom css:
Gear icon under search, full, small. That gets it back to something resembling sanity. At least until they take away custom css.

Whoever keeps track of the underlying codebase seems determined to destroy usability with goofy "upgrades", this is just the most recent in a long line. I don't even bother browsing e6 directly anymore, it's become so terrible to look at (I only stop in here occasionally, so I care less.)

This is much better, thank you for finding this fix.

gg said:
From the e6 thread, put this in custom css:
Gear icon under search, full, small. That gets it back to something resembling sanity. At least until they take away custom css.

Whoever keeps track of the underlying codebase seems determined to destroy usability with goofy "upgrades", this is just the most recent in a long line. I don't even bother browsing e6 directly anymore, it's become so terrible to look at (I only stop in here occasionally, so I care less.)

Thank you, GG! I had to switch to desktop mode to apply the changes, and when going back to mobile there's still only two columns of thumbnails, but at least now they aren't cropped. Really hope they go back to the way it was before.

evellon said:
Thank you, GG! I had to switch to desktop mode to apply the changes, and when going back to mobile there's still only two columns of thumbnails, but at least now they aren't cropped. Really hope they go back to the way it was before.

This should get the mobile mode working (the thread on e621 forum has a lot of further debate on the CSS):
.posts-container { grid-template-columns: repeat(3, 1fr); }

And this is a superior way to get rid of the gray borders:
article.thumbnail a { background: unset; height: fit-content; width: fit-content; margin-left: auto; margin-right: auto; } article.thumbnail > a::before { top: auto; left: auto; margin-top: 0.5rem; margin-left: 0.5rem; border: 1px solid var(--color-text-muted); border-radius: 3px; }

The previous CSS doesn't work for me. No effect at all.
Here is a CSS I've written myself. I based it on the old CSS from the archived page, so everything should look exactly as before.
It also fixes deleted and blacklisted thumbnails and thumbnails in posts.

post #106905
post #113346

@media (min-width: 474px) {
article.thumbnail {
    width: min-content;
}
}

article.thumbnail {
    max-width: 150px;
    min-height: unset !important;
    min-width: unset !important;
}

article.thumbnail a {
    height: unset !important;
    max-height: unset !important;
    max-width: unset !important;
    width: unset !important;
    flex: unset !important;
}

article.thumbnail img {
    max-height: 150px;
    max-width: 150px;
    height: unset !important;
    object-fit: unset !important;
    pointer-events: none;
    width: 100%;
}

@media (min-width: 474px){
article.thumbnail:not(.deleted) img {
    width: unset;
}
}

section.posts-container {
    grid-template-columns: repeat(3,1fr) !important;
    --thumb-image-size: 150px;
}

@media (min-width: 474px) {
section.posts-container {
    grid-template-columns: repeat(auto-fill,minmax(var(--thumb-image-size),1fr));
}
}

article.thumbnail .desc {
    height: unset !important;
}

.post-thumbnail.dtext img {
    max-height: 150px;
    max-width: 150px;
    width: auto;
    height: auto;
}

#image-container.blacklisted img.post-thumbnail-img, 
#image-container.blacklisted video, 
.post-thumbnail.blacklisted img.post-thumbnail-img, 
.post-thumbnail.blacklisted video {
    padding: 150px 150px 0 0!important;
    background-size: contain;
}

article.thumbnail.deleted img{
    width: calc(90vw / 3);
    max-width: 150px;
}

Updated

yiffy said:
The previous CSS doesn't work for me. No effect at all.
Here is a CSS I've written myself. I based it on the old CSS from the archived page, so everything should look exactly as before.
It also fixes deleted and blacklisted thumbnails and thumbnails in posts.

Thanks, that works great for me. I prefer the old look compared to the new update.

neta

Member

Here is a CSS I've written myself. I based it on the old CSS from the archived page, so everything should look exactly as before.
It also fixes deleted and blacklisted thumbnails and thumbnails in posts.

Love it! Thanks.

yiffy said:
The previous CSS doesn't work for me. No effect at all.
Here is a CSS I've written myself. I based it on the old CSS from the archived page, so everything should look exactly as before.
It also fixes deleted and blacklisted thumbnails and thumbnails in posts.

Thank you so much. I prefer the old layout.

Yiffy

Member

In case you're using the CSS above, I've just updated it to fix thumbnail alignment after recent site update.