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

Kf minor ui
2012-06-05 12:17:52 -07:00
parent aa016e289f da0e2d5f5c
commit 970f6af385
7 changed files with 69 additions and 21 deletions
--- a/static/sass/base/_extends.scss
+++ b/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;
--- a/static/sass/courseware/_courseware.scss
+++ b/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;
+         }
+        }
      }
    }

--- a/static/sass/courseware/_sequence-nav.scss
+++ b/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;
--- a/static/sass/courseware/_sidebar.scss
+++ b/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 {
--- a/static/sass/layout/_layout.scss
+++ b/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;
      }
    }

--- a/static/sass/wiki/_wiki.scss
+++ b/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;
--- a/templates/simplewiki_instructions.html
+++ b/templates/simplewiki_instructions.html
@@ -1,12 +1,12 @@
 <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>