Skip to content

Commit 4c71d94

Browse files
amustaphaoctavioamu
amustapha
and
octavioamu
authored
Switching category should not reload (#8047)
* Excluded any file in dist from being tracked * Include all grant styles in request * Make style apply from JQuery * Use proper styling * Support background color to blend in image * Support background images * Check routing policy regex for background match * Make it adapt to default style * Apply inline CSS when available * Reset inline css if current regex match doesn't have inline_css Co-authored-by: Octavio Amuchástegui <octavioamuchastegui@gmail.com>
1 parent 4cb4f28 commit 4c71d94

File tree

5 files changed

+82
-19
lines changed

5 files changed

+82
-19
lines changed

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,4 @@ src/
5454
# Autogenerated Documentation
5555
_build/
5656
**/.vs
57-
**/dist
57+
**/dist/*

‎app/assets/v2/js/grants/index.js

+37-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ let grantsNumPages = '';
22
let grantsHasNext = false;
33
let numGrants = '';
44

5-
5+
let toggleStyle
66
$(document).ready(() => {
77
$('#sort_option').select2({
88
minimumResultsForSearch: Infinity
@@ -51,6 +51,27 @@ $(document).ready(() => {
5151

5252
});
5353

54+
toggleStyle = function (style) {
55+
let banner
56+
if (style.bg) {
57+
banner = `url("${style.bg }") center top / ${style.size || ''} ${style.color || ''} no-repeat`
58+
} else {
59+
banner = `url("${ style.banner_image }") center no-repeat`
60+
}
61+
$('#grant-hero-img').css("background", banner)
62+
if (style.background_image) {
63+
$("#grant-background-image-mount-point").css("background-image", style.background_image)
64+
}
65+
66+
if (style.inline_css) {
67+
$('style').last().text(style.inline_css);
68+
} else {
69+
$('style').last().text('');
70+
}
71+
72+
}
73+
toggleStyle(document.current_style)
74+
5475
});
5576

5677
Vue.component('grant-sidebar', {
@@ -89,6 +110,8 @@ Vue.component('grant-sidebar', {
89110
return window.innerWidth < 576;
90111
},
91112
filterLink: function(params) {
113+
return this.filter_grants(params);
114+
92115
if (params.type === this.type) {
93116
this.filter_grants(params);
94117
} else if (params.type === 'collections') {
@@ -102,7 +125,7 @@ Vue.component('grant-sidebar', {
102125
collections_query.keyword = params.keyword;
103126
}
104127

105-
document.location.href = `/grants/collections?${$.param(collections_query)}`;
128+
// document.location.href = `/grants/collections?${$.param(collections_query)}`;
106129
} else {
107130
let target = `/grants/${params.type}`;
108131

@@ -121,8 +144,8 @@ Vue.component('grant-sidebar', {
121144
target = `/grants/clr/${this.customer_name}/${this.round_num}/${this.sub_round_slug}?type=${params.type}`;
122145
}
123146
}
124-
125-
document.location.href = target;
147+
fetchGrants(this.page)
148+
// document.location.href = target;
126149
}
127150
},
128151
searchKeyword: function() {
@@ -298,8 +321,11 @@ if (document.getElementById('grants-showcase')) {
298321
if (event) {
299322
event.preventDefault();
300323
}
301-
324+
let current_style
302325
if (filters.type !== null && filters.type !== undefined) {
326+
if (!current_style) {
327+
current_style = document.all_type_styles[filters.type]
328+
}
303329
this.current_type = filters.type;
304330
if (this.current_type === 'collections') {
305331
this.collection_id = null;
@@ -333,10 +359,15 @@ if (document.getElementById('grants-showcase')) {
333359
if (filters.type === 'collections') {
334360
this.collectionsPage = 1;
335361
}
336-
337362
this.page = 1;
338363
this.setCurrentType(this.current_type);
339364
this.fetchGrants(this.page);
365+
const regex_style = document.all_routing_policies.find(policy => {
366+
console.log(policy.url_pattern, window.location.href, new RegExp(policy.url_pattern).test(window.location.href))
367+
return new RegExp(policy.url_pattern).test(window.location.href)
368+
})
369+
toggleStyle(regex_style || current_style)
370+
340371
},
341372
clearSingleCollection: function() {
342373
this.grants = [];

‎app/grants/templates/grants/index.html

+23-6
Original file line numberDiff line numberDiff line change
@@ -51,24 +51,21 @@
5151

5252
{% if grant_bg.inline_css %}{{grant_bg.inline_css}}{% endif %}
5353
</style>
54+
<style></style>
5455
</head>
5556

5657
<body class="interior {{type}}_grants {{ active }} grant g-font-muli">
5758
{% include 'shared/tag_manager_2.html' %}
5859
{% include 'shared/top_nav.html' with class='d-md-flex' %}
5960
{% include 'grants/nav.html' %}
60-
<div class="container-fluid header dash grants_hero_img"
61-
style="{% if grant_bg %} background: url({{ grant_bg.banner_image }}) center no-repeat;
62-
{% else %} background: url('/static/v2/images/bg/{{styles.bg}}') center top / {{styles.bg_size}} {{styles.bg_color}} no-repeat; {% endif %}"
63-
>
64-
61+
<div class="container-fluid header dash grants_hero_img" id="grant-hero-img">
6562
{% include 'shared/grant_thanks_modal.html' %}
6663
{% include 'grants/shared/landing_hero.html' %}
6764

6865

6966
<div class="row grants-details-parent" class="mx-0">
7067
<div id="grants-details" class="no-gutters w-100">
71-
<div style="background-image: url('{% if grant_bg %} {{ grant_bg.background_image }} {% else %} /static/v2/images/bg/{{bottom_back}} {% endif %} '); background-size: contain;">
68+
<div style="background-size: contain;" id="grant-background-image-mount-point">
7269
<div
7370
style="background-color: rgba(255, 255, 255, {% if type == 'health' %}0.9{% else %}0.92{% endif %}); padding-bottom: 20px;">
7471
{% if prev_grants.count %}
@@ -174,6 +171,26 @@
174171
document.sub_round_slug = "{{clr_round.sub_round_slug}}";
175172
document.customer_name = "{{clr_round.customer_name}}";
176173
{% endif %}
174+
let base_style = {
175+
bg: '/static/v2/images/bg/{{styles.bg}}',
176+
size: "{{styles.bg_size}}",
177+
color: "{{styles.bg_color}}",
178+
background_image: "url('/static/v2/images/bg/{{bottom_back}}')"
179+
};
180+
181+
document.all_type_styles = {{ all_styles|safe }}
182+
document.all_routing_policies = {{ all_routing_policies | safe}}
183+
document.all_routing_policies.push(base_style)
184+
{% if grant_bg %}
185+
document.current_style = {
186+
banner_image: "{{ grant_bg.banner_image }}",
187+
background_image: " url('{{background_image }}')",
188+
inline_css: "{{ inline_css }}"
189+
}
190+
{% else %}
191+
document.current_style = base_style
192+
{% endif %}
193+
177194
</script>
178195
{% include 'shared/activity_scripts.html' %}
179196

‎app/grants/templates/grants/shared/sidebar_search.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@
7474
</div>
7575
<ul class="nav d-inline-block font-smaller-2 mb-2 grants_nav grants_type_nav pl-0 mb-0 pb-2 mt-2 text-left font-smaller-1 font-weight-semibold">
7676
<li class="mr-1 ">
77-
<a :href="`/grants`" data-type="all" data-category="" :class="`mr-1 ${ type == 'all'? 'selected':''}`">
77+
<a @click="filterLink({type: '', category: ''})" data-type="all" data-category="" :class="`mr-1 ${ type == 'all'? 'selected':''}`">
7878
All Categories
7979
</a>
8080
</li>

‎app/grants/views.py

+20-5
Original file line numberDiff line numberDiff line change
@@ -824,17 +824,25 @@ def get_bg(grant_type):
824824
return bg, mid_back, bottom_back, bg_size, bg_color
825825

826826

827+
def get_policy_state(policy, request):
828+
return {
829+
"url_pattern": policy.url_pattern,
830+
"banner_image": request.build_absolute_uri(policy.banner_image.url) if policy.banner_image else None,
831+
"background_image": request.build_absolute_uri(policy.background_image.url) if policy.background_image else None,
832+
"inline_css": policy.inline_css
833+
}
834+
835+
827836
def get_branding_info(request):
828837

829838
all_policies = GrantBrandingRoutingPolicy.objects.filter().order_by('-priority')
830839
for policy in all_policies:
831840
if re.search(policy.url_pattern, request.get_full_path()):
832-
return {
833-
"banner_image": request.build_absolute_uri(policy.banner_image.url) if policy.banner_image else None,
834-
"background_image": request.build_absolute_uri(policy.background_image.url) if policy.background_image else None,
835-
"inline_css": policy.inline_css
836-
}
841+
return get_policy_state(policy, request)
837842

843+
def get_all_routing_policies(request):
844+
all_policies = GrantBrandingRoutingPolicy.objects.filter().order_by('-priority')
845+
return [get_policy_state(policy, request) for policy in all_policies]
838846

839847
def grants_by_grant_type(request, grant_type):
840848
"""Handle grants explorer."""
@@ -857,7 +865,12 @@ def grants_by_grant_type(request, grant_type):
857865
_grants = None
858866
bg, mid_back, bottom_back, bg_size, bg_color = get_bg(grant_type)
859867
show_past_clr = False
868+
all_grant_types = GrantType.objects.all()
860869

870+
all_styles = {}
871+
for _gtype in all_grant_types:
872+
bg, mid_back, bottom_back, bg_size, bg_color = get_bg(_gtype)
873+
all_styles[_gtype.name] = dict(bg=bg, mid_back=mid_back, bottom_back=bottom_back, bg_size=bg_size, bg_color=bg_color)
861874
sort_by_index = None
862875

863876
grant_amount = 0
@@ -983,6 +996,8 @@ def grants_by_grant_type(request, grant_type):
983996
'avatar_width': 1953,
984997
'grants': grants,
985998
'what': what,
999+
'all_styles': all_styles,
1000+
'all_routing_policies': get_all_routing_policies(request),
9861001
'can_pin': can_pin(request, what),
9871002
'pinned': pinned,
9881003
'target': f'/activity?what=all_grants',

0 commit comments

Comments
 (0)