From 9d14033f6b6f5cc8951e0fd772b378ee10d73e98 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 31 Jul 2012 15:52:27 -0400
Subject: [PATCH 1/2] Added some styles for the top navigation and for the
 sidebar navigation

---
 lms/envs/common.py                            |  2 +-
 lms/static/sass/course/base/_base.scss        |  8 +++++++
 lms/static/sass/course/base/_extends.scss     |  4 ++--
 .../sass/course/courseware/_courseware.scss   | 16 -------------
 .../sass/course/courseware/_sidebar.scss      | 24 +++++++++++--------
 .../course/layout/_courseware_subnav.scss     | 15 ++++++------
 lms/templates/courseware.html                 |  1 -
 7 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/lms/envs/common.py b/lms/envs/common.py
index 95daa913e8..d89e6760a7 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -304,7 +304,7 @@ PIPELINE_CSS = {
         'output_filename': 'css/lms-application.css',
     },
     'course': {
-      'source_filenames': ['sass/course.scss', 'js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css', 'css/vendor/jquery.qtip.min.css'],
+      'source_filenames': ['js/vendor/CodeMirror/codemirror.css', 'css/vendor/jquery.treeview.css', 'css/vendor/ui-lightness/jquery-ui-1.8.22.custom.css', 'css/vendor/jquery.qtip.min.css', 'sass/course.scss'],
       'output_filename': 'css/lms-course.css',
       },
     'ie-fixes': {
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index 02aba1866e..8849c78cfc 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -5,3 +5,11 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-family: $sans-serif;
 }
+
+table {
+  table-layout: fixed;
+}
+
+.container {
+  padding: lh(2);
+}
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index b71b8161f6..e1fc953126 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -84,7 +84,8 @@ h1.top-header {
 }
 
 .sidebar {
-  border-right: 1px solid #d3d3d3;
+  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;
@@ -181,7 +182,6 @@ h1.top-header {
 
 .topbar {
   @extend .clearfix;
-  background: $cream;
   border-bottom: 1px solid darken($cream, 10%);
   border-top: 1px solid #fff;
   font-size: 12px;
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index 7fc3fb0fa1..77f53e0241 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -3,22 +3,6 @@ html {
   max-height: 100%;
 }
 
-body.courseware {
-  height: 100%;
-  max-height: 100%;
-
-  .container {
-    padding-bottom: 40px;
-    margin-top: 20px;
-  }
-
-  footer {
-    &.fixed-bottom {
-      Position: static;
-    }
-  }
-}
-
 div.course-wrapper {
   @extend .table-wrapper;
 
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index fc0291f48a..860d588a84 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -13,44 +13,50 @@ section.course-index {
   div#accordion {
 
     h3 {
-      @include box-shadow(inset 0 1px 0 0 #eee);
-      border-top: 1px solid #d3d3d3;
-      overflow: hidden;
+      @include border-radius(0);
+      border-top: 1px solid #e3e3e3;
       margin: 0;
+      overflow: hidden;
 
       &:first-child {
         border: none;
       }
 
       &:hover {
-        @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
+        background: #eee;
       }
 
       &.ui-accordion-header {
         color: #000;
 
         a {
-          font-size: $body-font-size;
+          @include border-radius(0);
+          @include box-shadow(none);
           color: lighten($text-color, 10%);
+          font-size: $body-font-size;
         }
 
         &.ui-state-active {
-          @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
           @extend .active;
-          border-bottom: 1px solid #d3d3d3;
+          border-bottom: none;
+
+          &:hover {
+            background: none;
+          }
         }
       }
     }
 
     ul.ui-accordion-content {
       @include border-radius(0);
-      @include box-shadow(inset -1px 0 0 #e6e6e6);
+      background: #FFF;
       border: none;
       font-size: 12px;
       margin: 0;
       padding: 1em 1.5em;
 
       li {
+        @include border-radius(0);
         margin-bottom: lh(.5);
 
         a {
@@ -120,8 +126,6 @@ section.course-index {
           font-weight: bold;
 
           > a {
-            background: rgb(240,240,240);
-            @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(230,230,230)));
             border-color: rgb(200,200,200);
 
             &:after {
diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss
index 7d2433138e..21f6187a83 100644
--- a/lms/static/sass/course/layout/_courseware_subnav.scss
+++ b/lms/static/sass/course/layout/_courseware_subnav.scss
@@ -1,9 +1,8 @@
 nav.course-material {
-  background: rgb(210,210,210);
   @include clearfix;
   @include box-sizing(border-box);
-  @include box-shadow(inset 0 1px 5px 0 rgba(0,0,0, 0.05));
-  border-bottom: 1px solid rgb(190,190,190);
+  background: #f6f6f6;
+  border-bottom: 1px solid rgb(200,200,200);
   margin: 0px auto 0px;
   padding: 0px;
   width: 100%;
@@ -24,12 +23,14 @@ nav.course-material {
       list-style: none;
 
       a {
-        color: $lighter-base-font-color;
+        color: darken($lighter-base-font-color, 20%);
         display: block;
         text-align: center;
-        padding: 5px 13px;
+        padding: 8px 13px 12px;
+        font-size: 14px;
+        font-weight: 400;
         text-decoration: none;
-        text-shadow: 0 1px rgba(255,255,255, 0.4);
+        text-shadow: 0 1px rgb(255,255,255);
 
         &:hover {
           color: $base-font-color;
@@ -41,7 +42,7 @@ nav.course-material {
           border-bottom: 0px;
           @include border-top-radius(4px);
           @include box-shadow(0 2px 0 0 rgba(255,255,255, 1));
-          color: $base-font-color;
+          color: $blue;
         }
       }
     }
diff --git a/lms/templates/courseware.html b/lms/templates/courseware.html
index 3d163c1f78..9c145ba8c0 100644
--- a/lms/templates/courseware.html
+++ b/lms/templates/courseware.html
@@ -35,7 +35,6 @@
   <div class="course-wrapper">
     <section aria-label="Course Navigation" class="course-index">
       <header id="open_close_accordion">
-        <h2>Courseware Index</h2>
         <a href="#">close</a>
       </header>
 

From b5b0d0862159f4bb98538e66968e9afab4de8a00 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Tue, 31 Jul 2012 16:28:48 -0400
Subject: [PATCH 2/2] Sorta fix askbot

---
 lms/askbot/skins/mitx/templates/base.html     |  2 +-
 .../templates/meta/html_head_stylesheets.html |  1 +
 .../mitx/templates/navigation.jinja.html      | 55 ++++++------------
 .../skins/mitx/templates/widgets/footer.html  | 56 +++++++++++--------
 lms/static/sass/course/_help.scss             | 54 ------------------
 .../sass/course/discussion/_discussion.scss   |  4 +-
 6 files changed, 55 insertions(+), 117 deletions(-)
 delete mode 100644 lms/static/sass/course/_help.scss

diff --git a/lms/askbot/skins/mitx/templates/base.html b/lms/askbot/skins/mitx/templates/base.html
index ced2376a99..18ca213cb7 100644
--- a/lms/askbot/skins/mitx/templates/base.html
+++ b/lms/askbot/skins/mitx/templates/base.html
@@ -20,7 +20,7 @@
         {% include "widgets/header.html" %} {# Logo, user tool navigation and meta navitation #}
         {# include "widgets/secondary_header.html" #} {# Scope selector, search input and ask button #}
 
-        <section class="main-content">
+        <section class="container">
             {% block body %}
             {% endblock %}
         </section>
diff --git a/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html b/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html
index 99223edac4..3ec11b59fd 100644
--- a/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html
+++ b/lms/askbot/skins/mitx/templates/meta/html_head_stylesheets.html
@@ -1,3 +1,4 @@
 {% load extra_filters_jinja %}
 <!--<link href="{{"/style/style.css"|media }}" rel="stylesheet" type="text/css" />-->
 {{ 'application' | compressed_css }}
+{{ 'course' | compressed_css }}
diff --git a/lms/askbot/skins/mitx/templates/navigation.jinja.html b/lms/askbot/skins/mitx/templates/navigation.jinja.html
index d69afbebc6..59c7148184 100644
--- a/lms/askbot/skins/mitx/templates/navigation.jinja.html
+++ b/lms/askbot/skins/mitx/templates/navigation.jinja.html
@@ -1,46 +1,27 @@
-<header class="app" aria-label="Global Navigation">
+<header class="global" aria-label="Global Navigation">
   <nav>
-    <a href="{{ MITX_ROOT_URL }}" class="logo">
-      <img src="/static/images/logo.png" />
-    </a>
+    <h1 class="logo"><a href="${reverse('root')}"></a></h1>
+    <ol class="left">
+      <li class="primary">
+        <a href="${reverse('courses')}">Find Courses</a>
+      </li>
+    </ol>
 
-    {%if request.user.is_authenticated(): %}
-    <h1>Circuits and Electronics</h1>
     <ol class="user">
-      <li>
-        <a href="/dashboard" class="user-dashboard">
-          <span class="avatar"><img src="/static/images/profile.jpg" /></span>
-          {{ request.user.username }}
+      <li class="primary">
+        <a href="${reverse('dashboard')}" class="user-link">
+          <span class="avatar"></span>
+          ${user.username}
         </a>
       </li>
-      <li>
-        <a href="#" class="options">&#9662</a>
-        <ol class="user-options">
-          <li><a href="#">Account Settings</a></li>
-          <li><a href="/logout">Log Out</a></li>
-        </ol>
+      <li class="primary">
+        <a href="#" class="dropdown">&#9662</a>
+        <ul class="dropdown-menu">
+          ##          <li><a href="#">Account Settings</a></li>
+          <li><a href="${reverse('help_edx')}">Help</a></li>
+          <li><a href="${reverse('logout')}">Log Out</a></li>
+        </ul>
       </li>
     </ol>
-    {%else:%}
-    <ol>
-      <li><a href="/courses">Courses</a></li>
-      <li><a href="#">How It Works</a></li>
-    </ol>
-    <ol class="user">
-      <li><a href="/dashboard">Log In</a></li>
-      <li><a href="#">Sign Up</a></li>
-    </ol>
-    <ol class="secondary">
-      <li>
-        <a href="#">About</a>
-      </li>
-      <li>
-        <a href="#">Jobs</a>
-      </li>
-      <li>
-        <a href="#">faq</a>
-      </li>
-    </ol>
-    {%endif %}
   </nav>
 </header>
diff --git a/lms/askbot/skins/mitx/templates/widgets/footer.html b/lms/askbot/skins/mitx/templates/widgets/footer.html
index 4675a07047..d152e2a38e 100644
--- a/lms/askbot/skins/mitx/templates/widgets/footer.html
+++ b/lms/askbot/skins/mitx/templates/widgets/footer.html
@@ -1,26 +1,38 @@
 <!-- template footer.html -->
-  <footer>
-    <!-- Template based on a design from http://www.dotemplate.com/ - Donated $10 (pmitros) so we don't need to include credit. -->
-    <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
-</p>
-      <nav>
-      <ul class="social">
-        <li class="linkedin">
-          <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
-        </li>
-        <li class="twitter">
-          <a href="https://twitter.com/#!/MyMITx">Twitter</a>
-        </li>
-        <li class="facebook">
-          <a href="http://www.facebook.com/pages/MITx/378592442151504">Facebook</a>
-        </li>
-      </ul>
-    <ul>
+<footer>
+  <nav>
+    <section class="top">
+      <section class="primary">
+        <a href="${reverse('root')}" class="logo"></a>
+        <a href="${reverse('courses')}">Find Courses</a>
+        <a href="${reverse('about_edx')}">About</a>
+        <a href="http://edxonline.tumblr.com/">Blog</a>
+        <a href="${reverse('jobs')}">Jobs</a>
+        <a href="${reverse('contact')}">Contact</a>
+      </section>
 
-      <li><a href="/s/help.html">Help</a></li>
-      <li><a href="/logout">Log out</a></li>
-    </ul>
-      </nav>
-  </footer>
+      <section class="social">
+        <a href="http://youtube.com/user/edxonline"><img src="${static.url('images/social/youtube-sharing.png')}" /></a>
+        <a href="https://plus.google.com/108235383044095082735"><img src="${static.url('images/social/google-plus-sharing.png')}" /></a>
+        <a href="http://www.facebook.com/EdxOnline"><img src="${static.url('images/social/facebook-sharing.png')}" /></a>
+        <a href="https://twitter.com/edXOnline"><img src="${static.url('images/social/twitter-sharing.png')}" /></a>
+      </section>
+    </section>
+
+    <section class="bottom">
+      <section class="copyright">
+        <p style="float:left;">&copy; 2012 edX, some rights reserved.</p>
+      </section>
+
+      <section class="secondary">
+        <a href="${reverse('tos')}">Terms of Service</a>
+        <a href="${reverse('privacy_edx')}">Privacy Policy</a>
+        <a href="${reverse('honor')}">Honor Code</a>
+        <a href="${reverse('help_edx')}">Help</a>
+      </section>
+    </section>
+
+  </nav>
+</footer>
 
 <!-- end template footer.html -->
diff --git a/lms/static/sass/course/_help.scss b/lms/static/sass/course/_help.scss
deleted file mode 100644
index cb505814e9..0000000000
--- a/lms/static/sass/course/_help.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-section.help.main-content {
-  padding: lh();
-
-  h1 {
-    border-bottom: 1px solid #ddd;
-    margin-bottom: lh();
-    margin-top: 0;
-    padding-bottom: lh();
-  }
-
-  p {
-    max-width: 700px;
-  }
-
-  h2 {
-    margin-top: 0;
-  }
-
-  section.self-help {
-    float: left;
-    margin-bottom: lh();
-    margin-right: flex-gutter();
-    width: flex-grid(6);
-
-    ul {
-      margin-left: flex-gutter(6);
-
-      li {
-        margin-bottom: lh(.5);
-      }
-    }
-  }
-
-  section.help-email {
-    float: left;
-    width: flex-grid(6);
-
-    dl {
-      display: block;
-      margin-bottom: lh();
-
-      dd {
-        margin-bottom: lh();
-      }
-
-      dt {
-        clear: left;
-        float: left;
-        font-weight: bold;
-        width: flex-grid(2, 6);
-      }
-    }
-  }
-}
diff --git a/lms/static/sass/course/discussion/_discussion.scss b/lms/static/sass/course/discussion/_discussion.scss
index b9022a43d8..7b0aa601d9 100644
--- a/lms/static/sass/course/discussion/_discussion.scss
+++ b/lms/static/sass/course/discussion/_discussion.scss
@@ -1,8 +1,6 @@
 // Generic layout styles for the discussion forums
-
 body.askbot {
-
-  section.main-content {
+  section.container {
     div.discussion-wrapper {
       @extend .table-wrapper;