From 3a3b556065d34a52843b427fb211d8649f01fe89 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sun, 23 Jul 2017 20:28:06 +0200
Subject: [PATCH] Improve noscript message and style (#4315)
---
app/javascript/styles/components.scss | 20 +++++++++++++++++---
app/views/home/index.html.haml | 3 ++-
config/locales/en.yml | 2 +-
3 files changed, 20 insertions(+), 5 deletions(-)
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 1f70c6563..e6ccace9c 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3723,10 +3723,24 @@ button.icon-button.active i.fa-retweet {
noscript {
text-align: center;
- div {
- font-size: 20px;
- margin: 20px 0;
+ img {
+ width: 200px;
+ opacity: 0.5;
+ animation: flicker 4s infinite;
}
+
+ div {
+ 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) {
diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
index a2ea0d948..75fe59f00 100644
--- 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 92d369b37..cc2ea0542 100644
--- 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