UX changes for course navigation manipulation

cms/static/sass/views/_static-pages.scss

@@ -10,12 +10,106 @@
     padding: 12px 0;
   }
 
-  .nav-introduction-supplementary {
+  .content-primary {
+    width: flex-grid(9, 12);
+    margin-right: flex-gutter();
+
+    .no-pages-content {
+      @extend %ui-well;
+      padding: ($baseline*2);
+      background-color: $gray-l4;
+      text-align: center;
+      color: $gray;
 
-    .icon-question-sign {
-      display: inline-block;
-      vertical-align: baseline;
-      margin-right: ($baseline/4);
+      .new-button {
+        @include font-size(14);
+        margin-left: $baseline;
+
+        [class^="icon-"] {
+          margin-right: ($baseline/2);
+        }
+      }
+    }
+
+    .actions-list-wrap {
+      top: 6px;
+
+      .actions-list {
+
+        .action-item {
+          position: relative;
+          display: inline-block;
+          margin: 0;
+          text-align: center;
+
+          .action-button,
+          .toggle-actions-view {
+            @include transition(all $tmg-f2 ease-in-out 0s);
+            display: inline-block;
+            border: 0;
+            background: none;
+            color: $gray-l3;
+
+            &:hover {
+              background-color: $blue;
+              color: $gray-l6;
+            }
+          }
+
+          &.action-visible {
+            position: relative;
+          }
+
+          &.action-visible label {
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 30px;
+            width: 30px;
+
+            &:hover {
+              background-color: $blue;
+            }
+          }
+
+          &.action-visible .toggle-checkbox {
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 30px;
+            width: 30px;
+            opacity: 0;
+          }
+
+          &.action-visible .toggle-checkbox:hover ~ .action-button {
+            background-color: $blue;
+            color: $gray-l6;
+          }
+
+          &.action-visible .toggle-checkbox ~ .action-button {
+            .icon-eye-open {
+              display: inline-block;
+            }
+
+            .icon-eye-close {
+              display: none;
+            }
+          }
+
+          &.action-visible .toggle-checkbox:checked ~ .action-button {
+            background-color: $gray;
+            color: $white;
+
+            .icon-eye-open {
+              display: none;
+            }
+
+            .icon-eye-close {
+              display: inline-block;
+            }
+          }
+        }
+      }
     }
 
   }
@@ -78,7 +172,8 @@
     }
   }
 
-  .component {
+  .component,
+  .course-nav-tab {
     position: relative;
     border: 1px solid $mediumGrey;
     border-top: none;
@@ -130,7 +225,8 @@
       display: none;
     }
 
-    .component-actions {
+    .component-actions,
+    .course-nav-tab-actions {
       display: inline-block;
       float: right;
       margin-right: $baseline*2;
@@ -179,6 +275,30 @@
     }
   }
 
+  // basic course nav items
+  .course-nav-tab {
+    padding: ($baseline*.75) $baseline;
+
+    &.locked {
+      background-color: $gray-l6;
+    }
+
+    .course-nav-tab-header {
+      display: inline-block;
+      max-width: 80%;
+
+      .title {
+        @extend %t-title4;
+        font-weight: 300;
+      }
+    }
+
+    .course-nav-tab-actions {
+      padding: ($baseline/10);
+      margin-right: ($baseline*1.5);
+    }
+  }
+
   .component.editing {
     border-left: 1px solid $mediumGrey;
     border-right: 1px solid $mediumGrey;

cms/templates/edit-tabs.html

-<%inherit file="base.html" />
 <%namespace name='static' file='static_content.html'/>
 <%!
   from django.utils.translation import ugettext as _
   from django.core.urlresolvers import reverse
 %>
-<%block name="title">Static Pages</%block>
+<%inherit file="base.html" />
+<%block name="title">Pages</%block>
 <%block name="bodyclass">is-signedin course view-static-pages</%block>
 
 <%block name="jsextra">
@@ -18,7 +18,7 @@
                 });
 
                 new TabsEditView({
-                    el: $('.main-wrapper'),
+                    el: $('.tab-list'),
                     model: model,
                     mast: $('.wrapper-mast')
                 });
@@ -31,7 +31,7 @@
   <header class="mast has-actions has-subtitle">
     <h1 class="page-header">
       <small class="subtitle">${_("Content")}</small>
-      <span class="sr">&gt; </span>${_("Static Pages")}
+      <span class="sr">&gt; </span>${_("Pages")}
     </h1>
 
     <nav class="nav-actions">
@@ -47,37 +47,56 @@
 
 <div class="wrapper-content wrapper">
   <section class="content">
-    <div class="introduction has-links">
-      <p class="copy">${_("Use Static Pages to share a syllabus, a calendar, handouts, or other supplements to your courseware.")}</p>
-      <p class="copy">${_("NOTE: all content on Static Pages will be visible to anyone who knows the URL, regardless of whether they are registered in the course or not.")}</p>
-      <nav class="nav-introduction-supplementary">
-        <ul>
-          <li class="nav-item">
-          <a rel="modal" href="#preview-lms-staticpages"><i class="icon-question-sign"></i>${_("What do static pages look like in my course?")}</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </section>
-</div>
+    <article class="content-primary" role="main">
+
+      <div class="inner-wrapper">
+        <article class="unit-body">
+
+          <div class="tab-list">
+            <ol class="course-nav-tab-list">
 
-<div class="main-wrapper">
-  <div class="inner-wrapper">
-    <article class="unit-body">
+            <!-- for testing -->
+            <li class="course-nav-tab locked">
+              <div class="course-nav-tab-header">
+                <h3 class="title">Wiki</h3>
+              </div>
+              <div class="course-nav-tab-actions actions-list-wrap">
+                <ul class="actions-list">
+                  <li class="action-item action-visible">
+                      <label for="[id]"><span class="sr">${_("Show this page")}</span></label>
+                      <input type="checkbox" id="[id]" class="toggle-checkbox" data-tooltip="${_('Show/hide page')}" />
+                      <div class="action-button"><i class="icon-eye-open"></i><i class="icon-eye-close"></i></div>
+                  </li>
+                </ul>
+              </div>
+            </li>
+            <!-- end for testing -->
 
-      <div class="tab-list">
-        <ol class='components'>
-          % for locator in components:
-          <li class="component" data-locator="${locator}"/>
-          % endfor
+              % for locator in components:
+              <li class="component" data-locator="${locator}"/>
+              % endfor
 
-          <li class="new-component-item">
+              <li class="new-component-item">
 
-          </li>
-        </ol>
+              </li>
+            </ol>
+          </div>
+        </article>
       </div>
     </article>
-  </div>
+
+    <aside class="content-supplementary" role="complimentary">
+      <div class="bit">
+        <h3 class="title-3">${_("What are Pages?")}</h3>
+        <p>${_("Pages are the items that appear in your course navigation. Some are required (Courseware, Course info, Discussion, Progress), some are optional (Wiki), and you can create your own static pages to hold additional content you want to provide to your students, like a syllabus, calendar, or handouts.")}</p>
+      </div>
+      <div class="bit">
+        <h3 class="title-3">${_("How do Pages look to students in my course?")}</h3>
+        <p>${_("Pages are the navigational items that appear across the top of your course.")} <br /> <a rel="modal" href="#preview-lms-staticpages">${_("See an example")}</a></p>
+      </div>
+    </aside>
+
+  </section>
 </div>
 
 <div class="content-modal" id="preview-lms-staticpages">