Skip to content

Commit 45d654f

Browse files
JacobCoffeeJacobCoffee
committed
style: add category, change layout
1 parent 0eec197 commit 45d654f

File tree

3 files changed

+43
-44
lines changed

3 files changed

+43
-44
lines changed

‎static/sass/style.css

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -396,7 +396,7 @@ form, .header-banner, .success-stories-widget .quote-from {
396396
.slides,
397397
.flex-control-nav,
398398
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} */
399-
/* FlexSlider Necessary Styles
399+
/* FlexSlider Necessary Styles
400400
.flexslider {margin: 0; padding: 0;}
401401
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping
402402
.flexslider .slides img {width: 100%; display: block;}
@@ -2350,7 +2350,7 @@ table tfoot {
23502350
/* ! ===== Success Stories landing page ===== */
23512351
.featured-success-story {
23522352
padding: 1.3125em 0;
2353-
background: center -230px no-repeat url('../img/success-glow2.png?1646853871') transparent;
2353+
background: center -230px no-repeat url('../img/success-glow2.png?1726783859') transparent;
23542354
/*blockquote*/ }
23552355
.featured-success-story img {
23562356
padding: 10px 30px; }
@@ -2881,11 +2881,10 @@ p.quote-by-organization {
28812881
background-color: #bcc2c7;
28822882
*zoom: 1;
28832883
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE6E8EA', endColorstr='#FFBCC2C7');
2884-
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNlNmU4ZWEiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2JjYzJjNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
2885-
background-size: 100%;
28862884
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #e6e8ea), color-stop(90%, #bcc2c7));
2887-
background-image: -moz-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
28882885
background-image: -webkit-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
2886+
background-image: -moz-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
2887+
background-image: -o-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
28892888
background-image: linear-gradient(#e6e8ea 10%, #bcc2c7 90%); }
28902889
.user-profile-controls + .return-link {
28912890
margin-top: -1.3125em; }
@@ -3612,7 +3611,7 @@ span.highlighted {
36123611
font-weight: bold;
36133612
font-style: normal; }
36143613

3615-
/*
3614+
/*
36163615
* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 2, 2013 10:19:24 AM America/New_York
36173616
* Adobe Source Pro Sans, Open Source License: http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1959
36183617
*/
@@ -3636,6 +3635,7 @@ span.highlighted {
36363635
src: url("../fonts/SourceSansPro-It-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/SourceSansPro-It-webfont.woff") format("woff"), url("../fonts/SourceSansPro-It-webfont.ttf") format("truetype"), url("../fonts/SourceSansPro-It-webfont.svg#source_sans_proitalic") format("svg");
36373636
font-weight: normal;
36383637
font-style: italic; }
3638+
36393639
/* ! ===== SPONSORSHIP APP ===== */
36403640
.ui-tooltip-content {
36413641
font-size: 75%; }
@@ -3686,15 +3686,14 @@ span.highlighted {
36863686
margin-top: 0.5em;
36873687
font-size: 65%;
36883688
border-color: #82b043;
3689-
color: #fff !important;
3689+
color: white !important;
36903690
background-color: #82b043;
36913691
*zoom: 1;
36923692
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFB2D287', endColorstr='#FF82B043');
3693-
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNiMmQyODciLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzgyYjA0MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
3694-
background-size: 100%;
36953693
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #b2d287), color-stop(90%, #82b043));
3696-
background-image: -moz-linear-gradient(#b2d287 10%, #82b043 90%);
36973694
background-image: -webkit-linear-gradient(#b2d287 10%, #82b043 90%);
3695+
background-image: -moz-linear-gradient(#b2d287 10%, #82b043 90%);
3696+
background-image: -o-linear-gradient(#b2d287 10%, #82b043 90%);
36983697
background-image: linear-gradient(#b2d287 10%, #82b043 90%); }
36993698
#new_sponsorship_application_container .sponsor-contacts-container .contact-form, #edit-sponsor-information .sponsor-contacts-container .contact-form {
37003699
margin-bottom: 1em; }
@@ -3906,7 +3905,7 @@ span.highlighted {
39063905
border-radius: 20px;
39073906
text-align: center; }
39083907
#select_sponsorship_benefits_container .submit-row .btn:hover, #select_sponsorship_benefits_container .submit-row .btn:focus {
3909-
background: #ffd95d;
3908+
background: #ffd95c;
39103909
text-shadow: 0 0 5px rgba(255, 211, 67, 0.2); }
39113910
@media (max-width: 1200px) {
39123911
#select_sponsorship_benefits_container .submit-row {
@@ -3924,11 +3923,7 @@ span.highlighted {
39243923
*/
39253924
flex-flow: column wrap !important; }
39263925
#select_sponsorship_benefits_container #package-selection .row .col:not(first-child) {
3927-
width: 50%; } }
3928-
@media (max-width: 1200px) and (max-width: 640px) {
3929-
#select_sponsorship_benefits_container #package-selection .row .col:not(first-child) {
3930-
width: 80%; } }
3931-
@media (max-width: 1200px) {
3926+
width: 50%; }
39323927
#select_sponsorship_benefits_container #package-selection .row .col:first-child {
39333928
width: 20%; }
39343929
#select_sponsorship_benefits_container #package-selection .col, #select_sponsorship_benefits_container #package-selection .col-items {
@@ -3949,6 +3944,9 @@ span.highlighted {
39493944
padding-right: 1em; }
39503945
#select_sponsorship_benefits_container #package-selection .package-input input {
39513946
order: 1; } }
3947+
@media (max-width: 1200px) and (max-width: 640px) {
3948+
#select_sponsorship_benefits_container #package-selection .row .col:not(first-child) {
3949+
width: 80%; } }
39523950
@media (min-width: 1200px) {
39533951
#select_sponsorship_benefits_container {
39543952
/* Destkop version have the package selection row as a fixed header after some scrolling.
@@ -3962,11 +3960,10 @@ span.highlighted {
39623960
background-color: #fcfcfc;
39633961
*zoom: 1;
39643962
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF9F9F9', endColorstr='#FFFCFCFC');
3965-
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
3966-
background-size: 100%;
39673963
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #f9f9f9), color-stop(90%, #fcfcfc));
3968-
background-image: -moz-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
39693964
background-image: -webkit-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
3965+
background-image: -moz-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
3966+
background-image: -o-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
39703967
background-image: linear-gradient(#f9f9f9 10%, #fcfcfc 90%); } }
39713968

39723969
#thank-you-container {
@@ -4049,31 +4046,34 @@ span.highlighted {
40494046
margin-top: 1rem; }
40504047
#sponsorship-detail-container .benefit-item {
40514048
display: flex;
4052-
align-items: center;
4049+
flex-direction: column;
40534050
background-color: #ffffff;
40544051
border: 1px solid #e9ecef;
40554052
border-radius: 4px;
40564053
padding: 0.75rem;
40574054
transition: background-color 0.2s ease; }
40584055
#sponsorship-detail-container .benefit-item:hover {
40594056
background-color: #f8f9fa; }
4060-
#sponsorship-detail-container .benefit-icon {
4061-
flex-shrink: 0;
4062-
margin-right: 0.75rem;
4063-
color: #28a745;
4064-
font-size: 1rem; }
40654057
#sponsorship-detail-container .benefit-content {
40664058
flex-grow: 1; }
40674059
#sponsorship-detail-container .benefit-name {
40684060
display: block;
40694061
font-weight: 500;
40704062
font-size: 0.9rem;
4071-
line-height: 1.2; }
4063+
line-height: 1.2;
4064+
margin-bottom: 0.25rem; }
40724065
#sponsorship-detail-container .benefit-description {
4073-
margin-left: 0.25rem;
40744066
color: #6c757d;
40754067
cursor: help;
40764068
font-size: 0.8rem; }
4069+
#sponsorship-detail-container .benefit-category {
4070+
display: inline-block;
4071+
background-color: #e9ecef;
4072+
color: #495057;
4073+
font-size: 0.75rem;
4074+
padding: 0.25rem 0.5rem;
4075+
border-radius: 4px;
4076+
margin-top: 0.5rem; }
40774077
@media (max-width: 768px) {
40784078
#sponsorship-detail-container .info-cards {
40794079
grid-template-columns: 1fr; }
@@ -4088,5 +4088,3 @@ span.highlighted {
40884088
font-size: 75%; }
40894089
#update-sponsorship-assets .form-actions {
40904090
margin: 0.5em 0; }
4091-
4092-
/*# sourceMappingURL=style.css.map */

‎static/sass/style.scss

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3037,7 +3037,7 @@ $breakpoint-desktop: 1200px;
30373037
text-align: right;
30383038
}
30393039

3040-
.benefits-grid {
3040+
.benefits-grid {
30413041
display: grid;
30423042
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
30433043
gap: 1rem;
@@ -3046,7 +3046,7 @@ $breakpoint-desktop: 1200px;
30463046

30473047
.benefit-item {
30483048
display: flex;
3049-
align-items: center;
3049+
flex-direction: column;
30503050
background-color: #ffffff;
30513051
border: 1px solid #e9ecef;
30523052
border-radius: 4px;
@@ -3058,13 +3058,6 @@ $breakpoint-desktop: 1200px;
30583058
background-color: #f8f9fa;
30593059
}
30603060

3061-
.benefit-icon {
3062-
flex-shrink: 0;
3063-
margin-right: 0.75rem;
3064-
color: #28a745;
3065-
font-size: 1rem;
3066-
}
3067-
30683061
.benefit-content {
30693062
flex-grow: 1;
30703063
}
@@ -3074,15 +3067,25 @@ $breakpoint-desktop: 1200px;
30743067
font-weight: 500;
30753068
font-size: 0.9rem;
30763069
line-height: 1.2;
3070+
margin-bottom: 0.25rem;
30773071
}
30783072

30793073
.benefit-description {
3080-
margin-left: 0.25rem;
30813074
color: #6c757d;
30823075
cursor: help;
30833076
font-size: 0.8rem;
30843077
}
30853078

3079+
.benefit-category {
3080+
display: inline-block;
3081+
background-color: #e9ecef;
3082+
color: #495057;
3083+
font-size: 0.75rem;
3084+
padding: 0.25rem 0.5rem;
3085+
border-radius: 4px;
3086+
margin-top: 0.5rem;
3087+
}
3088+
30863089
@media (max-width: 768px) {
30873090
.info-cards {
30883091
grid-template-columns: 1fr;

‎templates/users/sponsorship_detail.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,16 +110,14 @@ <h3>Sponsorship Benefits</h3>
110110
<div class="benefits-grid">
111111
{% for benefit in sponsorship.benefits.all %}
112112
<div class="benefit-item">
113-
<div class="benefit-icon">
114-
<i class="fa fa-check-circle"></i>
115-
</div>
116113
<div class="benefit-content">
117114
<span class="benefit-name">{{ benefit.name_for_display }}</span>
118115
{% if benefit.description %}
119116
<span class="benefit-description" title="{{ benefit.description }}">
120-
<i class="fa fa-info-circle"></i>
121-
</span>
117+
<i class="fa fa-info-circle"></i>
118+
</span>
122119
{% endif %}
120+
<span class="benefit-category">{{ benefit.program.name }}</span>
123121
</div>
124122
</div>
125123
{% endfor %}

0 commit comments

Comments
 (0)