Improve lack of JavaScript management

Remove menu flickering when loading big pages
mozfr · Jan 4, 2016 · ed88681 · ed88681
1 parent 2831c6c
commit ed88681
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 7 deletions.
diff --git a/app/views/templates/base.php b/app/views/templates/base.php
@@ -81,7 +81,10 @@
     <link rel="shortcut icon" type="image/x-icon" href="https://www.mozfr.org/favicon.ico" />
     <link rel="alternate" type="application/rss+xml" title="Changelog RSS" href="/rss" />
   </head>
-<body id="<?= $page ?>">
+<body id="<?= $page ?>" class="nojs">
+  <script>
+    document.getElementsByTagName('body')[0].className = 'jsEnabled';
+  </script>
   <div id="links-top" class="links">
     <div class="container">
       <?= $links ?>

diff --git a/web/js/base.js b/web/js/base.js
@@ -51,10 +51,6 @@ $(document).ready(function() {
             .prop('selected', true);
     });
 
-    // Javascript is enabled, hide the menu without transitions
-    hideMenuButton(0);
-    $('#noscript-warning').hide();
-
     // Hides search options on small screens (check if the warning is displayed)
     if ($('.smallscreen_notices').is(':visible')) {
         $('#searchoptions').hide();

diff --git a/web/style/transvision.css b/web/style/transvision.css
@@ -201,10 +201,14 @@ h3 {
 #links-top {
     width: 100%;
     background: #fff;
-    display: block;
     margin: 0;
     padding: 50px 0 20px;
     float: left;
+    display: none;
+}
+
+.nojs #links-top {
+    display: block;
 }
 
 #links-top .container {
@@ -228,7 +232,11 @@ h3 {
     margin-right: 5px;
     width: 125px;
     height: 36px;
-    background: url(/img/menu.png) center -38px no-repeat transparent;
+    background: url(/img/menu.png) center 0 no-repeat transparent;
+}
+
+.nojs #links-top-button {
+    background-position: 0 -38px;
 }
 
 .selected_view,
@@ -242,6 +250,12 @@ h3 {
     text-align: center;
     font-weight: bold;
     padding: 0 30px;
+    margin-top: 20px;
+    display: none;
+}
+
+.nojs #noscript-warning {
+    display: block;
 }
 
 /* Tables */