bug: ensure fund + detail button are always visible

gitcoinco · Oct 20, 2019 · b579ce1 · b579ce1
1 parent c201ca8
commit b579ce1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 33 deletions.
diff --git 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;
 }
diff --git 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>