styles for banners and grid fixes

gitcoinco · Sep 14, 2020 · 3887bf5 · 3887bf5
1 parent 2bdb362
commit 3887bf5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/app/assets/v2/css/grants/grant.css b/app/assets/v2/css/grants/grant.css
@@ -630,7 +630,6 @@ background: linear-gradient(85.75deg, #03008D -17.8%, #000000 139.56%); /* W3C,
 }
 
 .grants_hero_img{
-  background-size: contain !important;
   background-position-x: 50%;
   background-color: #030118;
 }

diff --git a/app/assets/v2/js/grants/funding.js b/app/assets/v2/js/grants/funding.js
@@ -239,19 +239,9 @@ function hideSideCart() {
 }
 
 function toggleSideCart() {
-  $('#grants-details').toggleClass('col-12');
-  $('#grants-details').toggleClass('col-md-8');
-  $('#grants-details').toggleClass('col-lg-9');
-  $('#grants-details').toggleClass('d-none');
-  $('#grants-details').toggleClass('d-md-block');
+  $('#grants-details > div').toggleClass('col-12 col-md-8 col-lg-9 d-none d-md-block');
 
   $('#side-cart').toggle();
-  $('#side-cart').toggleClass('col-12');
-  $('#side-cart').toggleClass('col-md-4');
-  $('#side-cart').toggleClass('col-lg-3');
-
-  $('#funding-card').toggleClass('mr-md-5');
-  $('#funding-card').toggleClass('mr-md-3');
-  $('#funding-card').toggleClass('d-none');
-  $('#funding-card').toggleClass('d-lg-block');
+  $('#side-cart').toggleClass('col-12 col-md-4 col-lg-3');
+  $('#funding-card').toggleClass('mr-md-5 mr-md-3 d-none d-lg-block');
 }
diff --git a/app/grants/templates/grants/index.html b/app/grants/templates/grants/index.html
@@ -44,12 +44,12 @@
   {% include 'shared/tag_manager_2.html' %}
   {% include 'shared/top_nav.html' with class='d-md-flex' %}
   {% include 'grants/nav.html' %}
-  <div class="container-fluid header dash grants_hero_img" style="background-image: url('/static/v2/images/bg/{{bg}}'); ">
+  <div class="container-fluid header dash grants_hero_img" style="background: url('/static/v2/images/bg/{{styles.bg}}') center top / {{styles.bg_size}} {{styles.bg_color}} no-repeat;">
 
     {% include 'shared/grant_thanks_modal.html' %}
     {% include 'grants/shared/landing_hero.html' %}
-    <div class="row" style="width: 100vw">
-      <div id="grants-details" class="col-12 pr-0">
+    <div class="" style="">
+      <div id="grants-details" class="no-gutters">
         <div style="background-image: url('/static/v2/images/bg/{{bottom_back}}'); background-size: contain;">
           <div
             style="background-color: rgba(255, 255, 255, {% if type == 'health' %}0.9{% else %}0.92{% endif %});  padding-bottom: 20px; border-top: {% if type == 'health' %}#87c5ba{% elif type == 'activity' %}#eee{% else %}#aaa{% endif %} 10px solid;">

diff --git a/app/grants/views.py b/app/grants/views.py
@@ -453,6 +453,8 @@ def get_bg(grant_type):
     bg = 4
     bg = f"{bg}.jpg"
     mid_back = 'bg14.png'
+    bg_size = 'contain'
+    bg_color = '#030118'
     bottom_back = 'bg13.gif'
     if grant_type == 'tech':
         bottom_back = 'bg20-2.png'
@@ -468,9 +470,12 @@ def get_bg(grant_type):
     if grant_type != 'matic':
         bg = '../grants/grants_header_donors_round_7.png'
     if grant_type == 'matic':
+        # bg = '../grants/matic-banner.png'
         bg = '../grants/matic-banner.png'
+        bg_size = 'cover'
+        bg_color = '#0c1844'
 
-    return bg, mid_back, bottom_back
+    return bg, mid_back, bottom_back, bg_size, bg_color
 
 
 def grants_by_grant_type(request, grant_type):
@@ -491,7 +496,7 @@ def grants_by_grant_type(request, grant_type):
         category = ''
     profile = get_profile(request)
     _grants = None
-    bg, mid_back, bottom_back = get_bg(grant_type)
+    bg, mid_back, bottom_back, bg_size, bg_color = get_bg(grant_type)
     show_past_clr = False
 
     sort_by_index = None
@@ -602,6 +607,11 @@ def grants_by_grant_type(request, grant_type):
         'can_pin': can_pin(request, what),
         'pinned': pinned,
         'target': f'/activity?what=all_grants',
+        'styles': {
+            'bg': bg,
+            'bg_size': bg_size,
+            'bg_color': bg_color
+        },
         'bg': bg,
         'keywords': get_keywords(),
         'grant_amount': grant_amount,