[tor-commits] [nyx/master] Website menu with less common pages

[atagar at torproject.org]

commit 3561486591f43d45b295395765568acf01f8c08c
Author: Damian Johnson <atagar at torproject.org>
Date:   Sun Oct 22 15:57:33 2017 -0700

    Website menu with less common pages
    
    When looking at our site I just realized it's hard to figure out how to report
    bugs. It's in the FAQ, but who's gonna read that?
    
    Adding a 'more' dropdown menu with useful, but less common sections folks will
    want (changelog, bug tracker, and contact info for now). The contact page
    doesn't exist yet - that's next.
    
    God the styling on this was a pita. I'm really not sure why this negative
    margin is necessary but without it the rest of the nav menu gets pushed down.
    Stared for hours at this hoping to get something simpler but time to raise the
    flag and commit what works.
    
    I really hate the lack of a shared header, but can't say that alone is worth
    something like Hyde. :/
---
 web/changelog/index.html  | 13 +++++++++
 web/changelog/legacy.html | 13 +++++++++
 web/index.html            | 13 +++++++++
 web/styles.css            | 69 ++++++++++++++++++++++++++++++++++++++++++++++-
 4 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/web/changelog/index.html b/web/changelog/index.html
index 163f742..5740aba 100644
--- a/web/changelog/index.html
+++ b/web/changelog/index.html
@@ -12,6 +12,19 @@
     <div class="header">
       <div class="header-body">
         <span id="logo"></span>
+
+        <!-- less common nav options (bug tracker, contact, etc) -->
+
+        <div id="more">
+          <ul id="more-menu">
+            <li><a href="./index.html">Changelog</a></li>
+            <li><a href="https://trac.torproject.org/projects/tor/wiki/doc/nyx/bugs">Bug Tracker</a></li>
+            <li><a href="../index.html#contact">Contact</a></li>
+          </ul>
+        </div>
+
+        <!-- general navigation -->
+
         <div class="nav">
           <ul class="tabs nav" id="js_nav">
             <li><a href="../index.html#home">What Is It?</a></li>
diff --git a/web/changelog/legacy.html b/web/changelog/legacy.html
index 17f00c3..b758c8f 100644
--- a/web/changelog/legacy.html
+++ b/web/changelog/legacy.html
@@ -12,6 +12,19 @@
     <div class="header">
       <div class="header-body">
         <span id="logo"></span>
+
+        <!-- less common nav options (bug tracker, contact, etc) -->
+
+        <div id="more">
+          <ul id="more-menu">
+            <li><a href="./index.html">Changelog</a></li>
+            <li><a href="https://trac.torproject.org/projects/tor/wiki/doc/nyx/bugs">Bug Tracker</a></li>
+            <li><a href="../index.html#contact">Contact</a></li>
+          </ul>
+        </div>
+
+        <!-- general navigation -->
+
         <div class="nav">
           <ul class="tabs nav" id="js_nav">
             <li><a href="../index.html#home">What Is It?</a></li>
diff --git a/web/index.html b/web/index.html
index 06284ce..c26f43a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -16,6 +16,19 @@
     <div class="header">
       <div class="header-body">
         <span id="logo"></span>
+
+        <!-- less common nav options (bug tracker, contact, etc) -->
+
+        <div id="more">
+          <ul id="more-menu">
+            <li><a href="changelog/index.html">Changelog</a></li>
+            <li><a href="https://trac.torproject.org/projects/tor/wiki/doc/nyx/bugs">Bug Tracker</a></li>
+            <li><a href="#contact">Contact</a></li>
+          </ul>
+        </div>
+
+        <!-- general navigation -->
+
         <div class="nav">
           <ul class="tabs nav">
             <li><a id="t1" href="#home_section">What Is It?</a></li>
diff --git a/web/styles.css b/web/styles.css
index fd92867..276756b 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -54,7 +54,7 @@ Header Bar (logo and nav)
   display: inline;
 }
 
-.nav a { 
+.nav a {
   background: #825d27;
   border: 1px solid #47351c;
   border-bottom-right-radius: 7px;
@@ -87,6 +87,73 @@ Header Bar (logo and nav)
   color: #666666;
 }
 
+#more {
+  background: #825d27 url("images/down_arrow_white.png") no-repeat;
+  background-position: center;
+  border: 1px solid #47351c;
+  border-bottom-right-radius: 7px;
+  border-bottom-left-radius: 7px;
+  border-top: none;
+  float: right;
+  height: 29px;
+  margin-left: 3px;
+  width: 25px;
+}
+
+#more:hover {
+  background: #ffffff url("images/down_arrow_brown.png") no-repeat;
+  background-position: center;
+  border: 1px solid #885CA4;
+  border-top: none;
+}
+
+#more-menu {
+  float: right;
+  margin-top: 30px;
+  display: none;
+  text-align: left;
+}
+
+#more:hover #more-menu {
+  display: block; /* show the menu when hoving over the arrow */
+}
+
+#more-menu li {
+  background: #825d27;
+  border: 1px solid #47351c;
+  border-bottom: none;
+  border-top: none;
+  display: inline-block;
+  padding-left: 10px;
+  width: 125px;
+}
+
+#more-menu li:hover {
+  background: #ffffff;
+}
+
+#more-menu a {
+  color: #fafafa;
+  display: block;
+  font-weight: normal;
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+#more-menu li:hover a {
+  color: #000000;
+}
+
+#more-menu li:first-child {
+  border-top-right-radius: 7px;
+  border-top-left-radius: 7px;
+}
+
+#more-menu li:last-child {
+  border-bottom-right-radius: 7px;
+  border-bottom-left-radius: 7px;
+}
+
 /*============================================================
 Common Page Attributes
 ============================================================*/