Studio: revises styling/copy around course image management in settings

cms/static/sass/views/_settings.scss

@@ -131,7 +131,7 @@ body.course.settings {
       list-style: none;
 
       .field {
-        margin: 0 0 $baseline 0;
+        margin: 0 0 ($baseline*2) 0;
 
         &:last-child {
           margin-bottom: 0;
@@ -434,16 +434,57 @@ body.course.settings {
 
     // specific fields - course image
     #field-course-image {
-        .current-course-image {
-            position: relative;
 
-            .action-upload-image {
-                @extend .ui-btn-flat-outline;
-                position: absolute;
-                bottom: 3px;
-                right: 0;
-            }
+      .current-course-image {
+        margin-bottom: ($baseline/2);
+        padding: ($baseline/2) $baseline;
+        background: $gray-l5;
+        text-align: center;
+
+        .wrapper-course-image {
+          display: block;
+          width: 375px;
+          height: 200px;
+          overflow: hidden;
+          margin: 0 auto;
+          border: 1px solid $gray-l4;
+          box-shadow: 0 1px 1px $shadow-l1;
+          padding: ($baseline/2);
+          background: $white;
+        }
+
+        .course-image {
+          display: block;
+          width: 100%;
+          min-height: 100%;
+        }
+
+        .msg {
+          @extend .t-copy-sub2;
+          display: block;
+          margin-top: ($baseline/2);
+          color: $gray-l3;
+        }
+      }
+
+      .wrapper-input {
+        @include clearfix();
+        width: flex-grid(9,9);
+
+        .input {
+          float: left;
+          width: flex-grid(6,9);
+          margin-right: flex-gutter();
         }
+
+        .action-upload-image {
+          @extend .ui-btn-flat-outline;
+          float: right;
+          width: flex-grid(2,9);
+          margin-top: ($baseline/4);
+          padding: ($baseline/2) $baseline;
+        }
+      }
     }
 
     // specific fields - requirements
@@ -459,7 +500,7 @@ body.course.settings {
       margin-bottom: ($baseline*3);
 
       .grade-controls {
-        @include clearfix;
+        @include clearfix();
         width: flex-grid(9,9);
       }
 

cms/templates/settings.html

@@ -218,14 +218,27 @@ from contentstore import utils
                   <label>${_("Course Image")}</label>
                   <div class="current current-course-image">
                     % if context_course.course_image:
-                    <img id="course-image" width="200" src="${utils.course_image_url(context_course)}" alt="${_('Course Image')}"/>
+                    <span class="wrapper-course-image">
+                      <img class="course-image" id="course-image" src="${utils.course_image_url(context_course)}" alt="${_('Course Image')}"/>
+                    </span>
+
+                    <% ctx_loc = context_course.location %>
+                    <span class="msg msg-help">${_("You can manage this image along with all of your other")} <a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">${_("files &amp; uploads")}</a></span>
+
+                    % else:
+                    <span class="wrapper-course-image">
+                      <img class="course-image placeholder" id="course-image" src="${utils.course_image_url(context_course)}" alt="${_('Course Image')}"/>
+                    </span>
+                    <span class="msg msg-empty">${_("Your course currently does not have an image. Please upload one (.jpg format and mimimum suggested dimensions are 375px wide by 200px tall)")}</span>
                     % endif
-                    <button type="button" class="action action-upload-image">${_("Upload Course Image")}</button>
                   </div>
 
-                  <div class="input">
-                    <input type="text" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" />
-                    <span class="tip tip-stacked">${_("Enter your course image's filename.")}</span>
+                  <div class="wrapper-input">
+                    <div class="input">
+                      <input type="text" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" />
+                      <span class="tip tip-stacked">${_("please provide a valid path and name to your course image (Note: only .jpg format supported)")}</span>
+                    </div>
+                    <button type="button" class="action action-upload-image">${_("Upload Course Image")}</button>
                   </div>
                 </li>