Merge pull request #349 from MITx/feature/kfiedler/courseware-style

A bunch of various fixes and de-styling

common/lib/xmodule/xmodule/css/video/display.scss

@@ -207,7 +207,7 @@ div.video {
             h3 {
               color: #999;
               float: left;
-              font-size: 12px;
+              font-size: em(14);
               font-weight: normal;
               letter-spacing: 1px;
               padding: 0 lh(.25) 0 lh(.5);
@@ -221,6 +221,7 @@ div.video {
               margin-bottom: 0;
               padding: 0 lh(.5) 0 0;
               line-height: 46px;
+              color: #fff;
             }
 
             &:hover, &:active, &:focus {

lms/static/sass/course/_info.scss

@@ -20,7 +20,7 @@ div.info-wrapper {
 
       > li {
         @extend .clearfix;
-        border-bottom: 1px solid #e3e3e3;
+        border-bottom: 1px solid lighten($border-color, 10%);
         margin-bottom: lh();
         padding-bottom: lh(.5);
         list-style-type: disk;
@@ -76,42 +76,29 @@ div.info-wrapper {
     h1 {
       @extend .bottom-border;
       padding: lh(.5) lh(.5);
-    }
-
-    header {
-
-      // h1 {
-      //   font-weight: 100;
-      //   font-style: italic;
-      // }
-
-      p {
-         color: #666;
-         font-size: 12px;
-         margin-bottom: 0;
-         margin-top: 4px;
-      }
+      margin-bottom: 0;
     }
 
     ol {
       background: none;
       list-style: none;
       padding-left: 0;
+      margin: 0;
 
       li {
         @extend .clearfix;
         background: none;
-        border-bottom: 1px solid #d3d3d3;
-        @include box-shadow(0 1px 0 #eee);
+        border-bottom: 1px solid $border-color;
         @include box-sizing(border-box);
         padding: em(7) lh(.75);
         position: relative;
+        font-size: 1em;
 
         &.expandable,
         &.collapsable {
           h4 {
-            font-style: $body-font-size;
             font-weight: normal;
+            font-size: 1em;
             padding-left: 18px;
           }
         }
@@ -122,16 +109,12 @@ div.info-wrapper {
 
           li {
             border-bottom: 0;
-            border-top: 1px solid #d3d3d3;
+            border-top: 1px solid $border-color;
             @include box-shadow(inset 0 1px 0 #eee);
-            padding-left: lh(1.5);
+            font-size: 1em;
           }
         }
 
-        &:hover {
-          background-color: #e9e9e9;
-        }
-
         div.hitarea {
           background-image: url('../images/treeview-default.gif');
           display: block;
@@ -159,14 +142,12 @@ div.info-wrapper {
         h3 {
           border-bottom: 0;
           @include box-shadow(none);
-          color: #999;
-          font-size: $body-font-size;
-          font-weight: bold;
-          text-transform: uppercase;
+          color: #aaa;
+          font-size: 1em;
+          margin-bottom: em(6);
         }
 
         p {
-          font-size: $body-font-size;
           letter-spacing: 0;
           margin: 0;
           text-transform: none;
@@ -191,14 +172,8 @@ div.info-wrapper {
         }
 
         a {
-          color: lighten($text-color, 10%);
           @include inline-block();
-          text-decoration: none;
-          @include transition();
-
-          &:hover {
-            color: $mit-red;
-          }
+          line-height: lh();
         }
       }
     }

lms/static/sass/course/_profile.scss

@@ -10,38 +10,26 @@ div.profile-wrapper {
 
     header {
       @extend .bottom-border;
-      margin: 0 ;
-      padding: lh(.5) lh();
+      margin: 0;
+      padding: lh(.5);
 
       h1 {
-        font-size: 18px;
         margin: 0;
         padding-right: 30px;
       }
-
-      a {
-        color: #999;
-        font-size: 12px;
-        position: absolute;
-        right: lh(.5);
-        text-transform: uppercase;
-        top: 13px;
-
-        &:hover {
-          color: #555;
-        }
-      }
     }
 
     ul {
       list-style: none;
+      padding: 0;
+      margin: 0;
 
       li {
         border-bottom: 1px solid #d3d3d3;
         @include box-shadow(0 1px 0 #eee);
         color: lighten($text-color, 10%);
         display: block;
-        padding: 7px lh();
+        padding: lh(.5) 0 lh(.5) lh(.5);
         position: relative;
         text-decoration: none;
         @include transition();
@@ -144,11 +132,14 @@ div.profile-wrapper {
     @extend .content;
 
     header {
-      @extend h1.top-header;
       @extend .clearfix;
+      @extend h1.top-header;
+      margin-bottom: lh();
 
       h1 {
         float: left;
+        font-size: 1em;
+        font-weight: 100;
         margin: 0;
       }
     }
@@ -162,6 +153,7 @@ div.profile-wrapper {
       border-top: 1px solid #e3e3e3;
       list-style: none;
       margin-top: lh();
+      padding-left: 0;
 
       > li {
         @extend .clearfix;
@@ -178,9 +170,11 @@ div.profile-wrapper {
           border-right: 1px dashed #ddd;
           @include box-sizing(border-box);
           display: table-cell;
+          letter-spacing: 0;
           margin: 0;
           padding: 0;
           padding-right: flex-gutter(9);
+          text-transform: none;
           width: flex-grid(2, 9);
         }
 
@@ -203,14 +197,39 @@ div.profile-wrapper {
 
             h3 {
               color: #666;
+
+              span {
+                color: #999;
+                font-size: em(14);
+                font-weight: 100;
+              }
+            }
+
+            p {
+              color: #999;
+              font-size: em(14);
             }
 
-            ol {
-              list-style: none;
+            section.scores {
+              margin: lh(.5) 0;
+
+              h3 {
+                font-size: em(14);
+                @include inline-block;
+              }
 
-              li {
-                display: inline-block;
-                padding-right: 1em;
+              ol {
+                list-style: none;
+                margin: 0;
+                padding: 0;
+                @include inline-block;
+
+                li {
+                  @include inline-block;
+                  font-size: em(14);
+                  font-weight: normal;
+                  padding-right: 1em;
+                }
               }
             }
           }

lms/static/sass/course/_textbook.scss

@@ -7,7 +7,7 @@ div.book-wrapper {
     @include box-sizing(border-box);
 
     ul#booknav {
-      font-size: 12px;
+      font-size: $body-font-size;
 
       a {
         color: #000;
@@ -39,8 +39,7 @@ div.book-wrapper {
       }
 
       > li {
-        border-bottom: 1px solid #d3d3d3;
-        @include box-shadow(0 1px 0 #eee);
+        border-bottom: 1px solid $border-color;
         padding: 7px 7px 7px 30px;
       }
     }
@@ -48,9 +47,11 @@ div.book-wrapper {
 
   section.book {
     @extend .content;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-top: 0;
 
     nav {
-      @extend .topbar;
       @extend .clearfix;
 
       a {
@@ -62,32 +63,57 @@ div.book-wrapper {
         @extend .clearfix;
 
         li {
+          position: absolute;
+          height: 100%;
+          width: flex-grid(2, 8);
+
+          a {
+            display: table;
+            @include box-sizing(border-box);
+            height: 100%;
+            width: 100%;
+            vertical-align: middle;
+            @include transition;
+            background-color: rgba(#000, .7);
+            background-repeat: no-repeat;
+            background-position: center;
+            opacity: 0;
+            filter: alpha(opacity=0);
+            text-indent: -9999px;
+
+            &:hover {
+              opacity: 1;
+              filter: alpha(opacity=100);
+
+              &.last {
+              }
+
+              &.next {
+              }
+            }
+          }
 
           &.last {
-            display: block;
-            float: left;
+            left: 0;
 
             a {
-              border-left: 0;
-              border-right: 1px solid darken(#f6efd4, 20%);
-              @include box-shadow(inset -1px 0 0 lighten(#f6efd4, 5%));
+              background-image: url('../images/textbook/textbook-left.png');
             }
           }
 
           &.next {
-            display: block;
-            float: right;
-          }
+            right: 0;
 
-          &:hover {
-            background: none;
+            a {
+              background-image: url('../images/textbook/textbook-right.png');
+            }
           }
+
         }
       }
 
       &.bottom-nav {
         border-bottom: 0;
-        border-top: 1px solid #EDDFAA;
         margin-bottom: -(lh());
         margin-top: lh();
       }
@@ -95,9 +121,10 @@ div.book-wrapper {
 
     section.page {
       text-align: center;
+      position: relative;
+      border: 1px solid $border-color;
 
       img {
-        border: 1px solid $border-color;
         max-width: 100%;
       }
     }

lms/static/sass/course/base/_base.scss

-body {
-  font-family: $sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6 {
+body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a {
   font-family: $sans-serif;
 }
 
@@ -19,3 +15,9 @@ table {
     table-layout: fixed;
   }
 }
+
+form {
+  label {
+    display: block;
+  }
+}

lms/static/sass/course/base/_extends.scss

 h1.top-header {
   border-bottom: 1px solid #e3e3e3;
   text-align: left;
-  font-size: 24px;
+  font-size: em(24);
   font-weight: 100;
   padding-bottom: lh();
 }
@@ -51,7 +51,6 @@ h1.top-header {
 
 .sidebar {
   border-right: 1px solid #C8C8C8;
-  @include box-shadow(inset -1px 0 0 #e6e6e6);
   @include box-sizing(border-box);
   display: table-cell;
   font-family: $sans-serif;
@@ -75,7 +74,7 @@ h1.top-header {
   }
 
   .bottom-border {
-    border-bottom: 1px solid #d3d3d3;
+    border-bottom: 1px solid $border-color;
   }
 
   @media print {

lms/static/sass/course/wiki/_sidebar.scss

@@ -4,78 +4,70 @@ div#wiki_panel {
 
   h2 {
     @extend .bottom-border;
-    font-size: 18px;
     margin: 0 ;
-    padding: lh(.5) lh();
-  }
-
-  input[type="button"] {
-    background: transparent;
-    border: none;
-    @include box-shadow(none);
-    color: #666;
-    font-size: 14px;
-    font-weight: bold;
-    margin: 0px;
-    padding: 7px lh();
-    text-align: left;
-    @include transition();
-    width: 100%;
+    padding: lh(.5) lh() lh(.5) 0;
+    color: #000;
   }
 
   ul {
-    li {
-      @include box-shadow(inset 0 1px 0 0 #eee);
-      border-top: 1px solid #d3d3d3;
-
-      &:hover {
-        background: #efefef;
-        @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
-      }
+    padding-left: 0;
+    margin: 0;
 
-      &:first-child {
-        border: none;
-      }
+    li {
+      @extend .bottom-border;
 
       &.search {
-        padding: 10px lh();
+        padding: 10px lh() 10px 0;
 
         label {
           display: none;
         }
       }
 
-      &.create-article {
-        h3 {
-        }
-      }
-
       a {
         color: #666;
         font-size: 14px;
-        padding: 7px lh();
+        padding: 7px lh() 7px 0;
+
+        &:hover {
+          background: #efefef;
+        }
+
+      }
+    }
+
+    form {
+      input[type="submit"]{
+        @extend .light-button;
+        text-transform: none;
+        text-shadow: none;
       }
     }
   }
 
   div#wiki_create_form {
     @extend .clearfix;
-    background: #dadada;
-    border-bottom: 1px solid #d3d3d3;
-    padding: 15px;
+    padding: lh(.5) lh() lh(.5) 0;
+
+    label {
+      font-family: $sans-serif;
+      margin-bottom: lh(.5);
+    }
 
     input[type="text"] {
       @include box-sizing(border-box);
       display: block;
-      margin-bottom: 6px;
       width: 100%;
+      margin-bottom: lh(.5);
     }
 
     ul {
       list-style: none;
+      margin: 0;
 
       li {
         float: left;
+        border-bottom: 0;
 
         &#cancel {
           float: right;

lms/static/sass/marketing-ie.css

-body {
-  margin: 0;
-  padding: 0; }
-
-.wrapper, .subpage, section.copyright, section.tos, section.privacy-policy, section.honor-code, header.announcement div, section.index-content, footer {
-  margin: 0;
-  overflow: hidden; }
-
-div#enroll form {
-  display: none; }

lms/static/sass/shared/_modal.scss

@@ -299,3 +299,7 @@
     }
   }
 }
+
+.leanModal_box {
+  @extend .modal;
+}

lms/templates/main.html

@@ -25,9 +25,9 @@
   <%include file="navigation.html" />
   <section class="content-wrapper">
     ${self.body()}
+    <%block name="bodyextra"/>
   </section>
 
-  <%block name="bodyextra"/>
   <%include file="footer.html" />
 
   <%static:js group='application'/>

lms/templates/simplewiki/simplewiki_base.html

@@ -71,9 +71,9 @@
 
   });
   </script>
-  
+
   <%block name="wiki_head"/>
-  
+
 </%block>
 
 <%block name="bodyextra">
@@ -86,7 +86,7 @@
   <div class="wiki-wrapper">
     <%block name="wiki_panel">
     <div aria-label="Wiki Navigation" id="wiki_panel">
-    <h2>Course Wiki</h2>
+      <h2>Course Wiki</h2>
       <ul class="action">
         <li>
           <h3>
@@ -101,12 +101,12 @@
 
           <div id="wiki_create_form">
             <%
-              baseURL = wiki_reverse("wiki_create", course=course, kwargs={"article_path" : namespace + "/" })
+            baseURL = wiki_reverse("wiki_create", course=course, kwargs={"article_path" : namespace + "/" })
             %>
             <form method="GET" onsubmit="this.action='${baseURL}' + this.wiki_article_name.value.replace(/([^a-zA-Z0-9\-])/g, '');">
               <div>
                 <label for="id_wiki_article_name">Title of article</label>
-                <input type="text" name="wiki_article_name" id="id_wiki_article_name" /><br/>
+                <input type="text" name="wiki_article_name" id="id_wiki_article_name" />
               </div>
               <ul>
                 <li>
@@ -130,31 +130,31 @@
     </%block>
 
     <section class="wiki-body">
-        %if wiki_article is not UNDEFINED:
-        <header>
-          %if wiki_article.locked:
-          <p><strong>This article has been locked</strong></p>
-          %endif
-          <p>Last modified: ${wiki_article.modified_on.strftime("%b %d, %Y, %I:%M %p")}</p>
-          %endif
-
-          %if wiki_article is not UNDEFINED:
-          <ul>
-
-            <li>
-              <a href="${ wiki_reverse('wiki_view', wiki_article, course)}" class="view">View</a>
-            </li>
-
-            <li>
-              <a href="${ wiki_reverse('wiki_edit', wiki_article, course)}" class="edit">Edit</a>
-            </li>
-
-            <li>
-              <a href="${ wiki_reverse('wiki_history', wiki_article, course)}" class="history">History</a>
-            </li>
-          </ul>
-        </header>
+      %if wiki_article is not UNDEFINED:
+      <header>
+        %if wiki_article.locked:
+        <p><strong>This article has been locked</strong></p>
         %endif
+        <p>Last modified: ${wiki_article.modified_on.strftime("%b %d, %Y, %I:%M %p")}</p>
+        %endif
+
+        %if wiki_article is not UNDEFINED:
+        <ul>
+
+          <li>
+            <a href="${ wiki_reverse('wiki_view', wiki_article, course)}" class="view">View</a>
+          </li>
+
+          <li>
+            <a href="${ wiki_reverse('wiki_edit', wiki_article, course)}" class="edit">Edit</a>
+          </li>
+
+          <li>
+            <a href="${ wiki_reverse('wiki_history', wiki_article, course)}" class="history">History</a>
+          </li>
+        </ul>
+      </header>
+      %endif
 
       <%block name="wiki_page_title"/>
       <%block name="wiki_body"/>

lms/templates/simplewiki/simplewiki_edit.html

@@ -65,12 +65,10 @@ ${"Edit " + wiki_title + " - " if wiki_title is not UNDEFINED else ""}MITx 6.002
   </div>
   ${wiki_form}
   %if create_article:
-  <input type="submit" id="submit_edit" value="Create article" /></td>
+  <input type="submit" id="submit_edit" value="Create article" />
   %else:
   <input type="submit" id="submit_edit" name="edit" value="Save Changes" />
   <input type="submit" id="submit_delete" name="delete" value="Delete article" />
-  %endif
-</form>
 
 <%include file="simplewiki_instructions.html"/>
 

lms/templates/simplewiki/simplewiki_searchresults.html

@@ -26,7 +26,7 @@ Displaying all articles
 <li><h3><a href="${wiki_reverse("wiki_view", article, course)}">${article.title} ${'(Deleted)' if article_deleted else ''}</a></h3></li>
 %endfor
 
-%if not wiki_search_results: 
+%if not wiki_search_results:
 No articles matching <b>${wiki_search_query if wiki_search_query is not UNDEFINED else ""} </b>!
 %endif
 </ul>

lms/templates/staticbook.html

@@ -89,17 +89,6 @@ $("#open_close_accordion a").click(function(){
         </nav>
 
         <img id="bookpage" src="${ settings.BOOK_URL }p${ "%03i"%(page) }.png">
-
-        <nav class="bottom-nav">
-          <ul>
-            <li class="last">
-              <a href="javascript:prev_page()">Previous page</a>
-            </li>
-            <li class="next">
-              <a href="javascript:next_page()">Next page</a>
-            </li>
-          </ul>
-        </nav>
       </section>
     </section>
   </div>