Merge pull request #268 from MITx/kf-multicourse-design

Make things more fluid

lms/static/sass/base/_base.scss

@@ -82,8 +82,9 @@ a:link, a:visited {
 .container {
   @include clearfix;
   margin: 0 auto 0;
-  padding: 0px 10px;
+  padding: 0px 30px;
   max-width: grid-width(12);
+  min-width: 760px;
 }
 
 span.edx {

lms/static/sass/multicourse/_about_pages.scss

 .container.about {
-  padding: 20px 10px 120px;
+  padding: 20px 30px 120px;
 
   > nav {
     margin-bottom: 80px;
@@ -102,7 +102,6 @@
         img {
           background: rgb(245,245,245);
           display: block;
-          //height: 200px;
           width: 100%;
         }
       }
@@ -257,14 +256,14 @@
   .contact {
     @include clearfix;
     margin: 0 auto;
-    width: flex-grid(10);
 
-    .map {
-      background: rgb(245,245,245);
+    .photo {
+      @include box-sizing(border-box);
+      background: rgb(255,255,255);
+      border: 1px solid rgb(210,210,210);
+      padding: 1px;
       float: left;
-      margin-right: flex-gutter();
-      overflow: hidden;
-      width: flex-grid(6);
+      width: flex-grid(3);
 
       img {
         max-width: 100%;
@@ -275,7 +274,7 @@
       @include box-sizing(border-box);
       float: left;
       padding-left: 40px;
-      width: flex-grid(6);
+      width: flex-grid(9);
 
       ul {
         list-style: none;

lms/static/sass/multicourse/_home.scss

@@ -30,11 +30,11 @@
       border: 1px solid rgb(100,100,100);
       @include box-shadow(0 4px 25px 0 rgba(0,0,0, 0.5));
       @include box-sizing(border-box);
-      height: 120px;
+      min-height: 120px;
       margin-left: grid-width(2) + $gw-gutter;
+      width: flex-grid(6);
       float: left;
       position: relative;
-      text-align: center;
       @include transition(all, 0.2s, linear);
       vertical-align: top;
 
@@ -46,7 +46,6 @@
 
       > hgroup {
         @include box-sizing(border-box);
-        height: 120px;
         @include inline-block;
         left: 0px;
         opacity: 1;
@@ -86,7 +85,7 @@
       padding: 4px;
       position: relative;
       vertical-align: top;
-      width: 210px;
+      width: flex-grid(2) + flex-gutter();
       z-index: 2;
 
       &:hover {
@@ -97,6 +96,8 @@
         height: 100%;
         overflow: hidden;
         position: relative;
+        background: url('../images/courses/video-thumb.jpg') center no-repeat;
+        @include background-size(cover);
 
         .play-intro {
           @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.65), rgba(0,0,0, 0.75)));

lms/static/sass/multicourse/_jobs.scss

 .container.jobs {
-  padding: 60px 0 120px;
+  padding: 60px 30px 120px;
 
   q {
     display: block;
@@ -34,8 +34,7 @@
       img {
         background: rgb(245,245,245);
         display: block;
-        height: 200px;
-        width: 100%;
+        max-width: 100%;
       }
     }
 
@@ -54,7 +53,7 @@
         p {
           margin-left: 0;
           font-style: italic;
-          line-height: 1.4;
+          line-height: 1.6;
           font-size: 1.1em;
           color: #666;
         }
@@ -63,6 +62,7 @@
           margin-top: 12px;
           display: block;
           color: #a0a0a0;
+          font-weight: 300;
         }
       }
     }

lms/static/sass/shared/_modal.scss

@@ -195,9 +195,8 @@
 
       .citizenship, .gender, .date-of-birth {
         margin-bottom: 20px;
-
-        .input-wrapper {
-        }
+        float: left;
+        width: flex-grid(4);
 
         label {
           display: block;
@@ -205,36 +204,15 @@
 
         select {
           width: 100%;
+          @include box-sizing(border-box);
+          display: block;
         }
       }
 
       .citizenship, .gender {
-        float: left;
-        width: flex-grid(4);
-      }
-
-      .citizenship {
         margin-right: flex-gutter();
       }
 
-      .date-of-birth {
-        float: left;
-        width: flex-grid(12);
-
-        select {
-          @include box-sizing(border-box);
-          display: block;
-          float: left;
-          margin-right: flex-gutter();
-          max-width: flex-grid(4);
-          width: flex-grid(4);
-
-          &:last-child {
-            margin: 0px;
-          }
-        }
-      }
-
       .submit {
         padding-top: 10px;
 

lms/templates/contact.html

@@ -11,12 +11,12 @@
   </nav>
 
   <section class="contact">
-    <div class="map">
+    <div class="photo">
       <img src="${static.url('images/contact-page.jpg')}">
     </div>
     <div class="contacts">
       <h2>Class Feedback</h2>
-      <p>We are always seeking feedback to improve our courses. If you are an enrolled student and have any questions, feedback, suggestions, or any other issues specific to a particular class, please post on the discussion forums of that class.</p>
+      <p>We are always seeking feedback to improve our courses. If you are an enrolled student and have any questions, feedback, suggestions, or any other issues specific to a particular class, please post on the discussion forums of that&nbsp;class.</p>
 
       <h2>General Inquiries and Feedback</h2>
       <p>"If you have a general question about edX please email <a href="mailto:info@edx.org">info@edx.org</a>. To see if your question has already been answered, visit our <a href="${reverse('faq_edx')}">FAQ page</a>. You can also join the discussion on our <a href="http://www.facebook.com/EdxOnline">facebook page</a>. Though we may not have a chance to respond to every email, we take all feedback into consideration.</p>

lms/templates/index.html

@@ -36,7 +36,6 @@
 
         <a href="#video-modal" class="media" rel="leanModal">
           <div class="hero">
-            <img src="${static.url('images/courses/video-thumb.jpg')}" />
             <div class="play-intro"></div>
           </div>
         </a>

lms/templates/signup_modal.html

@@ -54,7 +54,7 @@
             </div>
           </section>
 
-          <section class="gender">
+          <section class="date-of-birth">
             <label>Year of birth</label>
             <div class="input-wrapper">
               <select name="year_of_birth">

lms/templates/static_templates/contact.html

@@ -14,12 +14,12 @@
   </nav>
 
   <section class="contact">
-    <div class="map">
+    <div class="photo">
       <img src="${static.url('images/contact-page.jpg')}">
     </div>
     <div class="contacts">
       <h2>Class Feedback</h2>
-      <p>We are always seeking feedback to improve our courses. If you are an enrolled student and have any questions, feedback, suggestions, or any other issues specific to a particular class, please post on the discussion forums of that class.</p>
+      <p>We are always seeking feedback to improve our courses. If you are an enrolled student and have any questions, feedback, suggestions, or any other issues specific to a particular class, please post on the discussion forums of that&nbsp;class.</p>
 
       <h2>General Inquiries and Feedback</h2>
       <p>"If you have a general question about edX please email <a href="mailto:info@edx.org">info@edx.org</a>. To see if your question has already been answered, visit our <a href="${reverse('faq_edx')}">FAQ page</a>. You can also join the discussion on our <a href="http://www.facebook.com/EdxOnline">facebook page</a>. Though we may not have a chance to respond to every email, we take all feedback into consideration.</p>