Change error graphic to hover-to-play (#10055)

Fix #6060

diff --git a/app/javascript/packs/error.js b/app/javascript/packs/error.js
new file mode 100644 (file)
index 0000000..685c890
--- /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 746def6251c14349b6b5227c38ceb4f1ec7c6fc2..4411ca0b4cfe543c3d84d5c328bbc8cac0024706 100644 (file)
--- 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 37359b89b95dc1eea11f04d69863ada25d676c78..25c85abf9e7964611d339bc9177af4eeac4c89fd 100644 (file)
--- 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 (file)
index 0000000..1ac779f
Binary files /dev/null and b/public/oops.png differ