studio - revises studio nav visually and adds help links

2013-06-27 16:11:56 -04:00
parent 51f96ad77c
commit 2a04eeec46
5 changed files with 337 additions and 70 deletions
--- a/cms/static/sass/elements/_controls.scss
+++ b/cms/static/sass/elements/_controls.scss
@@ -135,12 +135,33 @@

 // ====================

-// layout-based buttons
-.btn-nav-primary {
-  @extend .btn-nav-simple;
+// simple dropdown button styling - should we move this elsewhere?
+.btn-dd {
+  @extend .btn;
+  @extend .btn-pill;
+  padding:($baseline/4) ($baseline/2);
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  text-align: center;
+
+  &:hover, &:active {
+    @extend .fake-link;
+    border-color: $gray-l3;
+  }
+
+  &.current, &.active, &.is-selected {
+    @include box-shadow(inset 0 1px 2px 1px $shadow-l1);
+    border-color: $gray-l3;
+  }
+}
+
+// layout-based buttons - nav dd
+.btn-dd-nav-primary {
+  @extend .btn-dd;
  background: $white;
  border-color: $white;
-  color: $gray;
+  color: $gray-d1;

  &:hover, &:active {
    background: $white;
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -3,12 +3,12 @@

 .wrapper-header {
  @extend .depth3;
-  margin: 0;
  @include box-shadow(0 1px 2px 0 $shadow-l1);
-  background: $white;
  position: relative;
  width: 100%;
-  padding: $baseline;
+  margin: 0;
+  padding: 0 $baseline;
+  background: $white;

  header.primary {
    @include box-sizing(border-box);
@@ -48,14 +48,22 @@
        margin-right: 0;
      }
    }
+
+    .nav-item a {
+      color: $gray-d1;
+
+      &:hover {
+        color: $blue-s1;
+      }
+    }
  }

-   // basic layout - dropdowns
-   .nav-dd {
+  // basic layout - dropdowns
+  .nav-dd {

    .title {
      @extend .t-action2;
-      @extend .btn-nav-primary;
+      @extend .btn-dd-nav-primary;
      @include transition(all 0.25s ease-in-out 0);

      .label, .icon-caret-down {
@@ -76,13 +84,23 @@
          opacity: 1.0;
        }
      }
+
+      .nav-sub .nav-item {
+
+        [class^="icon-"] {
+          display: inline-block;
+          vertical-align: middle;
+          margin-right: ($baseline/4);
+        }
+      }
    }
-   }
+  }

  // ====================

  // specific elements - branding
  .branding {
+    padding: ($baseline*0.75) 0;

    a {
      display: block;
@@ -98,30 +116,42 @@

  // specific elements - course name/info
  .info-course {
-    margin-right: ($baseline/4);
-    border-right: 1px solid $gray-l3;
-    padding: ($baseline/2) $baseline ($baseline/2) 0;
+    margin-right: ($baseline*0.75);
+    border-right: 1px solid $gray-l4;
+    padding: ($baseline*0.75) $baseline ($baseline*0.75) 0;

    .course-org, .course-number {
-      @extend .text-sr;
+      @extend .t-action4;
+      display: inline-block;
+      vertical-align: middle;
+      opacity: 0.75;
+    }
+
+    .course-org {
+      width: 50%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin-right: ($baseline/4);
    }

    .course-title {
-      @extend .t-action3;
+      @extend .t-action2;
      display: block;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 600;
-      color: $gray;
    }

    // entire link
    a {
+      @include transition(color 0.25s ease-in-out);
+      color: $gray-d1;

      &:hover {
-
+        color: $blue-s1;
      }
    }
  }
@@ -130,23 +160,26 @@

  // specific elements - course nav
  .nav-course {
-
-    .nav-item {
-
-      .title {
-
-      }
-    }
+    padding: ($baseline*0.75) 0;
  }

  // ====================

  // specific elements - account-based nav
  .nav-account {
+    position: relative;
+    padding: ($baseline*0.75) 0;
    text-align: right;

+    .nav-sub {
+      text-align: left;
+    }
+
    .nav-account-help {

+      .wrapper-nav-sub {
+        width: ($baseline*10);
+      }
    }

    .nav-account-user {
@@ -158,12 +191,40 @@

  // specific elements - pitch/how it works nav
  .nav-pitch {
+    position: relative;
+    padding: ($baseline*0.75) 0;
    text-align: right;
+
+    .nav-sub {
+      text-align: left;
+    }
  }
 }
+
+// ====================
+
 // CASE: user signed in
 .is-signedin {

+  .wrapper-header {
+
+    .branding {
+      width: flex-grid(2, 12);
+      margin-right: flex-gutter();
+    }
+
+    .nav-account {
+      width: flex-grid(9, 12);
+      right: -($baseline*6);
+    }
+  }
+}
+
+// ====================
+
+// CASE: in course {
+.is-signedin.course {
+
  .wrapper-header {

    .branding {
@@ -181,6 +242,7 @@

    .nav-account {
      width: flex-grid(3, 12);
+      right: -($baseline*1.5);
    }
  }
 }
@@ -192,20 +254,89 @@

  .wrapper-header {

-    nav > ol > .nav-item {
-      margin-right: $baseline;
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-
    .branding {
      width: flex-grid(2, 12);
    }

    .nav-pitch {
-      width: flex-grid(10, 12);
+      width: flex-grid(9, 12);
+      right: -($baseline*6);
+
+      .nav-item {
+        margin-right: ($baseline/2);
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      .action-signup {
+        @include blue-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600;
+      }
+
+      .action-signin {
+        @include white-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600;
+      }
    }
  }
 }
+
+// ====================
+
+// STATE: active/current nav states
+
+.nav-item.is-current,
+body.howitworks .nav-not-signedin-hiw,
+
+// dashboard
+body.dashboard .nav-account-dashboard,
+
+// course content
+body.course.outline .nav-course-courseware .title,
+body.course.updates .nav-course-courseware .title,
+body.course.pages .nav-course-courseware .title,
+body.course.uploads .nav-course-courseware .title,
+
+body.course.outline .nav-course-courseware-outline,
+body.course.updates .nav-course-courseware-updates,
+body.course.pages .nav-course-courseware-pages,
+body.course.uploads .nav-course-courseware-uploads,
+
+// course settings
+body.course.schedule .nav-course-settings .title,
+body.course.grading .nav-course-settings .title,
+body.course.team .nav-course-settings .title,
+body.course.advanced .nav-course-settings .title,
+
+body.course.schedule .nav-course-settings-schedule,
+body.course.grading .nav-course-settings-grading,
+body.course.team .nav-course-settings-team,
+body.course.advanced .nav-course-settings-advanced,
+
+// course tools
+body.course.import .nav-course-tools .title,
+body.course.export .nav-course-tools .title,
+body.course.checklists .nav-course-tools .title,
+
+body.course.import .nav-course-tools-import,
+body.course.export .nav-course-tools-export,
+body.course.checklists .nav-course-tools-checklists,
+
+{
+  color: $blue;
+
+  a {
+    color: $blue;
+    pointer-events: none;
+  }
+}
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -32,11 +32,147 @@ nav {
    }

    .icon-caret-down {
+      // @include transition(rotate .15s ease-in-out .25s);
      margin-left: ($baseline/10);
+
+      &:hover {
+        @include transform(rotate(180deg));
+      }
+    }
+
+    // dropped down state
+    &.is-selected {
+
+      .icon-caret-down {
+        @include transform(rotate(180deg));
+      }
+    }
+  }
+
+  .nav-item {
+    position: relative;
+
+    &:hover {
+
    }
  }

  .wrapper-nav-sub {
-    display: none !important;
+    @include transition (opacity 1.0s ease-in-out 0s);
+    position: absolute;
+    top: ($baseline*2.5);
+    opacity: 0.0;
+    pointer-events: none;
+    width: ($baseline*8);
+
+
+    // dropped down state
+    &.is-shown {
+      opacity: 1.0;
+      pointer-events: auto;
+    }
+  }
+
+  .nav-sub {
+    @include border-radius(2px);
+    @include box-sizing(border-box);
+    @include box-shadow(0 1px 1px $shadow-l1);
+    position: relative;
+    width: 100%;
+    border: 1px solid $gray-l3;
+    padding: ($baseline/2) ($baseline*0.75);
+    background: $white;
+
+    &:after, &:before {
+      bottom: 100%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    // ui triangle/nub
+    &:after {
+      border-color: rgba(255, 255, 255, 0);
+      border-bottom-color: $white;
+      border-width: 10px;
+    }
+
+    &:before {
+      border-color: rgba(178, 178, 178, 0);
+      border-bottom-color: $gray-l3;
+      border-width: 11px;
+    }
+
+    .nav-item {
+      @extend .t-action3;
+      display: block;
+      margin: 0 0 ($baseline/4) 0;
+      border-bottom: 1px solid $gray-l5;
+      padding: 0 0($baseline/4) 0;
+      font-weight: 500;
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      a {
+        display: block;
+
+        &:hover, &:active {
+          color: $blue-s1;
+        }
+      }
+    }
+  }
+
+  // CASE: left-hand side arrow/dd
+  &.ui-left {
+
+    .wrapper-nav-sub {
+      left: 0;
+    }
+
+    .nav-sub {
+      text-align: left;
+
+      // ui triangle/nub
+      &:after {
+        left: $baseline;
+        margin-left: -10px;
+      }
+
+      &:before {
+        left: $baseline;
+        margin-left: -11px;
+      }
+    }
+  }
+
+  // CASE: right-hand side arrow/dd
+  &.ui-right {
+
+    .wrapper-nav-sub {
+      left: none;
+      right: 0;
+    }
+
+    .nav-sub {
+
+      // ui triangle/nub
+      &:after {
+        right: $baseline;
+        margin-right: -10px;
+      }
+
+      &:before {
+        right: $baseline;
+        margin-right: -11px;
+      }
+    }
  }
 }
--- a/cms/templates/widgets/header.html
+++ b/cms/templates/widgets/header.html
@@ -14,11 +14,11 @@
      </a>
    </h2>

-    <nav class="nav-course">
+    <nav class="nav-course nav-dd ui-left">
      <h2 class="sr">${context_course.display_name_with_default}'s Navigation:</h2>

      <ol>
-        <li class="nav-item nav-course-courseware nav-dd">
+        <li class="nav-item nav-course-courseware">
          <h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Content</span> <i class="icon-caret-down"></i></h3>

          <div class="wrapper wrapper-nav-sub">
@@ -41,7 +41,7 @@
          </div>
        </li>

-        <li class="nav-item nav-course-settings nav-dd">
+        <li class="nav-item nav-course-settings">
          <h3 class="title"><span class="label"><span class="label-prefix sr">Course </span>Settings</span> <i class="icon-caret-down"></i></h3>

          <div class="wrapper wrapper-nav-sub">
@@ -50,7 +50,7 @@
                <li class="nav-item nav-course-settings-schedule">
                  <a href="${reverse('contentstore.views.get_course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a>
                </li>
-                <!-- <li class="nav-item nav-course-settings-grading"> -->
+                <li class="nav-item nav-course-settings-grading">
                  <a href="${reverse('contentstore.views.course_config_graders_page', kwargs={'org' : ctx_loc.org, 'course' : ctx_loc.course, 'name': ctx_loc.name})}">Grading</a>
                </li>
                <li class="nav-item nav-course-settings-team">
@@ -64,7 +64,7 @@
          </div>
        </li>

-        <li class="nav-item nav-course-tools nav-dd">
+        <li class="nav-item nav-course-tools">
          <h3 class="title"><span class="label">Tools</span> <i class="icon-caret-down"></i></h3>

          <div class="wrapper wrapper-nav-sub">
@@ -88,31 +88,31 @@
    % endif

    % if user.is_authenticated():
-    <nav class="nav-account nav-is-signedin">
+    <nav class="nav-account nav-is-signedin nav-dd ui-right">
      <h2 class="sr">Help &amp; Account Navigation</h2>

      <ol>
-        <li class="nav-item nav-account-help nav-dd">
+        <li class="nav-item nav-account-help">
          <h3 class="title"><span class="label">Help</span> <i class="icon-caret-down"></i></h3>

          <div class="wrapper wrapper-nav-sub">
            <div class="nav-sub">
              <ul>
-                <li class="nav-item nav-account-">
-                  <a href="">Help Link #1</a>
+                <li class="nav-item nav-help-documentation">
+                  <a href="http://files.edx.org/Getting_Started_with_Studio.pdf" title="This is a PDF Document">Studio Documentation</a>
                </li>
-                <li class="nav-item nav-account-">
-                  <a href="">Help Link #2</a>
+                <li class="nav-item nav-help-helpcenter">
+                  <a href="http://help.edge.edx.org/" rel="external">Studio Help Center</a>
                </li>
-                <li class="nav-item nav-account-">
-                  <a href="">Help Link #3</a>
+                <li class="nav-item nav-help-feedback">
+                  <a href="http://help.edge.edx.org/discussion/new" class="show-tender" title="Use our feedback tool, Tender, to share your feedback">Contact Us</a>
                </li>
              </ul>
            </div>
          </div>
        </li>

-        <li class="nav-item nav-account-user nav-dd">
+        <li class="nav-item nav-account-user">
          <h3 class="title"><span class="label"><span class="sr">Currently signed in as:</span><span class="label account-username">${ user.username }</span></span> <i class="icon-caret-down"></i></h3>

          <div class="wrapper wrapper-nav-sub">
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -190,27 +190,6 @@
  }
 }

-// simple nav button styling - should we move this elsewhere?
-.btn-nav-simple {
-  @extend .btn;
-  @extend .btn-pill;
-  padding:($baseline/4) ($baseline/2);
-  border-width: 1px;
-  border-style: solid;
-  border-color: transparent;
-  text-align: center;
-
-  &:hover, &:active {
-    @extend .fake-link;
-    border-color: $gray-l3;
-  }
-
-  &.current, &.active {
-    @include box-shadow(inset 0 1px 2px 1px $shadow);
-    border-color: $gray-l2;
-  }
-}
-
 // UI archetypes - well
 .ui-well {
  @include box-shadow(inset 0 1px 2px 1px $shadow);