Skip to content

Commit

Permalink
style: add category, change layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@JacobCoffee
JacobCoffee committed Oct 8, 2024
1 parent 0eec197 commit 45d654f
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 44 deletions.
56 changes: 27 additions & 29 deletions static/sass/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -396,7 +396,7 @@ form, .header-banner, .success-stories-widget .quote-from {
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} */
/* FlexSlider Necessary Styles
/* FlexSlider Necessary Styles
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping
.flexslider .slides img {width: 100%; display: block;}
Expand Down Expand Up @@ -2350,7 +2350,7 @@ table tfoot {
/* ! ===== Success Stories landing page ===== */
.featured-success-story {
padding: 1.3125em 0;
background: center -230px no-repeat url('../img/success-glow2.png?1646853871') transparent;
background: center -230px no-repeat url('../img/success-glow2.png?1726783859') transparent;
/*blockquote*/ }
.featured-success-story img {
padding: 10px 30px; }
Expand Down Expand Up @@ -2881,11 +2881,10 @@ p.quote-by-organization {
background-color: #bcc2c7;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFE6E8EA', endColorstr='#FFBCC2C7');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNlNmU4ZWEiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2JjYzJjNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #e6e8ea), color-stop(90%, #bcc2c7));
background-image: -moz-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
background-image: -webkit-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
background-image: -moz-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
background-image: -o-linear-gradient(#e6e8ea 10%, #bcc2c7 90%);
background-image: linear-gradient(#e6e8ea 10%, #bcc2c7 90%); }
.user-profile-controls + .return-link {
margin-top: -1.3125em; }
Expand Down Expand Up @@ -3612,7 +3611,7 @@ span.highlighted {
font-weight: bold;
font-style: normal; }

/*
/*
* Generated by Font Squirrel (http://www.fontsquirrel.com) on July 2, 2013 10:19:24 AM America/New_York
* Adobe Source Pro Sans, Open Source License: http://store1.adobe.com/cfusion/store/html/index.cfm?event=displayFontPackage&code=1959
*/
Expand All @@ -3636,6 +3635,7 @@ span.highlighted {
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");
font-weight: normal;
font-style: italic; }

/* ! ===== SPONSORSHIP APP ===== */
.ui-tooltip-content {
font-size: 75%; }
Expand Down Expand Up @@ -3686,15 +3686,14 @@ span.highlighted {
margin-top: 0.5em;
font-size: 65%;
border-color: #82b043;
color: #fff !important;
color: white !important;
background-color: #82b043;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFB2D287', endColorstr='#FF82B043');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNiMmQyODciLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzgyYjA0MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #b2d287), color-stop(90%, #82b043));
background-image: -moz-linear-gradient(#b2d287 10%, #82b043 90%);
background-image: -webkit-linear-gradient(#b2d287 10%, #82b043 90%);
background-image: -moz-linear-gradient(#b2d287 10%, #82b043 90%);
background-image: -o-linear-gradient(#b2d287 10%, #82b043 90%);
background-image: linear-gradient(#b2d287 10%, #82b043 90%); }
#new_sponsorship_application_container .sponsor-contacts-container .contact-form, #edit-sponsor-information .sponsor-contacts-container .contact-form {
margin-bottom: 1em; }
Expand Down Expand Up @@ -3906,7 +3905,7 @@ span.highlighted {
border-radius: 20px;
text-align: center; }
#select_sponsorship_benefits_container .submit-row .btn:hover, #select_sponsorship_benefits_container .submit-row .btn:focus {
background: #ffd95d;
background: #ffd95c;
text-shadow: 0 0 5px rgba(255, 211, 67, 0.2); }
@media (max-width: 1200px) {
#select_sponsorship_benefits_container .submit-row {
Expand All @@ -3924,11 +3923,7 @@ span.highlighted {
*/
flex-flow: column wrap !important; }
#select_sponsorship_benefits_container #package-selection .row .col:not(first-child) {
width: 50%; } }
@media (max-width: 1200px) and (max-width: 640px) {
#select_sponsorship_benefits_container #package-selection .row .col:not(first-child) {
width: 80%; } }
@media (max-width: 1200px) {
width: 50%; }
#select_sponsorship_benefits_container #package-selection .row .col:first-child {
width: 20%; }
#select_sponsorship_benefits_container #package-selection .col, #select_sponsorship_benefits_container #package-selection .col-items {
Expand All @@ -3949,6 +3944,9 @@ span.highlighted {
padding-right: 1em; }
#select_sponsorship_benefits_container #package-selection .package-input input {
order: 1; } }
@media (max-width: 1200px) and (max-width: 640px) {
#select_sponsorship_benefits_container #package-selection .row .col:not(first-child) {
width: 80%; } }
@media (min-width: 1200px) {
#select_sponsorship_benefits_container {
/* Destkop version have the package selection row as a fixed header after some scrolling.
Expand All @@ -3962,11 +3960,10 @@ span.highlighted {
background-color: #fcfcfc;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF9F9F9', endColorstr='#FFFCFCFC');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiLz48c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iI2ZjZmNmYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(10%, #f9f9f9), color-stop(90%, #fcfcfc));
background-image: -moz-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
background-image: -webkit-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
background-image: -moz-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
background-image: -o-linear-gradient(#f9f9f9 10%, #fcfcfc 90%);
background-image: linear-gradient(#f9f9f9 10%, #fcfcfc 90%); } }

#thank-you-container {
Expand Down Expand Up @@ -4049,31 +4046,34 @@ span.highlighted {
margin-top: 1rem; }
#sponsorship-detail-container .benefit-item {
display: flex;
align-items: center;
flex-direction: column;
background-color: #ffffff;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 0.75rem;
transition: background-color 0.2s ease; }
#sponsorship-detail-container .benefit-item:hover {
background-color: #f8f9fa; }
#sponsorship-detail-container .benefit-icon {
flex-shrink: 0;
margin-right: 0.75rem;
color: #28a745;
font-size: 1rem; }
#sponsorship-detail-container .benefit-content {
flex-grow: 1; }
#sponsorship-detail-container .benefit-name {
display: block;
font-weight: 500;
font-size: 0.9rem;
line-height: 1.2; }
line-height: 1.2;
margin-bottom: 0.25rem; }
#sponsorship-detail-container .benefit-description {
margin-left: 0.25rem;
color: #6c757d;
cursor: help;
font-size: 0.8rem; }
#sponsorship-detail-container .benefit-category {
display: inline-block;
background-color: #e9ecef;
color: #495057;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
margin-top: 0.5rem; }
@media (max-width: 768px) {
#sponsorship-detail-container .info-cards {
grid-template-columns: 1fr; }
Expand All @@ -4088,5 +4088,3 @@ span.highlighted {
font-size: 75%; }
#update-sponsorship-assets .form-actions {
margin: 0.5em 0; }

/*# sourceMappingURL=style.css.map */
23 changes: 13 additions & 10 deletions static/sass/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3037,7 +3037,7 @@ $breakpoint-desktop: 1200px;
text-align: right;
}

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

.benefit-item {
display: flex;
align-items: center;
flex-direction: column;
background-color: #ffffff;
border: 1px solid #e9ecef;
border-radius: 4px;
Expand All @@ -3058,13 +3058,6 @@ $breakpoint-desktop: 1200px;
background-color: #f8f9fa;
}

.benefit-icon {
flex-shrink: 0;
margin-right: 0.75rem;
color: #28a745;
font-size: 1rem;
}

.benefit-content {
flex-grow: 1;
}
Expand All @@ -3074,15 +3067,25 @@ $breakpoint-desktop: 1200px;
font-weight: 500;
font-size: 0.9rem;
line-height: 1.2;
margin-bottom: 0.25rem;
}

.benefit-description {
margin-left: 0.25rem;
color: #6c757d;
cursor: help;
font-size: 0.8rem;
}

.benefit-category {
display: inline-block;
background-color: #e9ecef;
color: #495057;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
border-radius: 4px;
margin-top: 0.5rem;
}

@media (max-width: 768px) {
.info-cards {
grid-template-columns: 1fr;
Expand Down
8 changes: 3 additions & 5 deletions templates/users/sponsorship_detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,16 +110,14 @@ <h3>Sponsorship Benefits</h3>
<div class="benefits-grid">
{% for benefit in sponsorship.benefits.all %}
<div class="benefit-item">
<div class="benefit-icon">
<i class="fa fa-check-circle"></i>
</div>
<div class="benefit-content">
<span class="benefit-name">{{ benefit.name_for_display }}</span>
{% if benefit.description %}
<span class="benefit-description" title="{{ benefit.description }}">
<i class="fa fa-info-circle"></i>
</span>
<i class="fa fa-info-circle"></i>
</span>
{% endif %}
<span class="benefit-category">{{ benefit.program.name }}</span>
</div>
</div>
{% endfor %}
Expand Down

0 comments on commit 45d654f

Please sign in to comment.