Commit Graph

14 Commits

Author SHA1 Message Date
evazion
695568e08b media assets: add options to download or reverse search the image. 2022-11-29 19:10:08 -06:00
evazion
f54fac74c8 Add image icon next to thumbnail size dropdown menu. 2022-02-17 20:31:59 -06:00
evazion
67d834775d js: add symlinks for component .js files.
Followup to ef0d8151d. Add symlinks from app/components/**/*.js to
app/javascript/src/javascripts/*.js so you can still see a component's
Javascript inside the component.
2022-02-08 14:21:32 -06:00
evazion
ef0d8151d8 js: reorganize Javascript file structure.
Move Javascript files from app/components/**/*.js back to app/javascript/src/javascripts/*.js.
This way Javascript files are in one place, which simplifies import paths and makes it
easier to see all Javascript at once.
2022-02-08 14:15:35 -06:00
evazion
d0ce511465 css: fix stylelint errors. 2022-01-17 11:58:19 -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
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
fee7ed506b comments: put sticky option in popup menu instead of in edit form.
Put the option to sticky a comment in the "..." popup menu instead of
in the comment edit form. This makes it more consistent with deleting or
undeleting a comment.

Also fix a bug where the comment undelete icon didn't show up due to a
typo.
2021-03-07 20:13:38 -06:00
evazion
b6e06ee6fc Fix #4676: Series pool shown as blue unless hovered.
Broken in 49bc2364 by the use of @extend.

Here's what happened. There are two CSS rules that both apply to pool links:

* a:link { color: var(--link-color); }
* .pool-category-series a { color: var(--series-pool-color); }

These rules have equal specificity (0-1-1). This means the rule that is
defined last takes priority. This means the order in which CSS files are
included matters. 49bc2364 used the @extend directive in a rule for
popup menus, which required an @import, which changed the order of the
CSS files, which made the a:link rule suddenly take priority over the
series pool rule.

The proper fix would be to use Sass's new @use directive instead of
@import, but that requires the latest version of Sass, which requires
the latest version of Webpacker, which we can't upgrade to yet because
of breaking changes.

The real moral of the story is: our CSS is very fragile because of
specificity rules. It's very important that rules are defined in a
certain order, otherwise our CSS will break.

* https://sass-lang.com/documentation/at-rules/use
* https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
2021-01-23 16:01:08 -06:00
evazion
7629a99030 Fix #4675: Comment tooltip doesn't show properly on phone.
Possible fix for #4675. This is still wonky; tapping the menu icon now
opens the menu, but doesn't close it. You have to tap outside the menu
to hide it.
2021-01-23 01:16:46 -06:00
evazion
49bc2364bd comments: tweak styling of vote buttons.
* Tweak hover colors for vote buttons.
* Tweak sizes to avoid the vote buttons shifting when the score changes.
2021-01-21 07:58:50 -06:00
evazion
63e3b4b447 views: factor out FontAwesome icons.
Factor out FontAwesome icons into a set of helpers. This is so that it's
easier to keep track of which icons we're using and easier to change
icons globally.
2021-01-21 07:58:50 -06:00
evazion
5780ed5768 comments: add scores, rework comment menu.
* Add comment scores.
* Rework voting buttons so that you can click the upvote/downvote
  buttons to toggle votes.
* Hide the edit, delete, undelete, and report buttons behind a popup menu.
* Show the upvote/downvote/reply buttons to logged out users. Redirect
  them to the login page instead.
2021-01-20 04:41:21 -06:00
evazion
ccae422961 Factor out popup menu component.
Factor out the popup menu inside user tooltips into a reusable
component.
2021-01-19 20:22:41 -06:00