From b579ce1a7ced67693969d144d552c1d6df553329 Mon Sep 17 00:00:00 2001
From: Aditya Anand M C <aditya.anandmc@gmail.com>
Date: Sat, 19 Oct 2019 12:48:18 -0500
Subject: [PATCH] bug: ensure fund + detail button are always visible

---
 app/assets/v2/css/grants/card.css          | 15 ++++++
 app/grants/templates/grants/card/back.html | 59 ++++++++++------------
 2 files changed, 41 insertions(+), 33 deletions(-)

diff --git a/app/assets/v2/css/grants/card.css b/app/assets/v2/css/grants/card.css
index ab11710ce76..61b3d3a3ab7 100644
--- a/app/assets/v2/css/grants/card.css
+++ b/app/assets/v2/css/grants/card.css
@@ -115,4 +115,19 @@
 
 #CLR_banner .logo {
   float: right;
+}
+
+.grant-item__info a {
+  border-color: white;
+  background-color: #6144FF;
+  color: white;
+}
+
+.grant-item__info a:hover {
+  color: white;
+  text-decoration: underline;
+}
+
+.h-90 {
+  height: 90% !important;
 }
\ No newline at end of file
diff --git a/app/grants/templates/grants/card/back.html b/app/grants/templates/grants/card/back.html
index 8644b82f5e1..7ad5c1235cd 100644
--- a/app/grants/templates/grants/card/back.html
+++ b/app/grants/templates/grants/card/back.html
@@ -16,47 +16,40 @@
 {% endcomment %}
 {% load i18n static humanize grants_extra avatar_tags %}
 <div class="row h-100">
-  {% if grant.active %}
+
+  <div class="col-12 h-75">
     {% if grant.activeSubscriptions %}
-      <div class="col-12 my-2">
-        <h3 class="font-subheader font-weight-bold mb-3">{% trans 'Contributors' %} ({{ grant.activeSubscriptions|length }})</h3>
+      <h3 class="font-subheader font-weight-semibold mb-3">{% trans 'Contributors' %} ({{ grant.activeSubscriptions|length }})</h3>
+      <div class="overflow-auto h-90">
         {% for handle in grant.activeSubscriptions %}
           <a class="grant__stakeholders-item ml-2" href="{% url 'profile' handle %}">
             <img data-src="{% avatar_url handle  %}" />
           </a>
         {% endfor %}
       </div>
-      <div class="col-12 text-center">
-        <p>
-          <a class="font-title btn btn-outline-white" href="{% url 'grants:fund' grant.id grant.slug %}" rel="noreferrer">
-            {% trans 'Fund this Grant' %}
-          </a>
-        </p>
-        <p>
-          <a class="font-title btn btn-outline-white" href="{% url 'grants:details' grant.id grant.slug %}" rel="noreferrer">
-            {% trans 'View Details' %}
-          </a>
-        </p>
-      </div>
     {% else %}
-      <div class="col-12 mt-2 m-auto text-center">
-        <p class="font-weight-bold">No active subscriptions</p>
-        <p>
-          <a class="font-title btn btn-outline-white" href="{% url 'grants:fund' grant.id grant.slug %}" rel="noreferrer">
-            {% trans 'Fund this Grant' %}
-          </a>
-        </p>
-        <p>
-          <a class="font-title btn btn-outline-white" href="{% url 'grants:details' grant.id grant.slug %}" rel="noreferrer">
-            {% trans 'View Details' %}
-          </a>
-        </p>
-      </div>
+      <h3 class="font-subheader font-weight-semibold mb-3">No Contributons yet</h3>
+      <p class="font-body">Click on fund grant to become the first contributor for this grant!</p>
+    {% endif %}
+  </div>
+
+  <div class="col-12 py-4 m-auto text-center grant-item__info h-25">
+    <p>
+      <a class="font-title btn"
+        href="{% url 'grants:details' grant.id grant.slug %}" rel="noreferrer">
+        {% trans 'View Details' %}
+      </a>
+    </p>
+    {% if grant.active %}
+      <p>
+        <a class="font-title btn"
+          href="{% url 'grants:fund' grant.id grant.slug %}" rel="noreferrer">
+          {% trans 'Fund this Grant' %}
+        </a>
+      </p>
+    {% else %}
+      <p class="font-weight-bold">{% trans 'This grant is no longer active.' %}</p>
     {% endif %}
+  </div>
 
-  {% else %}
-    <div class="col-12 text-center m-auto">
-      <h3 class="font-title">{% trans 'This grant is no longer active.' %}</h3>
-    </div>
-  {% endif %}
 </div>