From e78654f99df3c4f8c7386d5bbd3d4f9dc15589c4 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 28 Oct 2013 14:58:08 -0400
Subject: [PATCH] LMS: revises verified track upgrade UI on dashboard

---
 lms/static/sass/multicourse/_dashboard.scss   | 96 ++++++++++++++-----
 lms/templates/dashboard.html                  |  8 ++
 .../dashboard/dashboard_course_listing.html   | 33 ++++---
 3 files changed, 101 insertions(+), 36 deletions(-)

diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 1e284c7b1c..47582dd538 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -500,6 +500,13 @@
         }
       }
 
+      .actions {
+        @include clearfix;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
       .message-title,
       .message-copy .title {
         @extend %t-title5;
@@ -513,47 +520,97 @@
         margin: 0;
       }
 
-      // CASE: has actions
-      &.has-actions {
-        @include clearfix();
+      // CASE: expandable
+      &.is-expandable {
 
-        .message-copy {
-          float: left;
-          width: 50%;
-          margin-right: 5%;
+        .wrapper-tip {
+
+          .message-title, .message-copy {
+            @include transition(color 0.25s ease-in-out 0);
+            margin-bottom: 0;
+          }
+
+          // STATE: hover
+          &:hover {
+            cursor: pointer;
+
+            .message-title, .message-copy {
+              color: $link-color;
+            }
+          }
         }
 
-        .message-actions {
-          @extend %ui-no-list;
-          float: right;
-          width: 40%;
-          text-align: right;
+        .wrapper-extended {
+          @include transition(opacity 0.25s ease-in-out 0);
+          display: none;
+          opacity: 0.0;
+        }
+
+        // STATE: is expanded
+        &.is-expanded {
+
+          .wrapper-extended {
+            display: block;
+            opacity: 1.0;
+          }
         }
       }
     }
 
     // TYPE: upsell
     .message-upsell {
-      background: $verified-color-lvl5;
+
+      .wrapper-tip {
+        @include clearfix();
+
+        .message-title {
+          float: left;
+        }
+
+        .message-copy {
+          float: right;
+        }
+      }
+
+      .wrapper-extended {
+        padding: ($baseline/2) 0;
+
+        .message-copy {
+          margin-bottom: $baseline;
+        }
+      }
 
       .action-upgrade {
         @extend %btn-primary-green;
         @include clearfix();
+        position: relative;
+        left: ($baseline/2);
+        padding: 8px $baseline 8px ($baseline*2);
+
+        .deco-graphic {
+          position: absolute;
+          top: -($baseline/4);
+          left: -($baseline*0.75);
+          width: ($baseline*2);
+        }
 
         span {
           color: $white; // nasty but needed override for poor <span> styling
         }
 
+        .copy, .copy-sub {
+          display: inline-block;
+          vertical-align: middle;
+        }
+
         .copy {
           @extend %t-action3;
           @extend %t-weight4;
-          display: block;
-          margin-bottom: ($baseline/4);
+          margin-right: $baseline;
         }
 
         .copy-sub {
           @extend %t-action4;
-          display: block;
           opacity: 0.875;
         }
       }
@@ -565,8 +622,7 @@
       border-color: #ccc;
 
       .message-copy {
-        font-family: $sans-serif;
-        font-size: 13px;
+        @extend %t-copy-sub1;
         margin: 0;
 
         .grade-value {
@@ -576,10 +632,6 @@
       }
 
       .actions {
-         @include clearfix;
-        list-style: none;
-        margin: 0;
-        padding: 0;
 
         .action {
           float: left;
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
index 6b9981ced5..3310451c94 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -14,6 +14,14 @@
   <script type="text/javascript">
   (function() {
 
+    $('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
+
+    function toggleExpandMessage(e) {
+        (e).preventDefault();
+
+        $(this).closest('.message.is-expandable').toggleClass('is-expanded');
+    }
+
     $(".email-settings").click(function(event) {
       $("#email_settings_course_id").val( $(event.target).data("course-id") );
       $("#email_settings_course_number").text( $(event.target).data("course-number") );
diff --git a/lms/templates/dashboard/dashboard_course_listing.html b/lms/templates/dashboard/dashboard_course_listing.html
index dd83347275..7e3fbaaf18 100644
--- a/lms/templates/dashboard/dashboard_course_listing.html
+++ b/lms/templates/dashboard/dashboard_course_listing.html
@@ -31,7 +31,7 @@
     % if enrollment.mode == "verified":
       <span class="sts-enrollment">
         <span class="label">${_("Enrolled as: ")}</span>
-        <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge">
+        <img class="deco-graphic" src="${static.url('images/vcert-ribbon-s.png')}" alt="ID Verified Ribbon/Badge" />
         <span class="sts-enrollment-value">${_("ID Verified")}</span>
       </span>
     % endif
@@ -109,21 +109,26 @@
       % endif
 
       %if course_mode_info['show_upsell']:
-        <div class="message message-upsell has-actions is-shown">
-            <div class="message-copy">
-              <h4 class="title">${_("Challenge Yourself!")}</h4>
-              <p class="copy">${_("Register for the {a_start} verified certificate {a_end} track").format(a_start='<a href="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), a_end="</a>")}</p>
+        <div class="message message-upsell has-actions is-expandable is-shown">
+
+            <div class="wrapper-tip">
+              <h4 class="message-title">${_("Challenge Yourself!")}</h4>
+              <p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
             </div>
 
-            <ul class="message-actions">
-              <li class="action-item">
-                <a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">
-                  <span class="wrapper-copy">
-                    <span class="copy">${_("Upgrade to Verified Track")}</span>
-                  </span>
-                </a>
-              </li>
-            </ul>
+            <div class="wrapper-extended">
+                <p class="message-copy">${_("Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Learn more about the  {a_start} verified certificate {a_end} track").format(a_start='<a href="{}">'.format(marketing_link('WHAT_IS_VERIFIED_CERT')), a_end="</a>")}</p>
+
+              <ul class="actions message-actions">
+                <li class="action-item">
+                  <a class="action action-upgrade" href="${reverse('course_modes_choose', kwargs={'course_id': course.id})}?upgrade=True">
+                    <span class="wrapper-copy">
+                      <span class="copy">${_("Upgrade to Verified Track")}</span>
+                    </span>
+                  </a>
+                </li>
+              </ul>
+            </div>
         </div>
       %endif