Commit Graph

17 Commits

Author SHA1 Message Date
evazion
f35bc60e51 posts: add hidden 540px thumbnail size option.
Add a hidden option for 540px size thumbnails. This option currently
isn't listed in the thumbnail size menu, but it can be enabled with an
URL param: https://danbooru.donmai.us/posts?size=540.
2022-06-26 20:37:32 -05:00
evazion
d0ce511465 css: fix stylelint errors. 2022-01-17 11:58:19 -06:00
evazion
572b1b74f7 posts: add hidden 720x720 thumbnail option (#4944).
Allow 720x720 thumbnails with https://danbooru.donmai.us/posts?size=720.
2021-12-28 11:36:14 -06:00
evazion
9eed21ef14 posts: bottom align thumbnails; prevent thumbnail reflow.
* Bottom-align thumbnails on desktop. This is so that vote buttons line
  up beneath thumbnails. Also so that pool titles line up on the pool
  gallery page. This is desktop only because it tends to leave large
  gaps above thumbnails on mobile.

* Make thumbnails fixed-height so that the layout doesn't shift as
  thumbnails are loaded.
2021-12-13 05:23:00 -06:00
evazion
e9bde54890 css: fix aspect ratio for 225, 270 size thumbnails.
When setting max-height, we also have to set width to auto to preserve
the aspect ratio.
2021-12-08 23:44:48 -06:00
evazion
810df2f19c posts: fix thumbnail css.
Fix thumbnail CSS to not use `width: auto`, because that made the page
reflow. It made thumbnails start out at 0x0 size, then resize to the
actual size only after the image was loaded.
2021-12-08 19:51:24 -06:00
evazion
396062869a posts: fix thumbnails on comment and modqueue pages.
Fix thumbnails being fit-to-width instead of a fixed size on the
/comments and /modqueue pages, which caused the columns to be misaligned.
2021-12-05 16:39:24 -06:00
evazion
2e6f480d07 pools: fix pool gallery page layout.
Fix the /pools/gallery page layout being broken by 8841de68a.

This required refactoring the PostGalleryComponent to take a set of
PostPreviewComponents instead of a set of Posts.

The upshot is that it's technically possible to have adjustable
thumbnail sizes on the pool gallery page now (although this is not yet
exposed in the UI).
2021-12-05 02:52:07 -06:00
evazion
8841de68ac posts: add adjustable thumbnail sizes (#4932).
Add a menu in the top right of the post index page that lets you select
the thumbnail size.

This menu is currently hidden until the new thumbnails have been generated.

On desktop, there are five thumbnail sizes:

* Small:    150x150 (https://danbooru.donmai.us/posts?size=150)
* Medium:   180x180 (https://danbooru.donmai.us/posts?size=180)
* Large:    225x225 (https://danbooru.donmai.us/posts?size=225)
* Huge:     270x270 (https://danbooru.donmai.us/posts?size=270)
* Gigantic: 360x360 (https://danbooru.donmai.us/posts?size=360)

On mobile, there are four sizes:

* Small:  150x150 / 3 posts per row (https://danbooru.donmai.us/posts?size=150)
* Medium: 180x180 / 2 posts per row (https://danbooru.donmai.us/posts?size=180)
* Large:  225x225 / 2 posts per row (https://danbooru.donmai.us/posts?size=225)
* Huge:   360x360 / 1 posts per row (https://danbooru.donmai.us/posts?size=360)

There are two extra sizes that aren't listed in the menu:

* 225x360 (https://danbooru.donmai.us/posts?size=225w)
* 270x360 (https://danbooru.donmai.us/posts?size=270w)

These sizes are good for tall thumbnails, but not so much for wide
thumbnails. They aren't listed because in practice they're a bit too big.

The 225x225 and 270x270 sizes are really just 360x360 thumbnails scaled
down in HTML. This means 225x225 and 360x360 thumbnails both use the
same amount of bandwidth.

Thumbnail size is currently a per-search option, not a persistent
account-level setting.

This changes the HTML structure of thumbnails somewhat, so this may
break userscripts and custom CSS.
2021-12-04 06:30:29 -06:00
evazion
eda23c719a votes: fixup various minor issues.
* Add a gap between thumbnails on mobile.
* Adjust CSS for scores and vote buttons.
* Include "Private favorites" as an incentive on the user upgrade page.
* Fix vote buttons not being visible beneath thumbnails on mobile.
* Fix the "Show scores" link not preserving the current page number.
* Fix vote buttons being unintentionally enabled for all thumbnails by default.
* Fix banned and restricted users being able to favorite posts by
  tagging them with `fav:self`.
* Fix search engines being able to crawl /posts?view=score pages.
* Fix broken tests.
2021-11-20 02:40:18 -06:00
evazion
bd8672681f votes: add vote buttons beneath thumbnails.
Add upvote and downvote buttons beneath thumbnails on the post index page.

This is disabled by default. To enable it, click the "..." menu in the top
right of the page, then click "Show scores".

This is currently a per-search setting, not an account setting. If you
enable it in one tab, it won't be enabled in other tabs.
2021-11-18 04:15:20 -06:00
evazion
094ed4c11d css: standardize font sizes.
Fix various elements to use standard font sizes instead of ad-hoc sizes.

Noticeable changes:

* Tags in autocomplete are slightly smaller.
* The favorite heart icon on posts is slightly smaller.
* Pool titles on thumbnails in the pool gallery page are slightly bigger.
* The page footer is slightly smaller.
* Timestamps on comments and forum posts are very slightly smaller.
* "Pending"/"approved"/"rejected" labels on forum posts are very slightly smaller.
2021-10-25 05:59:40 -05:00
evazion
f1b5c34b4d posts: show length of videos and animations in thumbnails.
Show the length of videos and animated posts in the thumbnail. The
length is shown the top left corner in MM:SS format. This replaces the
play button icon.

Show a speaker icon instead of a music note icon for posts with sound.

Doing this requires doing `.includes(:media_asset)` in a bunch of
places to avoid N+1 queries when we access the post's duration.
2021-10-25 02:56:55 -05:00
Thayol
6e2a5c6dde Mobile uncropped thumbnails: Fix sizing and overflow (#4818)
Fix #4460: Disabling cropped thumbnails is broken #4460

* Change width/height to max-width/max-height
* Change for cropped too
2021-06-17 04:09:20 -05:00
evazion
ac05da8de6 posts: change how the mode menu indicates the active mode.
Instead of changing the background color of the entire page when you
change modes in the post mode menu (which was ugly, and not obvious what
the colors meant), show a notice and make it so that hovering a post
gives it a blue outline. This indicates that clicking the post will do
something different.
2021-02-23 07:14:49 -06:00
evazion
b9ea9d2f5a css: fix styling of selected post in parent/child box.
* On the post show page, in the parent/child box, change it so that
  currently selected post is more visible. Use a light blue outline
  around the current post instead of a dark semi-transparent border.

* Fix it so that there's less empty space around thumbnails in the
  parent/child box.
2021-02-22 02:38:26 -06:00
evazion
1b30b71a07 posts: refactor post previews to use ViewComponent.
Refactor the post preview html to use the ViewComponent framework. This
lets us encapsulate all the HTML, CSS, and helper methods for a UI
component in a single place.

See https://viewcomponent.org.
2021-01-14 21:17:57 -06:00