Merge remote-tracking branch 'origin/master' into template_caching

Conflicts:
	lms/static/sass/application.css

lms/static/sass/_about_pages.scss

 .container.about {
-  padding: 20px 0 120px;
+  padding: 20px 10px 120px;
 
   > nav {
     margin-bottom: 80px;

lms/static/sass/_course_about.scss

@@ -24,8 +24,9 @@
       @include clearfix;
       margin: 0 auto;
       max-width: 1200px;
+      padding: 0px 10px;
       position: relative;
-      width: flex-grid(12);
+      width: grid-width(12);
       z-index: 2;
 
 
@@ -243,12 +244,12 @@
     border: 1px solid rgb(200,200,200);
     border-top: none;
     float: left;
-    padding: 20px 20px 30px;
+    padding: 16px 20px 30px;
     width: flex-grid(4);
 
     header {
       margin-bottom: 30px;
-      padding-bottom: 20px;
+      padding-bottom: 16px;
       position: relative;
       text-align: center;
 

lms/static/sass/_courses.scss

@@ -4,7 +4,7 @@
 
   header.search {
     background: rgb(240,240,240);
-    @include background-image(url('/static/images/shot-2-large.jpg'));
+    //@include background-image(url('/static/images/shot-2-large.jpg'));
     background-size: cover;
     border-bottom: 1px solid rgb(100,100,100);
     @include box-shadow(inset 0 -1px 8px 0 rgba(0,0,0, 0.2), inset 0 1px 12px 0 rgba(0,0,0, 0.3));

lms/static/sass/_dashboard.scss

@@ -48,22 +48,16 @@
             padding-bottom: 10px;
 
             &:hover {
-              .icon {
+              .title .icon {
                 opacity: 1;
               }
             }
 
-            p {
+            span.title {
               color: $lighter-base-font-color;
               float: left;
               font-family: $sans-serif;
 
-              span {
-                font-weight: 700;
-                margin-left: 12px;
-              }
-            }
-
               .icon {
                 background-size: cover;
                 float: left;
@@ -86,6 +80,13 @@
                 }
               }
             }
+
+            span.data {
+              color: $lighter-base-font-color;
+              font-weight: 700;
+              margin-left: 12px;
+            }
+          }
         }
       }
     }

lms/static/sass/_home.scss

@@ -17,6 +17,7 @@
       @extend .animation-home-header-pop-up;
       max-width: 1200px;
       margin: 0 auto;
+      padding: 0 10px;
       position: relative;
       text-align: center;
 
@@ -32,7 +33,7 @@
       border: 1px solid rgb(100,100,100);
       @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
       @include inline-block;
-      padding: 30px 50px 30px;
+      padding: 20px 30px 30px;
       position: relative;
       text-align: center;
       z-index: 1;
@@ -40,22 +41,10 @@
 
     .title {
       @include inline-block;
-      //margin-right: 50px;
-      //padding-right: 50px;
       position: relative;
       text-align: left;
       vertical-align: middle;
 
-      &::before {
-        @extend .faded-vertical-divider;
-        //content: "";
-        display: block;
-        height: 170px;
-        position: absolute;
-        right: 0px;
-        top: -20px;
-      }
-
       &::after {
         @extend .faded-vertical-divider-light;
         content: "";

lms/static/sass/application.scss

 @import 'bourbon/bourbon';
-@import 'base_styles/reset';
-@import 'base_styles/font_face';
-@import 'base_styles/base';
-@import 'base_styles/base_mixins';
-@import 'base_styles/base_extends';
-@import 'base_styles/base_animations';
 
+@import 'base/reset';
+@import 'base/font_face';
+@import 'base/variables';
+@import 'base/base';
+@import 'base/mixins';
+@import 'base/extends';
+@import 'base/animations';
+
+
+// Courseware styles
 @import 'sass_old/base/variables';
 @import 'sass_old/base/extends';
 @import 'sass_old/base/functions';
 
-@import 'shared_styles/shared_forms';
-@import 'shared_styles/shared_footer';
-@import 'shared_styles/shared_header';
-@import 'shared_styles/shared_list_of_courses';
-@import 'shared_styles/shared_course_filter';
-@import 'shared_styles/shared_modal';
-@import 'shared_styles/activation_messages';
+
+// Multicourse styles
+@import 'shared/forms';
+@import 'shared/footer';
+@import 'shared/header';
+@import 'shared/course_object';
+@import 'shared/course_filter';
+@import 'shared/modal';
+@import 'shared/activation_messages';
 
 @import 'home';
 @import 'dashboard';
-@import 'course_object';
+@import 'courseware_subnav';
 @import 'courses';
 @import 'course_about';
 @import 'jobs';
 @import 'about_pages';
 @import 'press_release';
 
+
+// Courseware styles
 @import 'sass_old/courseware/courseware';
 @import 'sass_old/courseware/sequence-nav';
 @import 'sass_old/courseware/sidebar';

lms/static/sass/base_styles/_base.scss → lms/static/sass/base/_base.scss

-$gw-column: 60px;
-$gw-gutter: 25px;
-
-$fg-column: $gw-column;
-$fg-gutter: $gw-gutter;
-$fg-max-columns: 12;
-
-$sans-serif: 'Open Sans', $verdana;
-$serif: $georgia;
-
-$base-font-color: rgb(60,60,60);
-$lighter-base-font-color: rgb(160,160,160);
-
-$blue: rgb(29,157,217);
-$pink: rgb(182,37,104);
-$yellow: rgb(255, 252, 221);
-$error-red: rgb(253, 87, 87);
-
 html, body {
   background: rgb(250,250,250);
   font-family: $sans-serif;
@@ -100,8 +82,8 @@ a:link, a:visited {
 .container {
   @include clearfix;
   margin: 0 auto 0;
-  max-width: 1200px;
-  width: flex-grid(12);
+  padding: 0px 10px;
+  width: grid-width(12);
 }
 
 .static-container {

lms/static/sass/base_styles/_base_extends.scss → lms/static/sass/base/_extends.scss

@@ -77,6 +77,7 @@
   border: none;
 }
 
+//Styles for Error messages
 .error-message-colors {
   background: $error-red;
   border: 1px solid rgb(202, 17, 17);

lms/static/sass/base/_variables.scss

+$gw-column: 80px;
+$gw-gutter: 20px;
+
+$fg-column: $gw-column;
+$fg-gutter: $gw-gutter;
+$fg-max-columns: 12;
+
+$sans-serif: 'Open Sans', $verdana;
+$serif: $georgia;
+
+$base-font-color: rgb(60,60,60);
+$lighter-base-font-color: rgb(160,160,160);
+
+$blue: rgb(29,157,217);
+$pink: rgb(182,37,104);
+$yellow: rgb(255, 252, 221);
+$error-red: rgb(253, 87, 87);
+

lms/static/sass/shared_styles/_shared_list_of_courses.scss → lms/static/sass/shared/_course_object.scss

 .highlighted-courses, .find-courses {
   .courses {
     @include clearfix;
-    padding: 40px 15px 15px;
+    padding: 40px 0px 15px;
 
     .course {
       background: rgb(250,250,250);
@@ -33,6 +33,7 @@
 
         p {
           color: rgb(255,255,255);
+          font-style: italic;
           line-height: 1.2em;
           padding: 4px 12px 5px;
         }
@@ -69,7 +70,11 @@
 
             h2 {
               color: $base-font-color;
+              font-family: $sans-serif;
+              font-size: 1em;
+              font-weight: 700;
               margin-bottom: 0px;
+              overflow: hidden;
               padding-top: 9px;
               text-shadow: 0 1px rgba(255,255,255, 0.6);
               text-overflow: ellipsis;

lms/static/sass/shared_styles/_shared_footer.scss → lms/static/sass/shared/_footer.scss

@@ -12,11 +12,10 @@ footer {
   }
 
   nav {
-    @include box-sizing(border-box);
     max-width: 1200px;
     margin: 0 auto;
     padding: 30px 10px 0;
-    width: flex-grid(12);
+    width: grid-width(12);
 
     .top {
       border-bottom: 1px solid rgb(200,200,200);

lms/static/sass/shared_styles/_shared_header.scss → lms/static/sass/shared/_header.scss

@@ -9,12 +9,11 @@ header.global {
 
   nav {
     @include clearfix;
-    @include box-sizing(border-box);
     height: 40px;
     margin: 0 auto;
     max-width: 1200px;
-    padding-top: 14px;
-    width: flex-grid(12);
+    padding: 14px 10px 0px;
+    width: grid-width(12);
   }
 
   h1.logo {
@@ -187,7 +186,7 @@ header.global {
       ul.dropdown-menu {
         background: rgb(252,252,252);
         @include border-radius(4px);
-        @include box-shadow(0 2px 10px 0 rgba(0,0,0, 0.4));
+        @include box-shadow(0 2px 24px 0 rgba(0,0,0, 0.3));
         border: 1px solid rgb(100,100,100);
         display: none;
         padding: 5px 10px;

lms/static/sass/shared_styles/_shared_modal.scss → lms/static/sass/shared/_modal.scss

@@ -20,7 +20,7 @@
   left: 50%;
   padding: 8px;
   position: absolute;
-  width: grid-width(6);
+  width: grid-width(5);
   z-index: 12;
 
   &.video-modal {

lms/templates/course.html

@@ -31,3 +31,31 @@
     <p class="university">${course.get_about_section('university')}</p>
   </div>
 </article>
+
+<article id="${course.id}"class="course">
+  <div class="inner-wrapper">
+    <header class="course-preview">
+        <a href="${reverse('about_course', args=[course.id])}">
+        <hgroup>
+          <h2>${course.get_about_section('title')}</h2>
+        </hgroup>
+        <div class="info-link">&#x2794;</div>
+      </a>
+    </header>
+    <section class="info">
+      <div class="cover-image">
+        <img src="${static.url('images/courses/history.png')}">
+      </div>
+      <div class="desc">
+        <p>An advanced introduction to analog circuits. An advanced introduction to analog circuits.</p>
+      </div>
+      <div class="bottom">
+        <a href="#" class="university">${course.get_about_section('university')}</a>
+        <span class="start-date">7/23/12</span>
+      </div>
+    </section>
+  </div>
+  <div class="meta-info">
+    <p class="university">${course.get_about_section('university')}</p>
+  </div>
+</article>

lms/templates/courses.html

@@ -3,7 +3,7 @@
 <%namespace name='static' file='static_content.html'/>
 
 <section class="find-courses">
-  <header class="search">
+  <header class="search" style="background: url('/static/images/shot-2-large.jpg')">
     <div class="inner-wrapper main-search">
       <hgroup>
         <div class="logo">

lms/templates/dashboard.html

@@ -11,13 +11,13 @@
       <section class="user-info">
         <ul>
           <li>
-          <div class="icon email-icon"></div><p>Email<span>${ user.email }</span></p>
+            <span class="title"><div class="icon email-icon"></div>Email</span><span class="data">${ user.email }</span>
           </li>
           <li>
-            <div class="icon location-icon"></div><p>Location<span>${ user.profile.location }</span></p>
+            <span class="title"><div class="icon location-icon"></div>Location</span><span class="data">${ user.profile.location }</span>
           </li>
           <li>
-            <div class="icon language-icon"></div><p>Language<span>${ user.profile.language }</span></p>
+            <span class="title"><div class="icon language-icon"></div>Language</span><span class="data">${ user.profile.language }</span>
           </li>
         </ul>
       </section>

lms/templates/static_templates/university_profile.html

@@ -3,13 +3,13 @@
 <%namespace name='static' file='../static_content.html'/>
 
 <section class="university-profile">
-  <header class="search">
+  <header class="search" style="background: url('/static/images/shot-5-large.jpg')">
     <div class="inner-wrapper university-search">
       <hgroup>
         <div class="logo">
-          <img src="${static.url('images/harvard.png')}" />
+          <img src="${static.url('images/mit.png')}" />
         </div>
-        <h1>HarvardX</h1>
+        <h1>MITx</h1>
       </hgroup>
     </div>
   </header>