Merge pull request #70 from MITx/kf-minor-ui

Kf minor ui

static/sass/base/_extends.scss

@@ -16,6 +16,11 @@
   div.table-wrapper {
     display: table;
     width: flex-grid(12);
+    overflow: hidden;
+
+    @media screen and (min-width: 1400px) {
+      @include border-radius(4px);
+    }
   }
 }
 
@@ -83,6 +88,7 @@ h1.top-header {
   padding: lh();
   vertical-align: top;
   width: flex-grid(9) + flex-gutter();
+  overflow: hidden;
 
   @media print {
     @include box-shadow(none);
@@ -196,7 +202,8 @@ h1.top-header {
   @extend .clearfix;
   background: $cream;
   border-bottom: 1px solid darken($cream, 10%);
-  @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
+  border-top: 1px solid #fff;
+  // @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
   font-size: 12px;
   height:46px;
   line-height: 46px;

static/sass/courseware/_courseware.scss

@@ -17,9 +17,7 @@ div.course-wrapper {
 
   section.course-content {
     @extend .content;
-    overflow: hidden;
-    @include border-top-right-radius(4px);
-    @include border-bottom-right-radius(4px);
+    @include border-radius(0 4px 4px 0);
 
     h1 {
       margin: 0 0 lh();
@@ -129,11 +127,20 @@ div.course-wrapper {
         > span {
           display: block;
           margin-bottom: lh(.5);
+
+          &[answer] {
+            border-top: 1px solid #ededed;
+            border-bottom: 1px solid #ededed;
+            background: #f3f3f3;
+            margin: 0 (-(lh()));
+            padding: lh(.5) lh();
+          }
         }
       }
 
       input[type="text"] {
         display: inline-block;
+        width: 50%;
       }
 
       center {
@@ -145,6 +152,11 @@ div.course-wrapper {
 
       section.action {
         margin-top: lh();
+
+        input[type="button"] {
+          padding: lh(.4) lh();
+          text-shadow: 0 -1px 0 #666;
+        }
       }
     }
 
@@ -181,6 +193,7 @@ div.course-wrapper {
 
         header {
           @extend h1.top-header;
+          @include border-radius(0 4px 0 0);
           margin-bottom: -16px;
 
           h1 {
@@ -193,6 +206,7 @@ div.course-wrapper {
             margin-top: 8px;
             text-align: right;
             padding-right: 0;
+            border-right: 0;
           }
         }
 
@@ -302,9 +316,11 @@ div.course-wrapper {
   &.closed {
     section.course-index {
       width: flex-grid(.6);
+      overflow: hidden;
 
       header#open_close_accordion {
         padding: 0;
+        min-height: 47px;
 
         a {
           background-image: url('../images/slide-right-icon.png');
@@ -313,7 +329,6 @@ div.course-wrapper {
         h2 {
           visibility: hidden;
           width: 10px;
-          padding: 0;
         }
       }
 
@@ -321,6 +336,16 @@ div.course-wrapper {
         visibility: hidden;
         width: 10px;
         padding: 0;
+
+       nav {
+         white-space: pre;
+         overflow: hidden;
+
+         ul {
+           overflow: hidden;
+           white-space: nowrap;
+         }
+        }
       }
     }
 

static/sass/courseware/_sequence-nav.scss

@@ -171,7 +171,7 @@ nav.sequence-nav {
   }
 
   ul {
-    list-style: none !important;
+    list-style: none;
     height: 100%;
     position: absolute;
     right: 0;
@@ -194,12 +194,10 @@ nav.sequence-nav {
           cursor: pointer;
           display: block;
           text-indent: -9999px;
+          @include transition(all, .2s, $ease-in-out-quad);
 
           &:hover {
-            background-color: none;
-            color: darken($cream, 60%);
-            text-decoration: none;
-            text-decoration: none;
+            opacity: .5;
           }
 
           &.disabled {
@@ -214,7 +212,7 @@ nav.sequence-nav {
           background-image: url('../images/sequence-nav/previous-icon.png');
 
           &:hover {
-            background-color: none;
+            background-color: $cream;
           }
         }
       }
@@ -222,10 +220,9 @@ nav.sequence-nav {
       &.next {
         a {
           background-image: url('../images/sequence-nav/next-icon.png');
-          @include border-top-right-radius(4px);
 
           &:hover {
-            background-color: none;
+            background-color: $cream;
           }
         }
       }
@@ -241,6 +238,13 @@ nav.sequence-nav {
 section.course-content {
   position: relative;
 
+  ol.vert-mod {
+    nav.sequence-nav {
+      margin-top: -15px;
+      @include border-radius(0);
+    }
+  }
+
   nav.sequence-bottom {
     margin: lh(2) 0 0;
     text-align: center;
@@ -267,11 +271,11 @@ section.course-content {
             display: block;
             padding: lh(.5) 4px;
             text-indent: -9999px;
-            @include transition(all, .4s, $ease-in-out-quad);
+            @include transition(all, .2s, $ease-in-out-quad);
             width: 45px;
 
             &:hover {
-              background-color: darken($cream, 10%);
+              background-color: $cream;
               color: darken($cream, 60%);
               opacity: .5;
               text-decoration: none;

static/sass/courseware/_sidebar.scss

@@ -2,6 +2,14 @@ section.course-index {
   @extend .sidebar;
   @extend .tran;
 
+  header {
+    max-height: 47px;
+
+    h2 {
+      white-space: nowrap;
+    }
+  }
+
   div#accordion {
 
     h3 {

static/sass/layout/_layout.scss

@@ -17,7 +17,6 @@ html {
       @include box-shadow(0 0 4px #dfdfdf);
       @include box-sizing(border-box);
       margin-top: 3px;
-      overflow: hidden;
 
       @media print {
         border-bottom: 0;
@@ -27,6 +26,7 @@ html {
       @media screen and (min-width: 1400px) {
         @include border-radius(4px);
         margin-top: lh(.5);
+        overflow: hidden;
       }
     }
 

static/sass/wiki/_wiki.scss

@@ -5,12 +5,14 @@ div.wiki-wrapper {
   section.wiki-body {
     @extend .clearfix;
     @extend .content;
+    @include border-radius(0 4px 4px 0);
     position: relative;
 
     header {
       @extend .topbar;
-      @include box-shadow(inset 0 1px 0 white);
+      @include border-radius(0 4px 0 0);
       height:46px;
+      overflow: hidden;
 
       &:empty {
         border-bottom: 0;

templates/simplewiki_instructions.html

 <div id="wiki_edit_instructions">
-  This wiki uses <strong>Markdown</strong> for styling. There are several <a href="http://daringfireball.net/projects/markdown/basics">useful</a> <a href="http://greg.vario.us/doc/markdown.txt">guides</a> <a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide">online</a>.
-  <br>
-  <br>MITx Additions:
+  This wiki uses <strong>Markdown</strong> for styling. 
+  <h2> MITx Additions: </h2>
   <p class="markdown-example">circuit-schematic:</p>
   <p class="markdown-example"><span>$</span>LaTeX Math Expression<span>$</span></p>
   To create a new wiki article, create a link to it. Clicking the link gives you the creation page.  
   <p class="markdown-example">[Article Name](wiki:ArticleName)</p>
-  Other useful examples:<br>
+
+  <h2>Useful examples: </h2>
   <p class="markdown-example">[Link](http://google.com)</p>
   <p class="markdown-example">Huge Header
   <br>====</p>
@@ -19,4 +19,6 @@
   <br>&nbsp&nbsp- Sub Item 2</p>
   <p class="markdown-example">1. Ordered
   <br>2. List</p>
+
+  <p>Need more help? There are several <a href="http://daringfireball.net/projects/markdown/basics">useful</a> <a href="http://greg.vario.us/doc/markdown.txt">guides</a> <a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide">online</a>.</p>
 </div>