commit 234119226aced7b86955c41cd6b40820f49c86e8 Author: Damian Johnson atagar@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; +} +