Issue #1933 - added dynamic sub-nav

webcompat · Jan 25, 2018 · 877cc6e · 877cc6e
1 parent 3a63e03
commit 877cc6e
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 152 deletions.
diff --git a/webcompat/static/css/src/nav.css b/webcompat/static/css/src/nav.css
@@ -120,4 +120,66 @@
   }
 }
 
-/* add icons to nav, right + left with x1-fix : x2, pseudo-links, sticky nav */
+
+.nav-button {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    cursor: pointer;
+    color: var(--color-second);
+    font-family: "Open Sans", sans-serif;
+}
+
+.nav-right {
+    text-align: right;
+}
+
+.nav-right .nav-item {
+    margin-right: 0;
+    padding-right: 0;
+}
+
+.nav-left {
+    margin-top: 3px;
+}
+
+.nav-dropdown-wrapper {
+    display: none;
+}
+
+.login.is-active .nav-dropdown-wrapper {
+    display: inline-block;
+    position: absolute;
+    width: var(--unit-modul-l);
+    right: 0;
+    left: 0;
+    margin-right: auto;
+    margin-right: auto;
+    margin-top: 48px;
+}
+
+.login .nav-button .nav-icon {
+    transform: rotate(90deg);
+    transition: all .1s ease 0s;
+}
+
+.login.is-active .nav-button .nav-icon {
+    transform: rotate(-90deg);
+    transition: all .2s ease 0s;
+}
+
+.login-avatar-img {
+  width: 20px;
+  position: relative;
+  top: 6px;
+}
+
+.nav-addon {
+    display: none;
+}
+
+@media screen and (min-width: 490px) {
+    .nav-addon {
+        display: inline-block;
+    }  
+}
diff --git a/webcompat/static/css/src/sub-nav.css b/webcompat/static/css/src/sub-nav.css
@@ -1,26 +1,36 @@
 .sub-nav {
-  padding-left: calc(var(--unit-space) * 2);
-  border-left: calc(var(--unit-space) / 2) solid var(--color-default);
   color: var(--color-second);
-  font-size: .875em;
+  font-size: 1em;
+  padding-left: 0;
 }
 
-.sub-nav-header {
-  text-transform: uppercase;
+.sub-nav,
+.sub-nav .sub-nav-item,
+.nested-sub-nav-item {
+  list-style: none;
+}
+
+.sub-nav.active .link-text {
   font-weight: 700;
-  position: relative;
 }
 
-.sub-nav-header::after {
-  content: "";
-  position: absolute;
-  background-image: url("../../img/svg/icons/svg-circle-down.svg");
+.sub-nav .sub-nav-item .link-text,
+.nested-sub-nav-item .link-text{
+  text-decoration: none;
+}
+
+.nested-sub::after {
+  content: " ";
+  background-image: url("../../img/svg/icons/svg-chevron-right.svg");
+  /*transform: rotate(90deg);*/
   background-repeat: no-repeat;
   background-size: contain;
-  width: 18px;
-  height: 18px;
-  top: 5px;
-  margin-left: calc(var(--unit-space) * 2);
+  background-position: 0;
+  width: 20px;
+  height: 2em;
+  position: absolute;
+  opacity: 0.7;
+  margin-left: 3px; 
 }
 
 /* var(--page-size-s) = 320px - vars not usable in queries */
@@ -31,81 +41,13 @@
 }
 
 .nested-sub-nav {
-  padding-left: calc(var(--unit-space) * 2);
+  padding-left: var(--unit-space);
+  list-style: none;
 }
 
 .sub-nav-active {
   font-weight: 700;
-  border-image: linear-gradient(var(--color-first), var(--color-first)) 10;
-  border-left: 5px solid;
-  margin-left: -5px;
+  border-left: 2px solid var(--color-first);
   color: var(--color-second);
-  border-image-outset: 4;
-}
-
-.nested-sub-nav .sub-nav-active {
-  border-image-outset: 8;
-}
-
-.nav-button {
-    border: none;
-    padding: 0;
-    background-color: transparent;
-    cursor: pointer;
-    color: var(--color-second);
-    font-family: "Open Sans", sans-serif;
-}
-
-.nav-right {
-    text-align: right;
-}
-
-.nav-right .nav-item {
-    margin-right: 0;
-    padding-right: 0;
-}
-
-.nav-left {
-    margin-top: 3px;
-}
-
-.nav-dropdown-wrapper {
-    display: none;
-}
-
-.login.is-active .nav-dropdown-wrapper {
-    display: inline-block;
-    position: absolute;
-    width: var(--unit-modul-l);
-    right: 0;
-    left: 0;
-    margin-right: auto;
-    margin-left: auto;
-    margin-top: 48px;
-}
-
-.login .nav-button .nav-icon {
-    transform: rotate(90deg);
-    transition: all .1s ease 0s;
-}
-
-.login.is-active .nav-button .nav-icon {
-    transform: rotate(-90deg);
-    transition: all .2s ease 0s;
-}
-
-.login-avatar-img {
-  width: 20px;
-  position: relative;
-  top: 6px;
-}
-
-.nav-addon {
-    display: none;
-}
-
-@media screen and (min-width: 490px) {
-    .nav-addon {
-        display: inline-block;
-    }  
+  padding-left: var(--unit-space);
 }
diff --git a/webcompat/templates/contributors.html b/webcompat/templates/contributors.html
@@ -7,19 +7,7 @@
     <section class="grid grid-show-gap">
       <div class="grid-row">
         <aside class="grid-cell x1-fix">
-          <ol class="sub-nav" class="sub-nav">
-            <li class="sub-nav-header">Table of Contents</li>
-            <li class="sub-nav-active"><a href="/contributors">Join Us</a></li>
-            <li>
-              Get Started
-              <ol class="nested-sub-nav">
-                <li><a href="/contributors/reproduce-bug">Reproduce a Bug</a></li>
-                <li><a href="/contributors/diagnose-bug">Diagnose a Bug</a></li>
-                <li><a href="/contributors/site-outreach">Site outreach</a></li>
-                <li><a href="/contributors/contribute">Contribute</a></li>
-              </ol>
-            </li>
-          </ol>
+          {% include "contributors/sub-nav.html" %}
         </aside>
         <div class="grid-cell x1">
           <section>Join us!</section>

diff --git a/webcompat/templates/contributors/contribute.html b/webcompat/templates/contributors/contribute.html
@@ -7,19 +7,7 @@
     <section class="grid grid-show-gap">
       <div class="grid-row">
         <aside class="grid-cell x1-fix">
-          <ol class="sub-nav" class="sub-nav">
-            <li class="sub-nav-header">Table of Contents</li>
-            <li><a href="/contributors">Join Us</a></li>
-            <li>
-              Get Started
-              <ol class="nested-sub-nav">
-                <li><a href="/contributors/reproduce-bug">Reproduce a Bug</a></li>
-                <li><a href="/contributors/diagnose-bug">Diagnose a Bug</a></li>
-                <li><a href="/contributors/site-outreach">Site outreach</a></li>
-                <li class="sub-nav-active"><a href="/contributors/contribute">Contribute</a></li>
-              </ol>
-            </li>
-          </ol>
+          {% include "contributors/sub-nav.html" %}
         </aside>
         <div class="grid-cell x1">
           <section>

diff --git a/webcompat/templates/contributors/diagnose-bug.html b/webcompat/templates/contributors/diagnose-bug.html
@@ -7,19 +7,7 @@
     <section class="grid grid-show-gap">
       <div class="grid-row">
         <aside class="grid-cell x1-fix">
-          <ol class="sub-nav" class="sub-nav">
-            <li class="sub-nav-header">Table of Contents</li>
-            <li><a href="/contributors">Join Us</a></li>
-            <li>
-              Get Started
-              <ol class="nested-sub-nav">
-                <li><a href="/contributors/reproduce-bug">Reproduce a Bug</a></li>
-                <li class="sub-nav-active"><a href="/contributors/diagnose-bug">Diagnose a Bug</a></li>
-                <li><a href="/contributors/site-outreach">Site outreach</a></li>
-                <li><a href="/contributors/contribute">Contribute</a></li>
-              </ol>
-            </li>
-          </ol>
+          {% include "contributors/sub-nav.html" %}
         </aside>
         <div class="grid-cell x1">
           <section>

diff --git a/webcompat/templates/contributors/reproduce-bug.html b/webcompat/templates/contributors/reproduce-bug.html
@@ -7,19 +7,7 @@
     <section class="grid grid-show-gap">
       <div class="grid-row">
         <aside class="grid-cell x1-fix">
-          <ol class="sub-nav" class="sub-nav">
-            <li class="sub-nav-header">Table of Contents</li>
-            <li><a href="/contributors">Join Us</a></li>
-            <li>
-              Get Started
-              <ol class="nested-sub-nav">
-                <li class="sub-nav-active"><a href="/contributors/reproduce-bug">Reproduce a Bug</a></li>
-                <li><a href="/contributors/diagnose-bug">Diagnose a Bug</a></li>
-                <li><a href="/contributors/site-outreach">Site outreach</a></li>
-                <li><a href="/contributors/contribute">Contribute</a></li>
-              </ol>
-            </li>
-          </ol>
+          {% include "contributors/sub-nav.html" %}
         </aside>
         <div class="grid-cell x1">
           <section>

diff --git a/webcompat/templates/contributors/site-outreach.html b/webcompat/templates/contributors/site-outreach.html
@@ -7,19 +7,7 @@
     <section class="grid grid-show-gap">
       <div class="grid-row">
         <aside class="grid-cell x1-fix">
-          <ol class="sub-nav" class="sub-nav">
-            <li class="sub-nav-header">Table of Contents</li>
-            <li><a href="/contributors">Join Us</a></li>
-            <li>
-              Get Started
-              <ol class="nested-sub-nav">
-                <li><a href="/contributors/reproduce-bug">Reproduce a Bug</a></li>
-                <li><a href="/contributors/diagnose-bug">Diagnose a Bug</a></li>
-                <li class="sub-nav-active"><a href="/contributors/site-outreach">Site outreach</a></li>
-                <li><a href="/contributors/contribute">Contribute</a></li>
-              </ol>
-            </li>
-          </ol>
+          {% include "contributors/sub-nav.html" %}
         </aside>
         <div class="grid-cell x1">
           <section>

diff --git a/webcompat/templates/contributors/sub-nav.html b/webcompat/templates/contributors/sub-nav.html
@@ -0,0 +1,44 @@
+<ol class="sub-nav" class="sub-nav">
+  <li class="sub-nav-item {% if request.url_rule.endpoint == 'contributors' %} sub-nav-active{% endif %}">
+    <a class="link-text" href="/contributors">
+      Join Us
+    </a>
+  </li>
+
+  <li class="sub-nav-item {% if 
+      request.url_rule.endpoint 
+      == 'contributors_reproduce_bug ' 
+      or 'contributors_diagnose_bug' 
+      or 'contributors_site_outreach'
+      or 'contributors_contribute'
+    %} active {% endif %}">
+    <a class="link-text" href="/contributors/reproduce-bug">
+      Get Started <span class="nested-sub"></span>
+    </a>
+    <ol class="nested-sub-nav">
+      <li class="nested-sub-nav-item">
+        <a class="link-text" href="/contributors/reproduce-bug">
+          Reproduce a Bug
+        </a>
+      </li>
+
+      <li class="nested-sub-nav-item">
+        <a class="link-text" href="/contributors/diagnose-bug">
+          Diagnose a Bug
+        </a>
+      </li>
+
+      <li class="nested-sub-nav-item">
+        <a class="link-text" href="/contributors/site-outreach">
+          Site outreach
+        </a>
+      </li>
+
+      <li class="nested-sub-nav-item">
+        <a class="link-text" href="/contributors/contribute">
+          Contribute
+        </a>
+      </li>
+    </ol>
+  </li>
+</ol>