commit 3561486591f43d45b295395765568acf01f8c08c Author: Damian Johnson atagar@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 ============================================================*/