Home Explore Help
Sign In
sebastian
/
threema-web
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Add noscript warning (#119)

Danilo Bargen 8 years ago
parent
2a34afd8c9
commit
8ea2db9ffa
3 changed files with 27 additions and 0 deletions
Unified View Show Diff Stats
  1. 6 0
      index.html
  2. 1 0
      src/sass/app.scss
  3. 20 0
      src/sass/sections/_noscript.scss

+ 6 - 0
index.html
View File 

@@ -49,6 +49,12 @@
 
 <body ng-controller="StatusController as ctrl" class="{{ ctrl.statusClass }}" ng-class="{expanded: ctrl.expandStatusBar}">
 
 <body ng-controller="StatusController as ctrl" class="{{ ctrl.statusClass }}" ng-class="{expanded: ctrl.expandStatusBar}">
 
     <img src="img/bg1.jpg?v=1" id="background-image" draggable="false"/>
 
     <img src="img/bg1.jpg?v=1" id="background-image" draggable="false"/>
 
 
 
+    <noscript>
 
+        <img id="logo-noscript" src="img/logo.svg?v=[[VERSION]]"></img>
 
+        <h2>Error: JavaScript not supported</h2>
 
+        <p>Please enable JavaScript in your browser to be able to use Threema Web.</p>
 
+    </noscript>
 
+
 
     <div id="main-wrapper" ng-cloak ng-class="{wide: ctrl.wide()}">
 
     <div id="main-wrapper" ng-cloak ng-class="{wide: ctrl.wide()}">
 
         <header>
 
         <header>
 
             <h1 id="title">
 
             <h1 id="title">

+ 1 - 0
src/sass/app.scss
View File 

@@ -53,6 +53,7 @@
 
 @import "sections/footer";
 
 @import "sections/footer";
 
 @import "sections/status_bar";
 
 @import "sections/status_bar";
 
 @import "sections/my_identity";
 
 @import "sections/my_identity";
 
+@import "sections/noscript";
 
 
 
 // Vendors: Third party code.
 
 // Vendors: Third party code.
 
 // Nothing to see here yet!
 
 // Nothing to see here yet!

+ 20 - 0
src/sass/sections/_noscript.scss
View File 

@@ -0,0 +1,20 @@
 
+noscript {
 
+    background-color: white;
 
+    display: block;
 
+    margin: 16px auto 0;
 
+    width: 50%;
 
+    text-align: center;
 
+    padding: 16px;
 
+
 
+    h2 {
 
+        padding-bottom: 8px;
 
+    }
 
+
 
+    img#logo-noscript {
 
+        min-width: 100px;
 
+        max-width: 300px;
 
+        padding-bottom: 16px;
 
+        margin-bottom: 16px;
 
+        border-bottom: 1px solid rgba(0, 0, 0, 0.54);
 
+    }
 
+}