e-commerce UI suggested changes

lms/static/sass/course/instructor/_instructor_2.scss

@@ -1130,6 +1130,7 @@ input[name="subject"] {
   h2{
     height: 26px;
     line-height: 26px;
+    padding-left: 25px;
     span{
       float: right;
       font-size: 16px;

lms/templates/instructor/instructor_dashboard_2/e-commerce.html

@@ -3,10 +3,12 @@
 <%include file="add_coupon_modal.html" args="section_data=section_data" />
 <%include file="edit_coupon_modal.html" args="section_data=section_data" />
 <%include file="set_course_mode_price_modal.html" args="section_data=section_data" />
-
 <div class="ecommerce-wrapper">
    <h3 class="coupon-errors" id="code-error"></h3>
+   <div id = "accordion">
+      <div class="wrap">
          <h2>Registration Codes</h2>
+         <div>
             <p>Enter the transaction group name and number of registration codes that you want to generate. Click to generate a CSV :</p>
             <p>
             <form action="${ section_data['generate_registration_code_csv_url'] }" id="course_codes_number" method="post">
@@ -16,7 +18,6 @@
                <input type="submit" name="generate-registration-codes-csv" value="${_("Generate Registration Codes")}" data-csv="true">
             </form>
             </p>
-
             <p>Click to generate a CSV file of all Course Registrations Codes:</p>
             <p>
             <form action="${ section_data['get_registration_code_csv_url'] }" id="download_registration_codes" method="post">
@@ -25,7 +26,6 @@
                <input type="submit" name="list-registration-codes-csv" value="${_("Download Registration Codes")}" data-csv="true">
             </form>
             </p>
-
             <p>Click to generate a CSV file of all Active Course Registrations Codes:</p>
             <p>
             <form action="${ section_data['active_registration_code_csv_url'] }" id="active_registration_codes" method="post">
@@ -34,7 +34,6 @@
                <input type="submit" name="active-registration-codes-csv" value="${_("Active Registration Codes")}" data-csv="true">
             </form>
             </p>
-
             <p>Click to generate a CSV file of all Spent Course Registrations Codes:</p>
             <p>
             <form action="${ section_data['spent_registration_code_csv_url'] }" id="spent_registration_codes" method="post">
@@ -43,32 +42,40 @@
                <input type="submit" name="spent-registration-codes-csv" value="${_("Spent Registration Codes")}" data-csv="true">
             </form>
             </p>
-  <hr>
+         </div>
+      </div>
+      <!-- end wrap -->
+      <div class="wrap">
          <h2>${_("Course Price")}</h2>
+         <div>
             <span class="tip">${_("Course Price: ")}<span>$${section_data['course_price']}</span>
             %if section_data['access']['finance_admin'] is True:
             <a id="course_price_link" href="#set-course-mode-price-modal" rel="leanModal" class="add blue-button">+ Set Price</a>
             %endif
             </span>
-  <hr>
+         </div>
+      </div>
+      <!-- end wrap -->
       %if section_data['access']['finance_admin'] is True:
+      <div class="wrap">
          <h2>${_("Transactions")}</h2>
+         <div>
             %if section_data['total_amount'] is not None:
             <span>${_("Total Amount: ")}<span>$${section_data['total_amount']}</span></span>
             %endif
-
             <p>${_("Click to generate a CSV file for all purchase transactions in this course")}</p>
-
             <p><input type="button" name="list-purchase-transaction-csv" value="${_("Download All e-Commerce Purchases")}" data-endpoint="${ section_data['get_purchase_transaction_url'] }" data-csv="true"></p>
+         </div>
+      </div>
+      <!-- end wrap -->
       %endif
-
+      <div class="wrap">
          <h2>${_("Coupons List")}</h2>
-
+         <div>
             <h3 class="coupon-errors" id="coupon-error"></h3>
             <span class="tip">${_("Coupons Information")} <a id="add_coupon_link" href="#add-coupon-modal" rel="leanModal"
                class="add blue-button">${_("+ Add Coupon")}</a></span>
-</div>
-<div class="wrapper-content wrapper">
+            <div class="wrapper-content wrapper">
                <section class="content">
                   %if len(section_data['coupons']):
                   <table class="coupons-table">
@@ -82,7 +89,6 @@
                            <th class="c_action">${_("Actions")}</th>
                         </tr>
                      </thead>
-
                      <tbody>
                         %for coupon in section_data['coupons']:
                         %if coupon.is_active == False:
@@ -91,7 +97,6 @@
                         <tr class="coupons-items">
                            %endif
                            <td>${coupon.code}</td>
-
                            <td>${coupon.description}</td>
                            <td>${coupon.course_id.to_deprecated_string()}</td>
                            <td>${coupon.percentage_discount}</td>
@@ -107,11 +112,35 @@
                   <a id="edit-modal-trigger" href="#edit-coupon-modal" rel="leanModal"></a>
                   %endif
                </section>
+            </div>
+         </div>
+      </div>
+      <!-- end wrap -->
+   </div>
 </div>
-
-
 <script>
    $(function () {
+   
+       var icons = {
+           header: "ui-icon-circle-arrow-e",
+           activeHeader: "ui-icon-circle-arrow-s"
+       };
+       var act = 0;
+       $("#accordion").accordion(
+               {
+                   heightStyle: 'content',
+                   activate: function(event, ui) {
+                    var active = jQuery("#accordion").accordion('option', 'active');
+                    $.cookie('saved_index', null);
+                    $.cookie('saved_index', active);
+                   },
+                   animate: 400,
+                   header: "> div.wrap >h2",
+                   icons:icons,
+                   active:isNaN(parseInt($.cookie('saved_index'))) ? 0 : parseInt($.cookie('saved_index')),
+                   collapsible: true
+        });
+   
      $('a[rel*=leanModal]').leanModal();
      $.each($("a.edit-right"), function () {
        if ($(this).parent().parent('tr').hasClass('inactive_coupon')) {