Commit Graph

114 Commits

Author SHA1 Message Date
evazion
d0ce511465 css: fix stylelint errors. 2022-01-17 11:58:19 -06:00
evazion
ba29794e89 comments, forum posts: add 'Copy Link' action to '...' menu.
Add a 'Copy Link' action to forum posts and comments. This copies the
full link to the clipboard. The 'Copy ID' action copies just the DText
shortlink (comment #XXX or forum #XXX).
2022-01-13 13:10:41 -06:00
evazion
5adeedcf01 forum: add "..." menu to forum posts, like comments have.
Adds the ability to copy forum post IDs, like with comments.

Fixes #4768: Display DText shortlink for forum posts/topics.
2022-01-13 12:49:20 -06:00
evazion
7ad24ef231 Fix #4953: Add is_deleted attribute to forum posts.
* Add data-is-deleted, data-updater-id, data-topic-id, and
  data-topic-is-deleted data attributes to forum posts.
* Change data-forum-post-id to data-id.
* Dim deleted forum posts like comments.
2022-01-12 12:48:54 -06:00
evazion
c1a1741d20 posts: add z=N URL param to searches and tag lists.
Add a `z=N` param to the URL when doing a search from the search box, or
when clicking a link in the tag list. This is to gather data on how
often the links in the tag list are used, and whether it's more common
to click tags in the tag list or to perform searches manually.

This is temporary and will be removed when enough data is collected.
2022-01-12 10:36:14 -06:00
evazion
8bb923cf9b Fix #4807: Change creator to creator_id on forum post attributes. 2022-01-11 18:55:11 -06:00
evazion
349f8e098f posts: prevent dragging of thumbnails.
Disable the ability to click and drag thumbnails. This usually happened
by accident when you clicked on a thumbnail and accidentally dragged it,
especially during tag scripting.
2022-01-07 21:33:26 -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
379775d10d Remove HTML data attributes from thumbnails #4943
Remove most data attributes from thumbnails, except the ones used by our
own Javascript.
2021-12-16 15:48:07 -06:00
evazion
163ba8e7da posts: micro-optimize allocations during thumbnail generation.
Do a few micro-optimizations to reduce the number of memory allocations
during thumbnail generation.

This commit, combined with freezing string literals in a7dc05 and
67b961, reduces the number of allocations on the front page from 180,000
to 150,000, and the number of retained objects from 8,000 to 4,000.
2021-12-16 00:53:48 -06:00
evazion
a7dc05ce63 Enable frozen string literals.
Make all string literals immutable by default.
2021-12-14 21:33:27 -06:00
evazion
fbcf98db96 seo: prevent crawling comment, show_seq links.
* Mark /comments/:id links in comment timestamps as nofollow to prevent
  Googlebot from crawling these links.
* Mark /posts/:id/show_seq links as disallowed in robots.txt to prevent
  Googlebot from crawling forward/back links on posts.
2021-12-13 05:24:07 -06:00
evazion
0997f5595e posts: increase default thumbnail size.
* Increase the default thumbnail size from small (150x150) to medium (180x180).
* Change the mobile layout to use three posts per row instead of two for small thumbnails.

Parent/child posts are still 150x150 to avoid taking up even more space above posts.
2021-12-13 05:23:38 -06:00
evazion
e04892fb38 posts: use 180x180 thumbnails in place of 150x150 thumbnails.
For small thumbnails, use 180x180 thumbnails scaled down to 150x150.
This is so we can get rid of 150x150 images and just use 180x180 for
both small and medium size thumbnails.

Also fix RSS feeds, XML sitemaps, and Discord embeds to use 360x360
thumbnails instead of 150x150 thumbnails.
2021-12-13 05:23:38 -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
bf022e858a seo: prevent crawlers from crawling /posts/:id/favorites. 2021-12-10 01:46:01 -06:00
evazion
52013eac1f posts: use low quality thumbnails when Save-Data header is set.
When the Save-Data HTTP header is present, disable high quality (2x
pixel density) thumbnails. This is normally set when "Data Saver mode"
is enabled on Android, or "Lite mode" is enabled in Chrome.

This setting can also be set using the `save_data` URL param or HTTP
cookie. This is mainly for testing.

The <body> tag has a `current-user-save-data` data attribute that
indicates whether save data mode is on.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/#the_save-data_request_header
https://source.android.com/devices/tech/connect/data-saver
2021-12-09 20:08:27 -06:00
evazion
00153b9214 html: add cookie data attributes to <body> tag.
* Add `data-cookie-*` attributes to the <body> tag
* Add a `post-preview-show-votes` class to thumbnails.

Ref: https://github.com/danbooru/danbooru/issues/4930#issuecomment-978064810
2021-12-09 16:26:19 -06:00
evazion
674c502cd3 Fix #4937: "Similar Posts" previews have wrong filesize (150 bytes). 2021-12-09 12:56:49 -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
908a0bf3e0 posts: show 2 thumbnails per row on mobile instead of 3.
Fix regression in e8f9e3ab2 after adding adjustable thumbnail sizes.
2021-12-08 20:30:13 -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
9cb70fa632 posts: add 720x720 thumbnail size.
This is used to provide higher resolution thumbnails for high pixel
density displays, such as phones or laptops. If your screen has a 2x
pixel density ratio, then 360x360 thumbnails will be rendered at 720x720
resolution.

We use WebP here because it's about 15% smaller than the equivalent
JPEG, and because if a device has a high enough pixel density to use
this, then it probably supports WebP.

720x720 thumbnails average about 36kb in size, compared to 20.35kb for
360x360 thumbnails and 7.55kb for 180x180 thumbnails.
2021-12-05 09:19:29 -06:00
evazion
92906f7d39 posts: fix recommended posts layout.
Fix recommended posts page to use new post gallery component.
2021-12-05 03:37:56 -06:00
evazion
40568a9843 posts: fix parent/child post layout.
Fix regression causing parent/child posts to be laid out as a grid
instead of as a single row of posts.
2021-12-05 02:52:08 -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
9e77ff4948 posts: disable cropped (square) thumbnails on mobile.
Disable cropped (square) thumbnails on mobile. Use regular uncropped
thumbnails instead.

This is for a few reasons:

* It made it harder to support multiple thumbnail sizes or file formats,
  since we need a cropped and uncropped version for every size and format.
* The cropping algorithm wasn't that great and sometimes cropped out
  important parts of the image.
* The thumbnail type (cropped or uncropped) was automatically chosen
  clientside based on the user's screen size, which made certain things
  like adjustable thumbnail sizes more difficult because we didn't know
  which thumbnail type the user actually had.

This may return again as an option in the future, but for now it's disabled.
2021-12-02 23:32:23 -06:00
evazion
e8f9e3ab28 posts: show 2 posts per row on mobile instead of 3.
Three thumbnails per row was pretty tight for most phones since the most
common phone resolution is 360x640. Two thumbnails per row lets us have
thumbnails up to 180x180 in size.
2021-12-02 23:32:17 -06:00
evazion
74e28e14b8 posts: factor out post gallery component.
Factor out thumbnail galleries into a PostGallery component.

This changes the html structure so that post galleries on all pages are
always wrapped in a `.posts-container` class. This fixes an issue with
thumbnails on the pool show page not being aligned correctly on mobile,
like they are on the post index page. This also affected thumbnail
galleries on other pages, like wiki pages and user profiles.
2021-12-02 22:18:00 -06:00
evazion
e5ba6d4afc MediaFile: fix thumbnail dimension calculation.
Calculate the dimensions of thumbnails ourselves instead of letting
libvips calculate them for us. This way we know the exact size of
thumbnails, so we can set the right width and height for <img> tags. If
we let libvips calculate thumbnail sizes for us, then we can't predict
the exact size of thumbnails, because sometimes libvips rounds numbers
differently than us.
2021-12-01 04:45:26 -06:00
evazion
9591fa1302 votes: fix bug with removing votes multiple times.
Fix an issue where if you tried to remove the same vote multiple times,
nothing would happen.

Specifically, if you upvoted a post in one tab, then opened it in a
second tab, then removed your vote in the first tab, then upvoted it
again in the first tab, then tried to remove your vote again in the
second tab, nothing would happen when removing it in the second tab.

This was because we were removing votes by vote ID, which meant that if
a vote had already been removed, removing it again would do nothing
since it was already deleted.
2021-11-25 23:49:18 -06:00
evazion
8e32f656fa votes: fix division by zero in upvote ratio.
Fix a division by zero when calculating the upvote ratio in the votes tooltip.

This could happen if the post had votes according to the post_votes
table, but didn't have any votes according to the up_score and
down_score. This should never happen, yet it did happen for post 2248039
and post 2959269.
2021-11-25 23:35:09 -06:00
evazion
a45e6b5cfe Fix #4931: Add popup voter list for comments.
Show the comment's upvote and downvote count when you hover over a
comment's score. For mods, show the list of voters as well.
2021-11-24 22:18:48 -06:00
evazion
810f0b5d6b favorites: fix empty favorites tooltip.
Fix the favorites tooltip being empty when a post has no favorites.
2021-11-23 23:18:54 -06:00
evazion
353e708538 votes: allow admins to remove post votes.
Allow admins to remove votes on posts. This is for fixing vote abuse.

Votes can be removed by going to the vote list on the /post_votes page,
or by clicking on a post's score, then using the "Remove" option in the
"..." dropdown menu next to the vote.

Votes are soft-deleted - they're marked as deleted in the database, but
not fully deleted. Removed votes are only visible to admins, not to
regular users. When a vote is removed by an admin, it leaves a mod
action.

Technically it's possible to undelete votes, but there's no UI for it.
2021-11-23 23:18:54 -06:00
evazion
f151e93615 votes: fix upvote ratio calculation.
Old posts don't have vote records, so we can't use vote records to
calculate the ratio.
2021-11-21 18:06:41 -06:00
evazion
00befc96f0 /comments: add vote buttons beneath thumbnails on /comments page.
Also fix an N+1 queries problem.
2021-11-21 18:04:52 -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
3ae62d08eb favorites: show favlist when hovering over favcount.
Changes:

* Make it so you can click or hover over a post's favorite count to see
  the list of public favorites.
* Remove the "Show »" button next to the favorite count.
* Make the favorites list visible to all users. Before favorites were
  only visible to Gold users.
* Make the /favorites page show the list of all public favorites,
  instead of redirecting to the current user's favorites.
* Add /posts/:id/favorites endpoint.
* Add /users/:id/favorites endpoint.

This is for several reasons:

* To make viewing favorites work the same way as viewing upvotes.
* To make posts load faster for Gold users. Before, we loaded all the
  favorites when viewing a post, even when the user didn't look at them.
  This made pageloads slower for posts that had hundreds or thousands of
  favorites. Now we only load the favlist if the user hovers over the favcount.
* To make the favorite list visible to all users. Before, it wasn't
  visible to non-Gold users, because of the performance issue listed above.
* To make it more obvious that favorites are public by default. Before,
  since regular users could only see the favcount, they may have
  mistakenly believed other users couldn't see their favorites.
2021-11-20 02:40:18 -06:00
evazion
e28da733d7 votes: show vote buttons to logged-out users.
Show upvote and downvote buttons to logged-out users. Clicking them
sends you to the login page.
2021-11-18 04:15:20 -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
5585d1f7d6 votes: show votes when hovering over post score.
Make it so you can hover over a post's score to see the list of public
upvotes. Also show the upvote count, the downvote count, and the upvote
ratio.
2021-11-18 04:15:20 -06:00
evazion
af5cd83cd7 posts: adjust css of thumbnail video length indicator.
Switch the font to 11px bold Arial. This is more compact and more
readable than 9px Tahoma. Also add a slight border radius and margins
around the indicator to make it stand out from the edge of the image.
2021-10-25 21:17:39 -05: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
evazion
7d503f088e posts: stop using pool_string attribute.
Stop using the pool_string attribute on posts:

* Stop updating it when adding or removing posts from pools.
* Stop returning pool_string in the /posts.json API.
* Stop including the `data-pools` attribute on thumbnails.

The pool_string attribute was used in the past to facilitate pool:X
searches. Posts had a hidden pool_string attribute that contained a list
of every pool the post belonged to. These pools were treated like fake
hidden tags on the post and a search for `pool:X` was treated like a tag
search.

The pool_string has no longer been used for this purpose for a long time
now, and was only maintained for API compatibility purposes. Getting rid
of it eliminates a bunch of legacy cruft relating to adding and removing
posts from pools.

If you need to see which pools a post belongs to, do this:

* https://danbooru.donmai.us/pools.json?search[post_ids_include_any]=318550

The `data-pools` attribute on thumbnails was used by some people to add
custom borders to pooled posts with custom CSS. This will no longer
work. This was already broken because it included things like collection
pools and deleted pools, which you probably didn't want. Use a
userscript to add this attribute back to thumbnails if you need it.
2021-10-07 05:55:43 -05:00
evazion
960817e9fe posts: don't send cookies for thumbnail requests.
Set `crossorigin="anonymous"` on the <img> tag for thumbnails. This
makes it so we don't send session cookies in requests for thumbnails.
Since images are served from cdn.donmai.us, and since session cookies
are set on *.donmai.us, session cookies are sent by default with every
thumbnail request.

Not sending cookies saves up to 1kb of overhead per thumbnail request
(in reality, it's less than this because of HTTP/2 multiplexing and
header compression).
2021-09-26 07:19:36 -05:00
evazion
51bc953383 post preview component: remove workaround for blank width/height.
Remove workaround for old posts that had a null width or height. These
posts were fixed a while ago.
2021-09-25 06:34:15 -05:00