diff --git a/app/javascript/packs/error.js b/app/javascript/packs/error.js new file mode 100644 index 000000000..685c89065 --- /dev/null +++ b/app/javascript/packs/error.js @@ -0,0 +1,13 @@ +import ready from '../mastodon/ready'; + +ready(() => { + const image = document.querySelector('img'); + + image.addEventListener('mouseenter', () => { + image.src = '/oops.gif'; + }); + + image.addEventListener('mouseleave', () => { + image.src = '/oops.png'; + }); +}); diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss index 746def625..4411ca0b4 100644 --- a/app/javascript/styles/mastodon/basics.scss +++ b/app/javascript/styles/mastodon/basics.scss @@ -100,12 +100,14 @@ body { vertical-align: middle; margin: 20px; - img { - display: block; - max-width: 470px; - width: 100%; - height: auto; - margin-top: -120px; + &__illustration { + img { + display: block; + max-width: 470px; + width: 100%; + height: auto; + margin-top: -120px; + } } h1 { diff --git a/app/views/layouts/error.html.haml b/app/views/layouts/error.html.haml index 37359b89b..25c85abf9 100644 --- a/app/views/layouts/error.html.haml +++ b/app/views/layouts/error.html.haml @@ -7,8 +7,11 @@ %meta{ content: 'width=device-width,initial-scale=1', name: 'viewport' }/ = stylesheet_pack_tag 'common', media: 'all' = stylesheet_pack_tag Setting.default_settings['theme'], media: 'all' + = javascript_pack_tag 'common', integrity: true, crossorigin: 'anonymous' + = javascript_pack_tag 'error', integrity: true, crossorigin: 'anonymous' %body.error .dialog - %img{ alt: Setting.default_settings['site_title'], src: '/oops.gif' }/ - %div + .dialog__illustration + %img{ alt: Setting.default_settings['site_title'], src: '/oops.png' }/ + .dialog__message %h1= yield :content diff --git a/public/oops.png b/public/oops.png new file mode 100644 index 000000000..1ac779f25 Binary files /dev/null and b/public/oops.png differ