[tor-commits] [nyx/master] Implify handling when JS is disabled

Sat Aug 5 01:18:26 UTC 2017

commit 234119226aced7b86955c41cd6b40820f49c86e8
Author: Damian Johnson <atagar at torproject.org>
Date:   Fri Aug 4 12:43:43 2017 -0700

    Implify handling when JS is disabled
    
    Using the same nav for both, and just adjusting the links when javascript is
    enabled. Also moving non-js styling to a file.
---
 web/index.html       | 40 ++++++++++++++--------------------------
 web/styles_no_js.css | 12 ++++++++++++
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/web/index.html b/web/index.html
index be2286d..51be751 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,21 +6,10 @@
     <title>Nyx</title>
     <link rel="shortcut icon" href="images/favicon.png"/>
     <link rel="stylesheet" type="text/css" href="styles.css" />
+    <noscript><link rel="stylesheet" type="text/css" href="styles_no_js.css"></noscript>
 
     <!-- jQueryTools 1.2.6 (https://jquerytools.github.io/download/), copied July 24, 2017 -->
-    <script src="jquery.tools.min.js"></script>
-
-    <noscript>
-      <style>
-#js_nav {
-  display: none;
-}
-
-#faq_section {
-  display: none;
-}
-      </style>
-    </noscript>
+    <script src="jquery.tools.min.js" type="text/javascript"></script>
   </head>
 
   <body>
@@ -28,19 +17,11 @@
       <div class="header-body">
         <span id="logo"></span>
         <div class="nav">
-          <ul class="tabs nav" id="js_nav">
-            <li><a id="t1" href="#home">What Is It?</a></li>
-            <li><a id="t2" href="#faq">FAQ</a></li>
-            <li><a id="t3" href="#download">Download</a></li>
+          <ul class="tabs nav">
+            <li><a id="t1" href="#home_section">What Is It?</a></li>
+            <li><a id="t2" href="#faq_section">FAQ</a></li>
+            <li><a id="t3" href="#download_section">Download</a></li>
           </ul>
-
-          <noscript>
-            <!-- hide faq since it doesn't work without JS -->
-            <ul class="tabs nav">
-              <li><a href="#home_section">What Is It?</a></li>
-              <li><a href="#download_section">Download</a></li>
-            </ul>
-          </noscript>
         </div>
       </div>
     </div>
@@ -395,10 +376,17 @@ sudo python setup.py install</pre><br /></li>
       </div>
     </div>
 
-    <script>
+    <script type="text/javascript">
     $(function() {
       $(".tabs").tabs(".page", { history: true });
 
+      // when javascript is enabled change nav anchors so they're both shorter
+      // and don't move focus
+
+      document.getElementById("t1").href = "#home";
+      document.getElementById("t2").href = "#faq";
+      document.getElementById("t3").href = "#download";
+
       // show/hide for FAQ questions
 
       var toggleFaq = function(answer) {
diff --git a/web/styles_no_js.css b/web/styles_no_js.css
new file mode 100644
index 0000000..d7b03f3
--- /dev/null
+++ b/web/styles_no_js.css
@@ -0,0 +1,12 @@
+/*============================================================
+Attributes when javascript is disabled
+============================================================*/
+
+#t2 {
+  display: none;
+}
+
+#faq_section {
+  display: none;
+}
+



