Improve noscript message and style (#4315)

diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 1f70c65637bd710395161b6657e542d3c21c9eb7..e6ccace9c650f166d39f98d275a2903620faa073 100644 (file)
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3723,12 +3723,26 @@ button.icon-button.active i.fa-retweet {
 noscript {
   text-align: center;
 
+  img {
+    width: 200px;
+    opacity: 0.5;
+    animation: flicker 4s infinite;
+  }
+
   div {
-    font-size: 20px;
-    margin: 20px 0;
+    font-size: 14px;
+    margin: 30px auto;
+    color: $ui-secondary-color;
+    max-width: 400px;
   }
 }
 
+@keyframes flicker {
+  0% { opacity: 1; }
+  30% { opacity: 0.75; }
+  100% { opacity: 1; }
+}
+
 @media screen and (max-width: 1024px) and (max-height: 400px) {
   $duration: 400ms;
   $delay: 100ms;

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index a2ea0d948198a8309d4f91456734609f975d992d..75fe59f00f2ed1168ccbbd65bf8253dd8b160314 100644 (file)
--- a/app/views/home/index.html.haml
+++ b/app/views/home/index.html.haml
@@ -6,6 +6,7 @@
 
 .app-holder#mastodon{ data: { props: Oj.dump(default_props) } }
   %noscript
-    = image_tag asset_pack_path('logo.svg')
+    = image_tag asset_pack_path('logo.svg'), alt: 'Mastodon'
+
     %div
       = t('errors.noscript')

diff --git a/config/locales/en.yml b/config/locales/en.yml
index 92d369b37f78458af103d8938bc8e28c123115e1..cc2ea05423041495e31b2473a477e8eb994c555d 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -272,7 +272,7 @@ en:
       content: Security verification failed. Are you blocking cookies?
       title: Security verification failed
     '429': Throttled
-    noscript: To use Mastodon, please enable JavaScript.
+    noscript: To use the Mastodon web application, please enable JavaScript. Alternatively, find a native app for Mastodon for your platform.
   exports:
     blocks: You block
     csv: CSV