Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 751ed17

Browse files
berinhardewdurbin
berinhard
and
ewdurbin
authored
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 <[email protected]>
1 parent db17814 commit 751ed17

4 files changed

Lines changed: 82 additions & 27 deletions

File tree

‎static/js/sponsors/applicationForm.js‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const DESKTOP_WIDTH_LIMIT = 1200;
2+
13
$(document).ready(function(){
24
const SELECTORS = {
35
packageInput: function() { return $("input[name=package]"); },
@@ -7,11 +9,18 @@ $(document).ready(function(){
79
getBenefitInput: function(benefitId) { return SELECTORS.benefitsInputs().filter('[value=' + benefitId + ']'); },
810
getSelectedBenefits: function() { return SELECTORS.benefitsInputs().filter(":checked"); },
911
tickImages: function() { return $(`.benefit-within-package img`) },
12+
sectionToggleBtns: function() { return $(".toggle_btn")}
1013
}
1114

1215
const initialPackage = $("input[name=package]:checked").val();
1316
if (initialPackage && initialPackage.length > 0) mobileUpdate(initialPackage);
1417

18+
SELECTORS.sectionToggleBtns().click(function(){
19+
const section = $(this).data('section');
20+
const className = ".section-" + section + "-content";
21+
$(className).toggle();
22+
});
23+
1524
SELECTORS.packageInput().click(function(){
1625
let package = this.value;
1726
if (package.length == 0) return;
@@ -35,6 +44,7 @@ $(document).ready(function(){
3544
});
3645

3746
// update package benefits display
47+
$(`#pkg_container_${package}`).addClass("selected");
3848
$(`.package-${package}-benefit`).addClass("selected");
3949
$(`.package-${package}-benefit input`).prop("disabled", false);
4050

@@ -54,10 +64,10 @@ $(document).ready(function(){
5464

5565

5666
function mobileUpdate(packageId) {
57-
// Mobile version lists a single column to controle the selected
58-
// benefits and potential add-ons. So, this part of the code
59-
// controls this logic.
60-
const mobileVersion = $(".benefit-within-package:hidden").length > 0;
67+
const width = window.innerWidth
68+
|| document.documentElement.clientWidth
69+
|| document.body.clientWidth;
70+
const mobileVersion = width <= DESKTOP_WIDTH_LIMIT;
6171
if (!mobileVersion) return;
6272
$(".benefit-within-package").hide(); // hide all ticks and potential add-ons inputs
6373
$(`div[data-package-reference=${packageId}]`).show() // display only package's ones
@@ -102,5 +112,10 @@ function benefitUpdate(benefitId, packageId) {
102112
// Callback function when user selects a package;
103113
function updatePackageInput(packageId){
104114
const packageInput = document.getElementById(`id_package_${ packageId }`);
115+
116+
// no need to update if package is already selected
117+
const container = packageInput.parentElement;
118+
if (container.classList.contains("selected")) return;
119+
105120
packageInput.click();
106121
}

‎static/sass/style.css‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3745,6 +3745,9 @@ span.highlighted {
37453745
line-height: 28px;
37463746
color: #444444;
37473747
margin-top: 1em; }
3748+
@media (max-width: 1320px) {
3749+
#select_sponsorship_benefits_container h4 {
3750+
font-size: 16px; } }
37483751
#select_sponsorship_benefits_container p {
37493752
font-size: 18px;
37503753
line-height: 28px;
@@ -3801,8 +3804,8 @@ span.highlighted {
38013804
border-bottom: 1px solid #e6e8ea; }
38023805
#select_sponsorship_benefits_container #benefitsTable .row .col:not(first-child) {
38033806
width: 10%;
3804-
padding: 0 1em;
3805-
text-align: center; }
3807+
text-align: center;
3808+
margin: 0 0.25em; }
38063809
@media (max-width: 1200px) {
38073810
#select_sponsorship_benefits_container #benefitsTable .row .col:not(first-child) {
38083811
width: 30%; } }
@@ -3814,34 +3817,45 @@ span.highlighted {
38143817
width: 70%; } }
38153818
#select_sponsorship_benefits_container #benefitsTable .separator {
38163819
flex-shrink: 0;
3817-
justify-content: flex-start;
3818-
border-bottom: 3px solid #ffd343; }
3820+
border-bottom: 3px solid #ffd343;
3821+
display: block; }
38193822
#select_sponsorship_benefits_container #benefitsTable .separator h4 {
38203823
font-size: 23px;
38213824
line-height: 29px;
3822-
font-weight: 700; }
3825+
font-weight: 700;
3826+
float: left; }
3827+
#select_sponsorship_benefits_container #benefitsTable .separator .toggle_btn {
3828+
margin-top: 2em;
3829+
float: right;
3830+
cursor: pointer;
3831+
text-decoration: underline dotted; }
38233832
#select_sponsorship_benefits_container #benefitsTable .no-border {
38243833
border-bottom: none; }
38253834
#select_sponsorship_benefits_container #benefitsTable .package-input {
3826-
cursor: pointer; }
3827-
#select_sponsorship_benefits_container #benefitsTable .package-input .package-price {
3828-
padding-bottom: 0.5em; }
3835+
cursor: pointer;
3836+
padding-bottom: 0.5em !important;
3837+
border: 1px solid #caccce;
3838+
border-radius: 15px; }
38293839
#select_sponsorship_benefits_container #benefitsTable .package-input .custom-fee {
38303840
font-size: 75%;
38313841
display: none; }
3842+
#select_sponsorship_benefits_container #benefitsTable .package-input input {
3843+
display: none; }
38323844
#select_sponsorship_benefits_container #benefitsTable .package-input h4 {
38333845
transform: rotateY(35deg); }
38343846
#select_sponsorship_benefits_container #benefitsTable .selected {
38353847
background-color: #e9f1f8;
3836-
border-radius: 15px;
3837-
padding: 0.5em 1em !important; }
3848+
border-radius: 15px; }
38383849
#select_sponsorship_benefits_container #benefitsTable .selected img {
3850+
padding: 0.5em 1em;
38393851
cursor: pointer; }
38403852
@media (max-width: 1200px) {
38413853
#select_sponsorship_benefits_container #benefitsTable .benefit-within-package {
38423854
display: none; }
38433855
#select_sponsorship_benefits_container #benefitsTable .selected {
3844-
background-color: transparent; } }
3856+
background-color: transparent; }
3857+
#select_sponsorship_benefits_container #benefitsTable .package-input.selected {
3858+
background-color: #e9f1f8; } }
38453859
#select_sponsorship_benefits_container .custom-benefits {
38463860
margin: 2em 0;
38473861
padding: 0 2em; }
@@ -3918,11 +3932,14 @@ span.highlighted {
39183932
#select_sponsorship_benefits_container #package-selection .package-input {
39193933
/* The internal disposition of the package name, price and checkbox for the mobile version differs
39203934
from the desktop one. To avoid having 2 type of HTML structures, we're rearranging how the
3921-
items are being displayed using the order property.*/ }
3935+
items are being displayed using the order property.*/
3936+
margin: 0.25rem 0 !important; }
39223937
#select_sponsorship_benefits_container #package-selection .package-input h4 {
3923-
order: 2; }
3938+
order: 2;
3939+
padding-left: 1em; }
39243940
#select_sponsorship_benefits_container #package-selection .package-input span {
3925-
order: 3; }
3941+
order: 3;
3942+
padding-right: 1em; }
39263943
#select_sponsorship_benefits_container #package-selection .package-input input {
39273944
order: 1; } }
39283945
@media (max-width: 1200px) and (max-width: 640px) {

‎static/sass/style.scss‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2586,6 +2586,7 @@ $breakpoint-desktop: 1200px;
25862586
line-height: 28px;
25872587
color: #444444;
25882588
margin-top: 1em;
2589+
@media (max-width: $breakpoint-desktop*1.1) { font-size: 16px; }
25892590
}
25902591

25912592
p {
@@ -2675,8 +2676,8 @@ $breakpoint-desktop: 1200px;
26752676

26762677
.col:not(first-child) {
26772678
width: 10%;
2678-
padding: 0 1em;
26792679
text-align: center;
2680+
margin: 0 0.25em;
26802681

26812682
@media (max-width: $breakpoint-desktop) {width: 30%};
26822683
}
@@ -2691,13 +2692,21 @@ $breakpoint-desktop: 1200px;
26912692

26922693
.separator {
26932694
flex-shrink: 0;
2694-
justify-content: flex-start;
26952695
border-bottom: 3px solid #FFD343;
2696+
display: block;
26962697

26972698
h4 {
26982699
font-size: 23px;
26992700
line-height: 29px;
27002701
font-weight: 700;
2702+
float: left;
2703+
}
2704+
2705+
.toggle_btn {
2706+
margin-top: 2em;
2707+
float: right;
2708+
cursor: pointer;
2709+
text-decoration: underline dotted;
27012710
}
27022711
}
27032712

@@ -2706,28 +2715,32 @@ $breakpoint-desktop: 1200px;
27062715
}
27072716

27082717
.package-input {
2709-
.package-price {
2710-
padding-bottom: 0.5em;
2711-
}
27122718

27132719
.custom-fee {
27142720
font-size: 75%;
27152721
display: none;
27162722
}
27172723

2724+
input {
2725+
display: none;
2726+
}
2727+
27182728
h4 {
27192729
transform: rotateY(35deg);
27202730
}
27212731

27222732
cursor: pointer;
2733+
padding-bottom: 0.5em !important;
2734+
border: 1px solid $default-border-color;
2735+
border-radius: 15px;
27232736
}
27242737

27252738
.selected {
27262739
background-color: lighten($blue, 50%);
27272740
border-radius: 15px;
2728-
padding: 0.5em 1em !important;
27292741

27302742
img {
2743+
padding: 0.5em 1em;
27312744
cursor: pointer;
27322745
}
27332746
}
@@ -2736,6 +2749,10 @@ $breakpoint-desktop: 1200px;
27362749
@media (max-width: $breakpoint-desktop) {
27372750
.benefit-within-package {display: none;}
27382751
.selected {background-color: transparent;}
2752+
2753+
.package-input.selected {
2754+
background-color: lighten($blue, 50%);
2755+
}
27392756
};
27402757
}
27412758

@@ -2859,13 +2876,16 @@ $breakpoint-desktop: 1200px;
28592876
items are being displayed using the order property.*/
28602877
h4 { // package name
28612878
order: 2;
2879+
padding-left: 1em;
28622880
}
28632881
span { // package fee
28642882
order: 3;
2883+
padding-right: 1em;
28652884
}
28662885
input { // input
28672886
order: 1;
28682887
}
2888+
margin: 0.25rem 0 !important;
28692889
}
28702890
}
28712891
}

‎templates/sponsors/sponsorship_benefits_form.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ <h4 class="col">Select a Sponsorship Package</h4>
4242
{% endif %}
4343
</span>
4444
{% for package in form.fields.package.queryset %}
45-
<div class="col col-items package-input" data-package-id="{{ package.id}}" onclick="updatePackageInput({{forloop.counter0}})">
45+
<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}})">
4646
<h4>{{ package.name|upper }}</h4>
4747
<span class="package-price">${{ package.sponsorship_amount|intcomma }}<span class="custom-fee-{{ package.id }} custom-fee">*</span></span>
4848
<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>
5353
</div>
5454

5555
{% for field in form.benefits_programs %}
56+
{% with forloop.counter as sectionNum %}
5657
<div class="row separator">
57-
<h4>{{ field.label }}</h4>
58+
<h4>{{ field.label }}</h4>
59+
<small class="toggle_btn" data-section={{ sectionNum }}>Collapse/expand section</small>
5860
</div>
5961

6062
<!-- Benefits listing (as rows) --!>
6163
{% for benefit in field.field.queryset %}
62-
<div class="row {% if forloop.last %}no-border{% endif %}">
64+
<div class="row {% if forloop.last %}no-border{% endif %} section-{{ sectionNum }}-content section-content">
6365
<div class="col benefit">
6466
<h4 class="benefit-title">{{ benefit.name }}</h4>
6567
<span class="benefit-description">{{ benefit.description }}</span>
@@ -122,6 +124,7 @@ <h4 class="benefit-title">{{ benefit.name }}</h4>
122124
</div>
123125
{% endfor %}
124126

127+
{% endwith %}
125128
{% endfor %}
126129
</div>
127130

0 commit comments

Comments
 (0)