drupal integration - revised general header HTML and Sass to coincide with…

drupal integration - revised general header HTML and Sass to coincide with marketing site nav and theme

lms/static/sass/multicourse/_account.scss

@@ -77,7 +77,7 @@
   }
 
   aside {
-    margin: 0;
+    margin: ($baseline*1.5) 0 0 0;
     width: flex-grid(4);
     float: left;
   }

lms/static/sass/shared/_header.scss

 header.global {
   border-bottom: 1px solid rgb(190,190,190);
   @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
-  @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)));
-  height: 68px;
+  background: $white;
+  height: 76px;
   position: relative;
   width: 100%;
   z-index: 10;
@@ -12,7 +12,7 @@ header.global {
     height: 40px;
     margin: 0 auto;
     max-width: 1200px;
-    padding: 14px 10px 0px;
+    padding: 18px 10px 0px;
     max-width: grid-width(12);
     min-width: 760px;
   }
@@ -251,4 +251,68 @@ header.global {
       }
     }
   }
-}
+
+  .nav-global {
+    margin-top: ($baseline/4);
+    list-style: none;
+
+    li {
+      display: inline-block;
+      margin: 0 ($baseline/4) 0 0;
+      font-size: em(16);
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      a {
+        display:block;
+        padding: ($baseline/4);
+        color: tint($black, 20%);
+
+        &:hover, &:active {
+          text-decoration: none;
+          color: $m-blue;
+        }
+      }
+    }
+
+    // logged in
+    &.authenticated {
+
+    }
+  }
+
+  .nav-courseware {
+    float: right;
+    margin-top: ($baseline/2);
+    list-style: none;
+
+    li {
+      display: inline-block;
+
+      a {
+        @include button(simple, $blue);
+        @include box-sizing(border-box);
+        @include border-radius(3px);
+        padding: ($baseline/4) ($baseline/2);
+        font-size: em(14);
+        font-weight: 600;
+        letter-spacing: 0;
+        text-align: center;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+
+    // logged in
+    &.authenticated {
+
+    }
+  }
+}
\ No newline at end of file

lms/templates/navigation.html

@@ -44,13 +44,16 @@ site_status_msg = get_site_status_msg(course_id)
       <h2><span class="provider">${course.org}:</span> ${course.number} ${course.title}</h2>
     % endif
 
-    <ol class="left find-courses-button">
-      <li class="primary">
-        <a href="${reverse('courses')}">Find Courses</a>
+    % if user.is_authenticated():
+    <ol class="left nav-global authenticated">
+      <li class="nav-global-02">
+        <a href="${reverse('courses')}">Courses</a>
+      </li>
+      <li class="nav-global-03">
+        <a href="#">Schools</a>
       </li>
     </ol>
 
-  % if user.is_authenticated():
     <ol class="user">
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
@@ -61,38 +64,40 @@ site_status_msg = get_site_status_msg(course_id)
       <li class="primary">
         <a href="#" class="dropdown">&#9662</a>
         <ul class="dropdown-menu">
-##          <li><a href="#">Account Settings</a></li>
           <li><a href="${reverse('help_edx')}">Help</a></li>
           <li><a href="${reverse('logout')}">Log Out</a></li>
         </ul>
       </li>
     </ol>
 
-  % else:
-    <ol class="guest">
-      <li class="secondary">
-        <a href="${reverse('about_edx')}">About</a>
-        <a href="http://edxonline.tumblr.com/">Blog</a>
-        <a href="${reverse('jobs')}">Jobs</a>
-% if not settings.MITX_FEATURES['DISABLE_LOGIN_BUTTON']:
-        <a href="#login-modal" id="login" rel="leanModal">Log In</a>
-% endif
+    % else:
+    <ol class="left nav-global">
+      <li class="nav-global-01">
+        <a href="#">How it Works</a>
       </li>
-% if not settings.MITX_FEATURES['DISABLE_LOGIN_BUTTON']:
-      <li class="primary">
-        <a href="#signup-modal" id="signup" rel="leanModal">Sign Up</a>
+      <li class="nav-global-02">
+        <a href="${reverse('courses')}">Courses</a>
       </li>
-% endif
+      <li class="nav-global-03">
+        <a href="#">Schools</a>
+      </li>
+      % if not settings.MITX_FEATURES['DISABLE_LOGIN_BUTTON']:
+      <li class="nav-global-04">
+        <a class="cta cta-register" href="#">Register Now</a>
+      </li>
+      % endif
+    </ol>
+
+    <ol class="right nav-courseware">
+    <li class="nav-courseware-01">
+      % if not settings.MITX_FEATURES['DISABLE_LOGIN_BUTTON']:
+      <a class="cta cta-login" href="#">Current Students</a>
+      % endif
+    </li>
     </ol>
-  %endif
+    % endif
   </nav>
 </header>
 % if course:
 <div class="ie-banner"><strong>Warning:</strong> Your browser is not fully supported. We strongly recommend using <a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">Chrome</a> or <a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>.</div>
-% endif
-
-%if not user.is_authenticated():
-  <%include file="login_modal.html" />
-  <%include file="signup_modal.html" />
-  <%include file="forgot_password_modal.html" />
-%endif
+% endif
\ No newline at end of file