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

Kf multicourse design

lms/static/sass/_course_about.scss

@@ -177,7 +177,6 @@
         }
 
         &:hover {
-          cursor: pointer;
           text-decoration: none;
 
           .play-intro {

lms/static/sass/_home.scss

@@ -281,14 +281,6 @@
       text-align: center;
       text-transform: uppercase;
       text-shadow: 0 1px rgba(255,255,255, 0.6);
-
-      .lowercase {
-        color: $lighter-base-font-color;
-        font-family: inherit;
-        font-size: inherit;
-        font-style: inherit;
-        text-transform: none;
-      }
     }
   }
 
@@ -407,6 +399,8 @@
         }
 
         &:hover {
+          text-decoration: none;
+
           &::before {
             opacity: 1;
           }

lms/static/sass/base/_base.scss

@@ -86,6 +86,11 @@ a:link, a:visited {
   width: grid-width(12);
 }
 
+span.edx {
+  text-transform: none;
+  font: inherit;
+}
+
 .static-container {
   @include clearfix;
   margin: 0 auto 0;

lms/static/sass/shared/_course_object.scss

@@ -24,6 +24,9 @@
       width: 100%;
       @include transition(all, 0.15s, linear);
 
+      a:hover {
+        text-decoration: none;
+      }
 
       .meta-info {
         background: rgba(0,0,0, 0.6);
@@ -33,7 +36,7 @@
         @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.15));
         @include clearfix;
         position: absolute;
-        right: -3px;
+        right: -4px;
         @include transition(all, 0.15s, linear);
 
         p {
@@ -59,13 +62,27 @@
         width: 100%;
         z-index: 3;
 
-        > a {
+        // > a {
           @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85)));
           @include box-shadow(inset 0 -1px 0 0 rgba(255,255,255, 0.2));
           border-bottom: 1px solid rgba(150,150,150, 0.7);
           display: block;
           height: 50px;
 
+          &:hover {
+            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
+            text-decoration: none;
+
+            .info-link {
+              color: $blue;
+              opacity: 1;
+            }
+
+            h2 {
+              color: $blue;
+            }
+          }
+
           hgroup {
             left: 0px;
             padding: 0px 10px;
@@ -95,7 +112,6 @@
             }
           }
 
-
           .info-link {
             border-left: 1px solid rgba(150,150,150, 0.5);
             @include box-sizing(border-box);
@@ -114,21 +130,8 @@
             vertical-align: middle;
           }
 
-          &:hover {
-            @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
-            text-decoration: none;
-
-            .info-link {
-              color: $blue;
-              opacity: 1;
-            }
-
-            h2 {
-              color: $blue;
-            }
-          }
         }
-      }
+      // }
 
       .info {
         background: rgb(255,255,255);

lms/static/sass/shared/_footer.scss

@@ -110,8 +110,7 @@ footer {
           padding: 0;
 
           a {
-            opacity: 0.7;
-            padding: 0 0 0 10px;
+            opacity: 0.3;
             @include transition(all, 0.1s, linear);
 
             &:hover {

lms/static/sass/shared/_header.scss

@@ -105,7 +105,7 @@ header.global {
       margin-right: 5px;
 
       > a {
-        @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
+        @include background-image(linear-gradient(-90deg, #fff 0%, rgb(250,250,250) 50%, rgb(237,237,237) 50%, rgb(220,220,220) 100%));
         border: 1px solid transparent;
         border-color: rgb(200,200,200);
         @include border-radius(3px);
@@ -128,6 +128,7 @@ header.global {
         }
 
         &:hover, &.active {
+          background: #FFF;
         }
       }
     }

lms/templates/course.html

@@ -4,31 +4,30 @@
     from courseware.courses import course_image_url, get_course_about_section
 %>
 <%page args="course" />
-
-<article id="${course.id}"class="course">
+<article id="${course.id}" class="course">
+  <a href="${reverse('about_course', args=[course.id])}">
   <div class="inner-wrapper">
-    <header class="course-preview">
-      <a href="${reverse('about_course', args=[course.id])}">
+      <header class="course-preview">
         <hgroup>
           <h2><span class="course-number">${course.number}</span> ${get_course_about_section(course, 'title')}</h2>
         </hgroup>
         <div class="info-link">&#x2794;</div>
-      </a>
-    </header>
-    <section class="info">
-      <div class="cover-image">
-        <img src="${course_image_url(course)}">
-      </div>
-      <div class="desc">
-        <p>${get_course_about_section(course, 'short_description')}</p>
-      </div>
-      <div class="bottom">
-        <a href="${reverse('university_profile', args=[course.org])}" class="university">${get_course_about_section(course, 'university')}</a>
-        <span class="start-date">${course.start_date_text}</span>
-      </div>
-    </section>
-  </div>
-  <div class="meta-info">
-    <p class="university">${get_course_about_section(course, 'university')}</p>
-  </div>
+      </header>
+      <section class="info">
+        <div class="cover-image">
+          <img src="${course_image_url(course)}">
+        </div>
+        <div class="desc">
+          <p>${get_course_about_section(course, 'short_description')}</p>
+        </div>
+        <div class="bottom">
+          <a href="${reverse('university_profile', args=[course.org])}" class="university">${get_course_about_section(course, 'university')}</a>
+          <span class="start-date">${course.start_date_text}</span>
+        </div>
+      </section>
+    </div>
+    <div class="meta-info">
+      <p class="university">${get_course_about_section(course, 'university')}</p>
+    </div>
+  </a>
 </article>

lms/templates/courseware-error.html

@@ -6,7 +6,7 @@
 
 <section class="main-content">
   <section class="outside-app">
-    <h1>There has been an error on the <em>edX</em> servers</h1>
+    <h1>There has been an error on the <span class="edx">edX</span> servers</h1>
     <p>We're sorry, this module is temporarily unavailable. Our staff is working to fix it as soon as possible. Please email us at <a href="mailto:technical@mitx.mit.edu">technical@mitx.mit.edu</a> to report any problems or downtime.</p>
   </section>
 </section>

lms/templates/footer.html

@@ -14,9 +14,10 @@
       </section>
 
       <section class="social">
-        <a href="#"><img src="${static.url('images/social/linkedin.png')}" /></a>
-        <a href="#"><img src="${static.url('images/social/facebook.png')}" /></a>
-        <a href="#"><img src="${static.url('images/social/twitter.png')}" /></a>
+        <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>
 

lms/templates/index.html

@@ -46,13 +46,13 @@
 
   <section class="container">
     <section class="highlighted-courses">
-      <h2>Explore courses from <span class="lowercase">edX</span> universities</h2>
+      <h2>Explore courses from <span class="edx">edX</span> universities</h2>
 
       <section class="university-partners">
         <ol class="partners">
           <li class="partner mit">
             <a href="${reverse('university_profile', args=['MITx'])}">
-              <img src="${static.url('images/mit.png')}" />
+              <img src="${static.url('images/university/mit/mit.png')}" />
               <div class="name">
                 <span>MITx</span>
               </div>
@@ -60,7 +60,7 @@
           </li>
           <li class="partner">
             <a href="${reverse('university_profile', args=['HarvardX'])}">
-              <img src="${static.url('images/harvard.png')}" />
+              <img src="${static.url('images/university/harvard/harvard.png')}" />
               <div class="name">
                 <span>HarvardX</span>
               </div>
@@ -68,7 +68,7 @@
           </li>
           <li class="partner">
             <a href="${reverse('university_profile', args=['BerkeleyX'])}">
-              <img src="${static.url('images/berkeley.png')}" />
+              <img src="${static.url('images/university/berkeley/berkeley.png')}" />
               <div class="name">
                 <span>BerkeleyX</span>
               </div>
@@ -100,7 +100,7 @@
   <section class="container">
     <section class="more-info">
       <header>
-        <h2>edX News &amp; Announcements</h2>
+        <h2><span class="edx">edX</span> News &amp; Announcements</h2>
         <a href="${reverse('press')}">Read More &rarr;</a>
       </header>
       <section class="news">

lms/templates/login.html

 <!-- TODO: http://docs.jquery.com/Plugins/Validation -->
 <div id="login_div">
   <header>
-    <h1>Log in to edX</h1>
+    <h1>Log in to <span class="edx">edX</span></h1>
     <p class="no-account">If you don&rsquo;t have an account yet, <a href="#enroll" rel="leanModal">please enroll here</a></p>
   </header>
   <!--[if lte IE 9]>
-  <p class="ie-warning">You are using a browser that is not supported by <em>edX</em>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
+  <p class="ie-warning">You are using a browser that is not supported by <span class="edx">edX</span>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
   <![endif]-->
 
   <form id="login_form" method="post">

lms/templates/main.html

@@ -65,7 +65,7 @@
 <body class="<%block name='bodyclass'/>">
   <%include file="navigation.html" />
   <!--[if lte IE 9]>
-  <p class="ie-warning">You are using a browser that is not supported by <em>edX</em>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
+  <p class="ie-warning">You are using a browser that is not supported by <span class="edx">edX</span>, and you might not be able to complete pieces of the course. Please download the latest version of <a href="http://www.mozilla.org/en-US/firefox/new/">Firefox</a> or <a href="https://www.google.com/chrome">Chrome</a> to get the full experience.</p>
   <![endif]-->
 
   <section class="content-wrapper">

lms/templates/profile.html

@@ -211,10 +211,10 @@ $(function() {
   <form id="change_name_form">
     <div id="change_name_error"> </div>
     <fieldset>
-      <p>To uphold the credibility of edX certificates, name changes must go through an approval process. A member of the course staff will review your request, and if approved, update your information. Please allow up to a week for your request to be processed. Thank you.</p> 
+      <p>To uphold the credibility of <span class="edx">edX</span> certificates, name changes must go through an approval process. A member of the course staff will review your request, and if approved, update your information. Please allow up to a week for your request to be processed. Thank you.</p> 
       <ul>
         <li>
-          <label>Enter your desired full name, as it will appear on the edX Certificate: </label>
+          <label>Enter your desired full name, as it will appear on the <span class="edx">edX</span> Certificate: </label>
           <input id="new_name_field" value="" type="text" />
         </li>
         <li>
@@ -255,7 +255,7 @@ $(function() {
 </div>
 
 <div id="deactivate-account" class="leanModal_box">
-  <h1>Deactivate edX Account</h1>
+  <h1>Deactivate <span class="edx">edX</span> Account</h1>
   <p>Once you deactivate you&rsquo;re MIT<em>x</em> account you will no longer recieve updates and new class announcements from MIT<em>x</em>.</p>
   <p>If you&rsquo;d like to still get updates and new class announcements you can just <a href="#unenroll" rel="leanModal">unenroll</a> and keep your account active.</p>
 

lms/templates/signup_modal.html

@@ -9,7 +9,7 @@
   <div class="inner-wrapper">
     <div id="enroll">
       <header>
-        <h2>Sign Up for edX</h2>
+        <h2>Sign Up for <span class="edx">edX</span></h2>
         <hr>
       </header>
 

lms/templates/static_templates/about.html

@@ -16,7 +16,7 @@
       <div class="logo">
         <img src="${static.url('images/edx-logo-large-bw.png')}">
       </div>
-      <h2 class="mission-quote">“The mission of edX is to enhance human fulfillment worldwide through online learning, transforming education in quality, efficiency and scale through technology and research, for the benefit of campus-based students and the worldwide community of online learners.”</h2>
+      <h2 class="mission-quote">&rdquo;The mission of <span class="edx">edX</span> is to enhance human fulfillment worldwide through online learning, transforming education in quality, efficiency and scale through technology and research, for the benefit of campus-based students and the worldwide community of online learners.&ldquo;</h2>
     </div>
 
     <section class="message left">
@@ -24,7 +24,7 @@
         <img src="${static.url('images/about_1.jpg')}">
       </div>
       <article>
-        <h2>About edX</h2>
+        <h2>About <span class="edx">edX</span></h2>
         <p>EdX is a joint partnership between the Massachusetts Institute of Technology (MIT) and Harvard University to offer online learning to millions of people around the world. EdX offers Harvard and MIT classes online for free. Through this partnership, with other partners to follow, the institutions aim to extend their collective reach to build a global community of online students</p>
         <p>MIT’s Director of the Computer Science and Artificial Intelligence Laboratory Anant Agarwal serves as the first president of edX, and Harvard’s Faculty of Arts and Sciences Dean Michael D. Smith leads faculty in developing courses. Along with offering online courses, the institutions will use edX to research how students learn and how technology can facilitate teaching—both on-campus and online.</p>
         <p>EdX is based on an open-source technological platform that provides interactive educational materials designed specifically for the web, and is available to anyone in the world with an internet connection.</p>
@@ -35,7 +35,7 @@
 
     <section class="message left">
       <div class="photo">
-        <img src="${static.url('images/about-harvard.jpg')}">
+        <img src="${static.url('images/university/harvard/about-harvard.jpg')}">
       </div>
       <article>
         <h2>Harvard University</h2>
@@ -48,7 +48,7 @@ Massachusetts Institute of Technology</p>
 
     <section class="message left">
       <div class="photo">
-        <img src="${static.url('images/about-mit.jpg')}">
+        <img src="${static.url('images/university/mit/about-mit.jpg')}">
       </div>
       <article>
         <h2>Massachusetts Institute of Technology</h2>