From d926b69f8bdfb0c3aef668e49260f00f2473ee47 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 31 Jan 2017 12:43:28 +0100
Subject: [PATCH] Improve the main page when javascript is disabled

---
 customize.dist/about.html                  | 15 ++++--
 customize.dist/contact.html                | 15 ++++--
 customize.dist/index.html                  | 17 ++++---
 customize.dist/main.css                    | 53 ++++++++++++++++-----
 customize.dist/main.js                     |  3 ++
 customize.dist/privacy.html                | 15 ++++--
 customize.dist/src/fragments/index.html    |  2 +-
 customize.dist/src/fragments/noscript.html | 11 +++--
 customize.dist/src/less/cryptpad.less      | 55 +++++++++++++++++-----
 customize.dist/src/less/variables.less     |  2 +
 customize.dist/src/template.html           |  6 ++-
 customize.dist/terms.html                  | 15 ++++--
 12 files changed, 153 insertions(+), 56 deletions(-)

diff --git a/customize.dist/about.html b/customize.dist/about.html
index 126a4e37c..b03056297 100644
--- a/customize.dist/about.html
+++ b/customize.dist/about.html
@@ -43,8 +43,10 @@
 </div>
 
 
-    <center>
-        <noscript>
+        <div id="noscriptContainer">
+        <div class="mainOverlay"></div>
+        <div id="noscript">
+          <noscript>
           <p>
             <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
           </p>
@@ -52,12 +54,14 @@
           <p>
             <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
           </p>
-        </noscript>
-    </center>
+          </noscript>
+        </div>
+    </div>
 
 
 
-<div id="main_other">
+    <div id="mainBlock" class="hidden">
+    <div id="main_other">
       <center>
           <h1 data-localization="about">About</h1>
       </center>
@@ -69,6 +73,7 @@
 </div>
 
 
+    </div>
 </body>
 </html>
 
diff --git a/customize.dist/contact.html b/customize.dist/contact.html
index d63ac8b35..cd5c8002d 100644
--- a/customize.dist/contact.html
+++ b/customize.dist/contact.html
@@ -43,8 +43,10 @@
 </div>
 
 
-    <center>
-        <noscript>
+        <div id="noscriptContainer">
+        <div class="mainOverlay"></div>
+        <div id="noscript">
+          <noscript>
           <p>
             <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
           </p>
@@ -52,12 +54,14 @@
           <p>
             <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
           </p>
-        </noscript>
-    </center>
+          </noscript>
+        </div>
+    </div>
 
 
 
-<div id="main_other">
+    <div id="mainBlock" class="hidden">
+    <div id="main_other">
     <center>
         <h1 data-localization="contact">Contact</h1>
     </center>
@@ -66,6 +70,7 @@
 </div>
 
 
+    </div>
 </body>
 </html>
 
diff --git a/customize.dist/index.html b/customize.dist/index.html
index 474fd2b97..9db0e9902 100644
--- a/customize.dist/index.html
+++ b/customize.dist/index.html
@@ -43,8 +43,10 @@
 </div>
 
 
-    <center>
-        <noscript>
+        <div id="noscriptContainer">
+        <div class="mainOverlay"></div>
+        <div id="noscript">
+          <noscript>
           <p>
             <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
           </p>
@@ -52,18 +54,20 @@
           <p>
             <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
           </p>
-        </noscript>
-    </center>
+          </noscript>
+        </div>
+    </div>
 
 
 
-<a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+    <div id="mainBlock" class="hidden">
+    <a data-localization-title="github_ribbon" href="https://github.com/xwiki-labs/cryptpad" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="position: absolute; top: 50px; border: 0; left: 0; transform: scale(-1, 1);z-index:2;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
 <!-- Thanks! http://tholman.com/github-corners/ -->
 
 
 
 <div id="main">
-    <div id="overlay"></div>
+    <div class="mainOverlay"></div>
     <div id="main-container">
         <div id="data">
           <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
@@ -209,6 +213,7 @@
 </div>
 
 
+    </div>
 </body>
 </html>
 
diff --git a/customize.dist/main.css b/customize.dist/main.css
index 5ca09029b..28fa33878 100644
--- a/customize.dist/main.css
+++ b/customize.dist/main.css
@@ -678,10 +678,49 @@ html.cp,
 .cp .btn-default:hover {
   background-color: #d8d8d8;
 }
+.cp .mainOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #000;
+  opacity: 0.3;
+}
+.cp #mainBlock.hidden {
+  display: none;
+}
+.cp #noscriptContainer {
+  color: black;
+  position: absolute;
+  top: 50px;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: url('/customize/bg3.jpg') no-repeat center center;
+  background-size: cover;
+}
+.cp #noscriptContainer #noscript {
+  width: 1000px;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%);
+}
+.cp #noscriptContainer #noscript noscript {
+  font-size: 25px;
+  width: 1000px;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  color: #fff;
+  transform: translateY(-50%);
+}
 .cp #main {
-  background-image: url('/customize/bg3.jpg');
+  background: url('/customize/bg3.jpg') no-repeat center center;
   background-size: cover;
-  background-position: center center;
 }
 .cp #main_other {
   padding: 0 15vw;
@@ -696,16 +735,6 @@ html.cp,
   margin: auto;
   font-size: medium;
 }
-.cp #main #overlay,
-.cp #main_other #overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #000;
-  opacity: 0.3;
-}
 .cp #main #main-container,
 .cp #main_other #main-container {
   position: absolute;
diff --git a/customize.dist/main.js b/customize.dist/main.js
index 186f7f4b6..7b508581f 100644
--- a/customize.dist/main.js
+++ b/customize.dist/main.js
@@ -15,6 +15,9 @@ define([
         Cryptpad: Cryptpad,
     };
 
+    // main block is hidden in case javascript is disabled
+    $('#mainBlock').removeClass('hidden');
+
     var padTypes = {
         '/pad/': Messages.type.pad,
         '/code/': Messages.type.code,
diff --git a/customize.dist/privacy.html b/customize.dist/privacy.html
index 2464295b5..0ca9f832f 100644
--- a/customize.dist/privacy.html
+++ b/customize.dist/privacy.html
@@ -43,8 +43,10 @@
 </div>
 
 
-    <center>
-        <noscript>
+        <div id="noscriptContainer">
+        <div class="mainOverlay"></div>
+        <div id="noscript">
+          <noscript>
           <p>
             <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
           </p>
@@ -52,12 +54,14 @@
           <p>
             <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
           </p>
-        </noscript>
-    </center>
+          </noscript>
+        </div>
+    </div>
 
 
 
-<div id="main_other">
+    <div id="mainBlock" class="hidden">
+    <div id="main_other">
     <center>
         <h1 data-localization="policy_title"></h1>
     </center>
@@ -88,6 +92,7 @@
 
 
 
+    </div>
 </body>
 </html>
 
diff --git a/customize.dist/src/fragments/index.html b/customize.dist/src/fragments/index.html
index ec26eae5d..c240d29e1 100644
--- a/customize.dist/src/fragments/index.html
+++ b/customize.dist/src/fragments/index.html
@@ -1,7 +1,7 @@
 {{fork}}
 
 <div id="main">
-    <div id="overlay"></div>
+    <div class="mainOverlay"></div>
     <div id="main-container">
         <div id="data">
           <p class="left" data-localization="main_p1"><!-- Zero Knowledge collaborative realtime editor. Protected from the NSA. --></p>
diff --git a/customize.dist/src/fragments/noscript.html b/customize.dist/src/fragments/noscript.html
index 18afd4f6f..3328a56d1 100644
--- a/customize.dist/src/fragments/noscript.html
+++ b/customize.dist/src/fragments/noscript.html
@@ -1,5 +1,7 @@
-    <center>
-        <noscript>
+    <div id="noscriptContainer">
+        <div class="mainOverlay"></div>
+        <div id="noscript">
+          <noscript>
           <p>
             <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
           </p>
@@ -7,6 +9,7 @@
           <p>
             <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
           </p>
-        </noscript>
-    </center>
+          </noscript>
+        </div>
+    </div>
 
diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less
index 4efb0e5bf..72784e2a2 100644
--- a/customize.dist/src/less/cryptpad.less
+++ b/customize.dist/src/less/cryptpad.less
@@ -237,24 +237,57 @@ body.html {
         background-color: #d8d8d8;
     }
 }
+
+.mainOverlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #000;
+    opacity: 0.3;
+}
+#mainBlock {
+    &.hidden {
+        display: none;
+    }
+}
+#noscriptContainer {
+    color: black;
+    position: absolute;
+    top: @topbar-height;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    #noscript {
+        width: 1000px;
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%);
+        noscript {
+            font-size: 25px;
+            width: 1000px;
+            text-align: center;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            color: @main-color;
+            transform: translateY(-50%);
+        }
+    }
+    background: @main-bg;
+    background-size: cover;
+}
 #main {
-    background-image: url('/customize/bg3.jpg');
+    background: @main-bg;
     background-size: cover;
-    background-position: center center;
 }
 #main_other {
     padding: 0 @main-border-width;
 }
 #main, #main_other {
-    #overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background-color: #000;
-        opacity: 0.3;
-    }
     position: relative;
     left: 0;
     right: 0;
diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less
index de2539fd8..c6f8b1566 100644
--- a/customize.dist/src/less/variables.less
+++ b/customize.dist/src/less/variables.less
@@ -81,3 +81,5 @@
 
 @main-block-bg: rgba(200, 200, 200, 0.3);
 @main-color: #fff;
+@main-bg: url('/customize/bg3.jpg') no-repeat center center;
+
diff --git a/customize.dist/src/template.html b/customize.dist/src/template.html
index cb4f7cfad..47a4fcca3 100644
--- a/customize.dist/src/template.html
+++ b/customize.dist/src/template.html
@@ -20,9 +20,11 @@
 <body class="html">
     {{topbar}}
 
-{{noscript}}
+    {{noscript}}
 
-{{main}}
+    <div id="mainBlock" class="hidden">
+    {{main}}
+    </div>
 </body>
 </html>
 
diff --git a/customize.dist/terms.html b/customize.dist/terms.html
index 246abf60d..184ddbb94 100644
--- a/customize.dist/terms.html
+++ b/customize.dist/terms.html
@@ -43,8 +43,10 @@
 </div>
 
 
-    <center>
-        <noscript>
+        <div id="noscriptContainer">
+        <div class="mainOverlay"></div>
+        <div id="noscript">
+          <noscript>
           <p>
             <strong>OOPS</strong> In order to do encryption in your browser, Javascript is really <strong>really</strong> required.
           </p>
@@ -52,12 +54,14 @@
           <p>
             <strong>OUPS</strong> Afin de pouvoir réaliser le chiffrement dans votre navigateur, Javascript est <strong>vraiment</strong> nécessaire.
           </p>
-        </noscript>
-    </center>
+          </noscript>
+        </div>
+    </div>
 
 
 
-<div id="main_other">
+    <div id="mainBlock" class="hidden">
+    <div id="main_other">
     <center>
         <h1 data-localization="tos_title"></h1>
     </center>
@@ -70,6 +74,7 @@
 </div>
 
 
+    </div>
 </body>
 </html>