AA-405: UI fixes for courseware

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -953,7 +953,6 @@ div.problem {
 // +Problem - Actions
 // ====================
 div.problem .action {
-  margin-top: $baseline;
   min-height: $baseline;
   width: 100%;
   display: flex;
@@ -963,6 +962,13 @@ div.problem .action {
   align-items: center;
   flex-wrap: wrap;
 
+  .problem-action-buttons-wrapper {
+      display: inline-flex;
+      justify-content: flex-end;
+      width: 100%;
+      padding-bottom: $baseline;
+  }
+
   .problem-action-button-wrapper {
     @include border-right(1px solid $light-gray1);
 
@@ -977,6 +983,8 @@ div.problem .action {
     @include margin-right($baseline / 5);
 
     max-width: 110px;
+    text-decoration: underline;
+    text-transform: none;
 
     .icon {
       margin-bottom: $baseline / 10;
@@ -1009,13 +1017,12 @@ div.problem .action {
         display: inline-block;
     }
     .submit-cta-description {
-        margin-left: 8px;
+        color: $blue;
+        font-size: small;
     }
     .submit-cta-link-button {
-        background: none;
-        border: none;
-        color: $blue;
-        cursor: pointer;
+        text-decoration: underline;
+        text-transform: none;
     }
   }
 

lms/djangoapps/courseware/tests/test_masquerade.py

@@ -150,11 +150,11 @@ class MasqueradeTestCase(SharedModuleStoreTestCase, LoginEnrollmentTestCase, Mas
 
     def verify_show_answer_present(self, show_answer_expected):
         """
-        Verifies that "Show Answer" is only present when expected (for staff only).
+        Verifies that "Show answer" is only present when expected (for staff only).
         """
         problem_html = json.loads(self.get_problem().content.decode('utf-8'))['html']
         self.assertIn(self.problem_display_name, problem_html)
-        self.assertEqual(show_answer_expected, "Show Answer" in problem_html)
+        self.assertEqual(show_answer_expected, "Show answer" in problem_html)
 
     def ensure_masquerade_as_group_member(self, partition_id, group_id):
         """

lms/static/sass/course/layout/_banner_cta.scss

@@ -49,7 +49,7 @@
     &.has-button {
       .banner-cta-text {
         flex: 1 1 20em;
-        max-width: 70%;
+        max-width: 100%;
       }
     }
 
@@ -61,6 +61,12 @@
     .banner-cta-button {
       align-self: start;
       flex: none;
+      margin-top: $baseline;
+
+      @media only screen and (min-width: 630px) {
+        margin-top: 0px;
+        margin-left: 10px;
+      }
 
       a {
         text-decoration: none;

lms/templates/problem.html

@@ -26,6 +26,31 @@ from openedx.core.djangolib.markup import HTML
       </div>
     % endif
 
+    <div class="problem-action-buttons-wrapper">
+      % if demand_hint_possible:
+      <span class="problem-action-button-wrapper">
+          <button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}>${_('Hint')}</button>
+      </span>
+      % endif
+      % if save_button:
+      <span class="problem-action-button-wrapper">
+          <button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
+              <span aria-hidden="true">${_('Save')}</span>
+              <span class="sr">${_("Save your answer")}</span>
+          </button>
+      </span>
+      % endif
+      % if reset_button:
+      <span class="problem-action-button-wrapper">
+          <button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
+      </span>
+      % endif
+      % if answer_available:
+      <span class="problem-action-button-wrapper">
+          <button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="show-label">${_('Show answer')}</span></button>
+      </span>
+      % endif
+    </div>
     <div class="submit-attempt-container">
       <button type="button" class="submit btn-brand" data-submitting="${ submit_button_submitting }" data-value="${ submit_button }" data-should-enable-submit-button="${ should_enable_submit_button }" aria-describedby="submission_feedback_${short_id}" ${'' if should_enable_submit_button else 'disabled'}>
           <span class="submit-label">${ submit_button }</span>
@@ -33,28 +58,30 @@ from openedx.core.djangolib.markup import HTML
 
       % if submit_disabled_cta:
         % if submit_disabled_cta.get('event_data'):
-          <button class="submit-cta-link-button btn-brand" onclick="emit_event(${submit_disabled_cta['event_data']})">${submit_disabled_cta['link_name']}
-            <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
-              <span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
-                  class="fa fa-info-circle fa-lg" aria-hidden="true">
-              </span>
-            </span>
-            <span class="sr">(${submit_disabled_cta['description']})</span>
+          <button class="submit-cta-link-button btn-default btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})">
+            ${submit_disabled_cta['link_name']}
           </button>
+          <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
+            <span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
+              class="fa fa-info-circle fa-lg" aria-hidden="true">
+            </span>
+          </span>
+          <span class="sr">(${submit_disabled_cta['description']})</span>
         % else:
             <form class="submit-cta" method="post" action="${submit_disabled_cta['link']}">
               <input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
               % for form_name, form_value in submit_disabled_cta['form_values'].items():
                   <input type="hidden" name="${form_name}" value="${form_value}">
               % endfor
-              <button class="submit-cta-link-button btn-brand">${submit_disabled_cta['link_name']}
-                <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
-                  <span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
-                      class="fa fa-info-circle fa-lg" aria-hidden="true">
-                  </span>
-                </span>
-                <span class="sr">(${submit_disabled_cta['description']})</span>
+              <button class="submit-cta-link-button btn-default btn-small">
+                ${submit_disabled_cta['link_name']}
               </button>
+              <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
+                <span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
+                  class="fa fa-info-circle fa-lg" aria-hidden="true">
+                </span>
+              </span>
+              <span class="sr">(${submit_disabled_cta['description']})</span>
             </form>
         % endif
       % endif
@@ -65,32 +92,6 @@ from openedx.core.djangolib.markup import HTML
         <span class="sr">${_("Some problems have options such as save, reset, hints, or show answer. These options follow the Submit button.")}</span>
       </div>
     </div>
-    <div class="problem-action-buttons-wrapper">
-      % if demand_hint_possible:
-      <span class="problem-action-button-wrapper">
-          <button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}><span class="icon fa fa-question" aria-hidden="true"></span>${_('Hint')}</button>
-      </span>
-      % endif
-      % if save_button:
-      <span class="problem-action-button-wrapper">
-          <button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
-              <span class="icon fa fa-floppy-o" aria-hidden="true"></span>
-              <span aria-hidden="true">${_('Save')}</span>
-              <span class="sr">${_("Save your answer")}</span>
-          </button>
-      </span>
-      % endif
-      % if reset_button:
-      <span class="problem-action-button-wrapper">
-          <button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span class="icon fa fa-refresh" aria-hidden="true"></span><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
-      </span>
-      % endif
-      % if answer_available:
-      <span class="problem-action-button-wrapper">
-          <button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="icon fa fa-info-circle" aria-hidden="true"></span><span class="show-label">${_('Show Answer')}</span></button>
-      </span>
-      % endif
-    </div>
   </div>
     <%include file="problem_notifications.html" args="
       notification_type='warning',