Restructure the Dockerfile and the CSS/JS files so that we only rebuild
the CSS and JS when they change, not on every commit.
Before it took several minutes to rebuild the Docker image after every
commit, even when the JS/CSS files didn't change. This also made pulling
images slower.
This requires refactoring the CSS and JS to not use embedded Ruby (ERB)
templates, since this made the CSS and JS dependent on the Ruby
codebase, which is why we had to rebuild the assets after every Ruby
change.
Flash is dead. It's no longer supported by browsers, it's not
well-supported by emulators, and only two Flash posts were uploaded in
the last year anyway. Old Flash files will continue to exist, but new
Flash uploads will no longer be allowed.
Adjust input boxes to fit the screen better on mobile, and to use
consistent sizes throughout the site (no ad-hoc overrides to make
certain input boxes a bit bigger in random places).
On desktop, this makes most input boxes a bit taller and narrower. On
mobile, it makes input boxes the full width of the screen.
This most notably affects the tag edit box, the comment and forum
post box, the wiki page edit box, and the commentary box.
Regression caused by the upgrade to Webpacker 6.0 in 90cd3293e. This
caused various Javascript errors in old versions of Chrome, which
somehow resulted in the keyboard shortcut for visiting the next page
being triggered when you pressed any key.
Specifically, the mobx library (used by the TagCounter component) called
`Object.entries`, which isn't available in Chrome 49, and for some
unknown reason this triggered the buggy shortcut behavior.
`Object.entries` is supposed to be automatically polyfilled by Babel to
support old browsers, but something changed in Webpacker 6 that broke
this and I couldn't get it working again. The probable cause is that
Webpacker 6 no longer transpiles code inside ./node_modules by default,
which means that any libraries we use that use new Javascript features
won't get transpiled down to support old browsers, but even after fixing
that it still didn't work. The workaround is to just drop mobx and
preact entirely to avoid the issue.
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.
Disable the browser's native spellchecking ability on all form inputs,
except for DText inputs. We do this by setting `spellcheck="false"` on
the <body> tag, and `spellcheck="true"` on DText <input> tags.
This fixes browsers displaying a red wavy underline beneath tags in the
tag search box, among other places. We disable spellchecking globally
because most form inputs, except for DText inputs, aren't meant for
natural English language.
Rewrite the tag counter widget (the one above the tag edit box) to use
React. This is a trial run for using React elsewhere.
We actually use Preact instead of React because it's lighter weight.
We use Mobx for state management because it's cleaner than React's
setState or useState.
This incidentally fixes a couple bugs:
* The tag counter wasn't updated when deleting tags with backspace
* The tag counter wasn't updated when pasting in new tags.
* Fix preview images not being resized to fit the screen when using the
bookmarklet.
* Fit images to both screen width and height by default. Previously we
fit to screen width only, so tall images were hard to see.
* Allow clicking on the image or pressing Z to toggle image size.
* Move size information to above the image and add resize links:
** small: fit width and height
** large: fit width
** full: fit none
* Bind the image error handler in an onerror attribute on the image
itself so that it will always fire. Before it wouldn't fire if the image
failed immediately on pageload before we could bind the error handler.
Also remove options to configure names of wiki notice pages. These names
generally don't need to be changed and we already hardcode links to wiki
pages in other places anyway.
* Standardize the upload widget background colors (light green for success,
light red for error).
* Move the progress bar to the bottom of the upload widget.
* Change the progress bar color to blue.
* Hide the "drag and drop a file here" message after a file has
already been uploaded.
Ensure dtext is always wrapped in a `<div class="prose">` or
`<span class="prose">` (for inline dtext) container so that dtext css is
properly applied.
https://danbooru.donmai.us/forum_topics/9127?page=265#forum_post_153180:
> I'm not sure how to reproduce this, but sometimes on the upload page
> when I click the button to pop out the tag box, the screen scrolls up to
> the picture but the box doesn't pop out, and I have to scroll back down
> and click it again
https://danbooru.donmai.us/forum_topics/9127?page=266#forum_post_153183:
> Yes, this was brought up by Unbreakable on Discord a while back. It's
> due to the fact that the event handler that pops out the dialog box has
> not yet been bound by the time you click it. Since that clickable
> control has an empty anchor link of "#" which goes nowhere, it therefore
> redirects the user to the top of the page.
Refactor the /related_tags.js call so that when the "Related tags"
button is clicked, it only replaces the columns that actually changed,
not the entire related tags section.
This avoids rebuilding the Recent / Frequent / Translated Tags / Artist
columns every time the "Related tags" button is clicked.
* On posts, automatically trigger "Fetch source data" when clicking the
Edit tab, instead of triggering the artist finder button. This way we
find both the artist and the translated tags in one ajax call.
* Remove the "Artist" finder button next to the source field. This isn't
necessary given that "Fetch source data" finds the artist itself.
* Remove the /artists/finder.json API endpoint. This is no longer used
after removing the "Artist" finder button.
* On the /uploads/new page, instead of just showing a "This post has
probably already been uploaded" message, show the actual thumbnails of
posts having the same source as what the user is trying to upload.
* Move the iqdb results section up top, beside the related posts section.
Also makes it so that using the bookmarklet always triggers async upload
preprocessing. Before it was only triggered when the source passed a
dupe check, but that check was inaccurate (#3873).
to match the rest of the code base
For flash files I've used the file extension because the mime type is browser
specific and I've found at least 2 different variations for .swf:
1. `application/vnd.adobe.flash-movie`: wikipedia
2. `application/vnd.adobe.flash.movie`: mailcap, firefox
some other browser may not even know the .swf extension in the first place
