Improvements to sponsorship form layout (#1956)

* Update package selection to look more like a clickable button

* Make the new button style look nice on mobile as well

* Enable user to expand or collapse benefits section

* Expand all sections if package choice changes

* Increase min width to avoid package titles overlapping their boxes

* Refactor how the JS code checks if it's under mobile version

* Keep benefits sections collapsed when the user change package option

* restore desktop breakpoing to 1200px

* Roll back update on CSS desktop widths

* Add missing hunk

Co-authored-by: Ee Durbin <ewdurbin@gmail.com>

Author: berinhard

static/js/sponsors/applicationForm.js

@@ -1,3 +1,5 @@
+const DESKTOP_WIDTH_LIMIT = 1200;
+
 $(document).ready(function(){
   const SELECTORS = {
     packageInput:  function() { return $("input[name=package]"); },
@@ -7,11 +9,18 @@ $(document).ready(function(){
     getBenefitInput: function(benefitId) { return SELECTORS.benefitsInputs().filter('[value=' + benefitId + ']'); },
     getSelectedBenefits: function() { return SELECTORS.benefitsInputs().filter(":checked"); },
     tickImages: function() { return $(`.benefit-within-package img`) },
+    sectionToggleBtns: function() { return $(".toggle_btn")}
   }
 
   const initialPackage = $("input[name=package]:checked").val();
   if (initialPackage && initialPackage.length > 0) mobileUpdate(initialPackage);
 
+  SELECTORS.sectionToggleBtns().click(function(){
+    const section = $(this).data('section');
+    const className = ".section-" + section + "-content";
+    $(className).toggle();
+  });
+
   SELECTORS.packageInput().click(function(){
     let package = this.value;
     if (package.length == 0) return;
@@ -35,6 +44,7 @@ $(document).ready(function(){
     });
 
     // update package benefits display
+    $(`#pkg_container_${package}`).addClass("selected");
     $(`.package-${package}-benefit`).addClass("selected");
     $(`.package-${package}-benefit input`).prop("disabled", false);
 
@@ -54,10 +64,10 @@ $(document).ready(function(){
 
 
 function mobileUpdate(packageId) {
-  // Mobile version lists a single column to controle the selected
-  // benefits and potential add-ons. So, this part of the code
-  // controls this logic.
-  const mobileVersion = $(".benefit-within-package:hidden").length > 0;
+  const width = window.innerWidth
+    || document.documentElement.clientWidth
+    || document.body.clientWidth;
+  const mobileVersion = width <= DESKTOP_WIDTH_LIMIT;
   if (!mobileVersion) return;
   $(".benefit-within-package").hide();  // hide all ticks and potential add-ons inputs
   $(`div[data-package-reference=${packageId}]`).show()  // display only package's ones
@@ -102,5 +112,10 @@ function benefitUpdate(benefitId, packageId) {
 // Callback function when user selects a package;
 function updatePackageInput(packageId){
   const packageInput = document.getElementById(`id_package_${ packageId }`);
+
+  // no need to update if package is already selected
+  const container = packageInput.parentElement;
+  if (container.classList.contains("selected")) return;
+
   packageInput.click();
 }

static/sass/style.css

@@ -3745,6 +3745,9 @@ span.highlighted {
   line-height: 28px;
   color: #444444;
   margin-top: 1em; }
+  @media (max-width: 1320px) {
+    #select_sponsorship_benefits_container h4 {
+      font-size: 16px; } }
 #select_sponsorship_benefits_container p {
   font-size: 18px;
   line-height: 28px;
@@ -3801,8 +3804,8 @@ span.highlighted {
     border-bottom: 1px solid #e6e8ea; }
     #select_sponsorship_benefits_container #benefitsTable .row .col:not(first-child) {
       width: 10%;
-      padding: 0 1em;
-      text-align: center; }
+      text-align: center;
+      margin: 0 0.25em; }
       @media (max-width: 1200px) {
         #select_sponsorship_benefits_container #benefitsTable .row .col:not(first-child) {
           width: 30%; } }
@@ -3814,34 +3817,45 @@ span.highlighted {
           width: 70%; } }
   #select_sponsorship_benefits_container #benefitsTable .separator {
     flex-shrink: 0;
-    justify-content: flex-start;
-    border-bottom: 3px solid #ffd343; }
+    border-bottom: 3px solid #ffd343;
+    display: block; }
     #select_sponsorship_benefits_container #benefitsTable .separator h4 {
       font-size: 23px;
       line-height: 29px;
-      font-weight: 700; }
+      font-weight: 700;
+      float: left; }
+    #select_sponsorship_benefits_container #benefitsTable .separator .toggle_btn {
+      margin-top: 2em;
+      float: right;
+      cursor: pointer;
+      text-decoration: underline dotted; }
   #select_sponsorship_benefits_container #benefitsTable .no-border {
     border-bottom: none; }
   #select_sponsorship_benefits_container #benefitsTable .package-input {
-    cursor: pointer; }
-    #select_sponsorship_benefits_container #benefitsTable .package-input .package-price {
-      padding-bottom: 0.5em; }
+    cursor: pointer;
+    padding-bottom: 0.5em !important;
+    border: 1px solid #caccce;
+    border-radius: 15px; }
     #select_sponsorship_benefits_container #benefitsTable .package-input .custom-fee {
       font-size: 75%;
       display: none; }
+    #select_sponsorship_benefits_container #benefitsTable .package-input input {
+      display: none; }
     #select_sponsorship_benefits_container #benefitsTable .package-input h4 {
       transform: rotateY(35deg); }
   #select_sponsorship_benefits_container #benefitsTable .selected {
     background-color: #e9f1f8;
-    border-radius: 15px;
-    padding: 0.5em 1em !important; }
+    border-radius: 15px; }
     #select_sponsorship_benefits_container #benefitsTable .selected img {
+      padding: 0.5em 1em;
       cursor: pointer; }
   @media (max-width: 1200px) {
     #select_sponsorship_benefits_container #benefitsTable .benefit-within-package {
       display: none; }
     #select_sponsorship_benefits_container #benefitsTable .selected {
-      background-color: transparent; } }
+      background-color: transparent; }
+    #select_sponsorship_benefits_container #benefitsTable .package-input.selected {
+      background-color: #e9f1f8; } }
 #select_sponsorship_benefits_container .custom-benefits {
   margin: 2em 0;
   padding: 0 2em; }
@@ -3918,11 +3932,14 @@ span.highlighted {
   #select_sponsorship_benefits_container #package-selection .package-input {
     /* The internal disposition of the package name, price and checkbox for the mobile version differs
      from the desktop one. To avoid having 2 type of HTML structures, we're rearranging how the
-     items are being displayed using the order property.*/ }
+     items are being displayed using the order property.*/
+    margin: 0.25rem 0 !important; }
     #select_sponsorship_benefits_container #package-selection .package-input h4 {
-      order: 2; }
+      order: 2;
+      padding-left: 1em; }
     #select_sponsorship_benefits_container #package-selection .package-input span {
-      order: 3; }
+      order: 3;
+      padding-right: 1em; }
     #select_sponsorship_benefits_container #package-selection .package-input input {
       order: 1; } }
     @media (max-width: 1200px) and (max-width: 640px) {

static/sass/style.scss

@@ -2586,6 +2586,7 @@ $breakpoint-desktop: 1200px;
       line-height: 28px;
       color: #444444;
       margin-top: 1em;
+      @media (max-width: $breakpoint-desktop*1.1) { font-size: 16px; }
     }
 
     p {
@@ -2675,8 +2676,8 @@ $breakpoint-desktop: 1200px;
 
       .col:not(first-child) {
         width: 10%;
-        padding: 0 1em;
         text-align: center;
+        margin: 0 0.25em;
 
         @media (max-width: $breakpoint-desktop) {width: 30%};
       }
@@ -2691,13 +2692,21 @@ $breakpoint-desktop: 1200px;
 
     .separator {
       flex-shrink: 0;
-      justify-content: flex-start;
       border-bottom: 3px solid #FFD343;
+      display: block;
 
       h4 {
         font-size: 23px;
         line-height: 29px;
         font-weight: 700;
+        float: left;
+      }
+
+      .toggle_btn {
+        margin-top: 2em;
+        float: right;
+        cursor: pointer;
+        text-decoration: underline dotted;
       }
     }
 
@@ -2706,28 +2715,32 @@ $breakpoint-desktop: 1200px;
     }
 
     .package-input {
-      .package-price {
-        padding-bottom: 0.5em;
-      }
 
       .custom-fee {
         font-size: 75%;
         display: none;
       }
 
+      input {
+        display: none;
+      }
+
       h4 {
         transform: rotateY(35deg);
       }
 
       cursor: pointer;
+      padding-bottom: 0.5em !important;
+      border: 1px solid $default-border-color;
+      border-radius: 15px;
     }
 
     .selected {
       background-color: lighten($blue, 50%);
       border-radius: 15px;
-      padding: 0.5em 1em !important;
 
       img {
+        padding: 0.5em 1em;
         cursor: pointer;
       }
     }
@@ -2736,6 +2749,10 @@ $breakpoint-desktop: 1200px;
     @media (max-width: $breakpoint-desktop) {
       .benefit-within-package {display: none;}
       .selected {background-color: transparent;}
+
+      .package-input.selected {
+          background-color: lighten($blue, 50%);
+      }
     };
   }
 
@@ -2859,13 +2876,16 @@ $breakpoint-desktop: 1200px;
           items are being displayed using the order property.*/
          h4 { // package name
            order: 2;
+           padding-left: 1em;
          }
          span { // package fee
            order: 3;
+           padding-right: 1em;
          }
          input { // input
            order: 1;
          }
+         margin: 0.25rem 0 !important;
       }
     }
   }

templates/sponsors/sponsorship_benefits_form.html

@@ -42,7 +42,7 @@ <h4 class="col">Select a Sponsorship Package</h4>
                {% endif %}
              </span>
              {% for package in form.fields.package.queryset %}
-             <div class="col col-items package-input" data-package-id="{{ package.id}}" onclick="updatePackageInput({{forloop.counter0}})">
+             <div id="pkg_container_{{ package.id }}" class="col col-items package-input {% if package.id == form.initial.package %}selected{% endif %}" data-package-id="{{ package.id}}" onclick="updatePackageInput({{forloop.counter0}})">
                <h4>{{ package.name|upper }}</h4>
                <span class="package-price">${{ package.sponsorship_amount|intcomma }}<span class="custom-fee-{{ package.id }} custom-fee">*</span></span>
                <input type="radio" name="package" value="{{ package.id }}" id="id_package_{{ forloop.counter0 }}" {% if package.id == form.initial.package %}checked="checked"{% endif %} data-pos={{ forloop.counter0 }} />
@@ -53,13 +53,15 @@ <h4>{{ package.name|upper }}</h4>
         </div>
 
         {% for field in form.benefits_programs %}
+        {% with forloop.counter as sectionNum %}
         <div class="row separator">
-          <h4>{{ field.label }}</h4>
+           <h4>{{ field.label }}</h4>
+           <small class="toggle_btn" data-section={{ sectionNum }}>Collapse/expand section</small>
         </div>
 
         <!-- Benefits listing (as rows) --!>
         {% for benefit in field.field.queryset %}
-        <div class="row {% if forloop.last %}no-border{% endif %}">
+        <div class="row {% if forloop.last %}no-border{% endif %} section-{{ sectionNum }}-content section-content">
           <div class="col benefit">
             <h4 class="benefit-title">{{ benefit.name }}</h4>
             <span class="benefit-description">{{ benefit.description }}</span>
@@ -122,6 +124,7 @@ <h4 class="benefit-title">{{ benefit.name }}</h4>
         </div>
         {% endfor %}
 
+        {% endwith %}
         {% endfor %}
       </div>