From 4fd7f2936aefe9421c704c266d3f35bb3ca7f1a5 Mon Sep 17 00:00:00 2001
From: Simon Chen <schen@edx.org>
Date: Thu, 30 Jun 2016 15:39:24 -0400
Subject: [PATCH] ECOM-4219 Add coming soon message styles to the course cards
 (#12890)

---
 .../learner_dashboard/course_card_view_spec.js    |  4 ++--
 lms/static/sass/elements/_course-card.scss        | 15 ++++++++++-----
 .../learner_dashboard/course_enroll.underscore    |  8 ++++----
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/lms/static/js/spec/learner_dashboard/course_card_view_spec.js b/lms/static/js/spec/learner_dashboard/course_card_view_spec.js
index 8ddb8c5689..9d6ea5022d 100644
--- a/lms/static/js/spec/learner_dashboard/course_card_view_spec.js
+++ b/lms/static/js/spec/learner_dashboard/course_card_view_spec.js
@@ -108,8 +108,8 @@ define([
                 expect(view.$('.course-details .course-text .course-key').html()).toEqual(context.key);
                 expect(view.$('.course-details .course-text .run-period').length).toBe(0);
                 expect(view.$('.no-action-message').text().trim()).toBe('Coming Soon');
-                expect(view.$('.enroll-open-date').text().trim())
-                    .toBe(context.run_modes[0].enrollment_open_date);
+                expect(view.$('.enrollment-open-date').text().trim())
+                    .toEqual(context.run_modes[0].enrollment_open_date);
             });
 
             it('should render if enrollment_open_date is not provided', function(){
diff --git a/lms/static/sass/elements/_course-card.scss b/lms/static/sass/elements/_course-card.scss
index 2c76983ba0..e6eb95d705 100644
--- a/lms/static/sass/elements/_course-card.scss
+++ b/lms/static/sass/elements/_course-card.scss
@@ -15,7 +15,10 @@
     @include float(left);
 
     .header-img {
-      max-width: 191px;
+      max-width: 100%;
+      @include susy-media($bp-screen-sm) {
+        max-width: 191px;
+      }
     }
   }
 
@@ -55,16 +58,18 @@
     }
     .no-action-message{
       margin-bottom: $baseline/2;
-      color: palette(grayscale, black);
+      color: palette(grayscale, dark);
       font-size: font-size(large);
       text-align: center;
+      text-transform: uppercase;
+      margin-top: $baseline*2;
     }
     .enrollment-opens{
       text-align: center;
       margin-bottom: $baseline/2;
-    }
-    .enroll-open-date{
-      text-align: center;
+      .enrollment-open-date{
+         white-space: nowrap;
+      }
     }
     .run-select-container{
       margin-bottom: $baseline;
diff --git a/lms/templates/learner_dashboard/course_enroll.underscore b/lms/templates/learner_dashboard/course_enroll.underscore
index aa0de0e259..8db361e8cf 100644
--- a/lms/templates/learner_dashboard/course_enroll.underscore
+++ b/lms/templates/learner_dashboard/course_enroll.underscore
@@ -49,10 +49,10 @@
             <%- gettext('Coming Soon') %>
         </div>
         <div class="enrollment-opens">
-            <%- gettext('Enrollment Opens') %>
-        </div>
-        <div class="enroll-open-date">
-            <%- enrollment_open_date %>
+            <%- gettext('Enrollment Opens on') %>
+            <span class="enrollment-open-date">
+                <%- enrollment_open_date %>
+            </span>
         </div>
     <% } %>
 <% } %>