Related to #1019 - repsonsive fellowships nav + #977 - better multi-p…

…age nav on mobile
MozillaFoundation · Jan 31, 2018 · 1fd88c3 · 1fd88c3
1 parent 76974d7
commit 1fd88c3
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 19 deletions.
diff --git a/network-api/networkapi/templates/fellowships-base.html b/network-api/networkapi/templates/fellowships-base.html
@@ -78,11 +78,11 @@
       <div class="container">
         <div class="row">
           <div class="col">
-            <div class="d-flex flex-row align-items-center">
-              <a href="{% url 'fellowships-home' %}" class="{% fellowship_active_nav request 'fellowships-home fellowships-science fellowships-open-web' %} mr-4">Fellowships</a>
-              <a href="{% url 'fellowships-directory' %}" class="{% fellowship_active_nav request 'fellowships-directory' %} mr-4">Directory</a>
-              <a href="{% url 'fellowships-support' %}" class="{% fellowship_active_nav request 'fellowships-support' %} mr-4">Support the Program</a>
-              <a href="{% url 'fellowships-apply' %}" class="{% fellowship_active_nav request 'fellowships-apply' %} mr-4">Apply to be a Fellow</a>
+            <div id="multipage-nav" class="d-flex flex-row align-items-center">
+              <div class="nav-item"><a href="{% url 'fellowships-home' %}" class="{% fellowship_active_nav request 'fellowships-home fellowships-science fellowships-open-web' %}">Fellowships</a></div>
+              <div class="nav-item"><a href="{% url 'fellowships-directory' %}" class="{% fellowship_active_nav request 'fellowships-directory' %}">Directory</a></div>
+              <div class="nav-item"><a href="{% url 'fellowships-support' %}" class="{% fellowship_active_nav request 'fellowships-support' %}">Support the Program</a></div>
+              <div class="nav-item"><a href="" class="">Apply to be a Fellow</a></div>
             </div>
           </div>
         </div>

diff --git a/source/js/components/multipage-nav/multipage-nav.jsx b/source/js/components/multipage-nav/multipage-nav.jsx
@@ -18,19 +18,32 @@ export default class MultipageNav extends React.Component {
   }
 
   render() {
+    let activeLinkLabel;
     let links = this.props.links.map((link, index) => {
       let className = `opp-link${ link.isActive ? ` opp-link-active` : `` }`;
 
+      if (link.isActive) {
+        activeLinkLabel = <a className={`active-link-label d-inline-block ${className}`}>{link.label}</a>;
+      }
+
       return (
         <div key={`link-${index}`}>
           <a href={link.href} className={className}>{link.label}</a>
-          {index === 0 &&
-            <button className="expander" onClick={this.toggle}></button>
-          }
         </div>
       );
     });
 
+    console.log(activeLinkLabel);
+
+    links.unshift(<div key="current-active-link">
+      <button className="expander" onClick={this.toggle}>
+        <div className="d-flex justify-content-between">
+          {activeLinkLabel}
+          <div className="d-inline-block control"></div>
+        </div>
+      </button>
+    </div>);
+
     return (
       <div className={`multipage-nav${this.state.isOpen ? ` multipage-nav-open` : ``}`}>
         {links}

diff --git a/source/js/components/multipage-nav/multipage-nav.scss b/source/js/components/multipage-nav/multipage-nav.scss
@@ -9,15 +9,23 @@
     }
 
     .expander {
-      background: url('../_images/chevron.svg') no-repeat;
-      background-size: contain;
-      font-size: 0;
+      background: none;
+      text-align: left;
+      width: 100%;
       border: 0;
-      width: 15px;
-      height: 10px;
-      transform: rotate(180deg);
-      transition: transform 100ms linear;
       outline: 0;
+      padding: 0;
+
+      .control {
+        display: inline-block;
+        background: url('../_images/chevron.svg') no-repeat;
+        background-size: contain;
+        background-position: center right;
+        width: 15px;
+        height: 10px;
+        transform: rotate(180deg);
+        transition: transform 100ms linear;
+      }
     }
 
     div:not(:first-child) {
@@ -26,7 +34,13 @@
 
     &.multipage-nav-open {
       .expander {
-        transform: rotate(0);
+        .active-link-label {
+          visibility: hidden;
+        }
+
+        .control {
+          transform: rotate(0);
+        }
       }
 
       div:not(:first-child) {

diff --git a/source/sass/type.scss b/source/sass/type.scss
@@ -41,7 +41,7 @@ a {
   line-height: 1.5;
 }
 
-@mixin yellow-underline-nav-link($active-class-name, $font-family: "Zilla Slab") {
+@mixin yellow-underline-nav-link($active-class-name, $font-family: "Nunito Sans") {
   font-family: $font-family;
   color: #231f20;
   position: relative;

diff --git a/source/sass/views/fellowships/shared.scss b/source/sass/views/fellowships/shared.scss
@@ -1,6 +1,23 @@
 #fellowships-nav {
-  a {
-    @include yellow-underline-nav-link(".active", "Nunito Sans");
+  background: #f2f2f2;
+
+  @media screen and (min-width: $bp-md) {
+    background: none;
+  }
+
+  .nav-item {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+
+    @media screen and (min-width: $bp-md) {
+      margin-right: 2rem;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    a {
+      @include yellow-underline-nav-link(".active");
+    }
   }
 }