bug: ensure fund + detail button are always visible

gitcoinco · Oct 19, 2019 · dd73579 · dd73579
1 parent c201ca8
commit dd73579
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 38 deletions.
diff --git a/app/assets/v2/css/grants/card.css b/app/assets/v2/css/grants/card.css
@@ -115,4 +115,20 @@
 
 #CLR_banner .logo {
   float: right;
+}
+
+.grant-card-btns {
+  z-index: 2;
+  top: 50%;
+}
+
+.grant-card-btns a {
+  border-color: white;
+  background-color: #6144FF;
+  color: white;
+}
+
+.grant-card-btns a:hover {
+  color: white;
+  text-decoration: underline;
 }
diff --git a/app/grants/templates/grants/card/back.html b/app/grants/templates/grants/card/back.html
@@ -16,47 +16,34 @@
 {% endcomment %}
 {% load i18n static humanize grants_extra avatar_tags %}
 <div class="row h-100">
-  {% if grant.active %}
-    {% if grant.activeSubscriptions %}
-      <div class="col-12 my-2">
-        <h3 class="font-subheader font-weight-bold mb-3">{% trans 'Contributors' %} ({{ grant.activeSubscriptions|length }})</h3>
-        {% 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>
+  <div class="col-12 mt-2 m-auto text-center grant-card-btns position-absolute">
+    <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 %}
-      <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>
+      <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>
+  {% if grant.activeSubscriptions %}
+    <div class="col-12 my-2">
+      <h3 class="font-subheader font-weight-bold mb-3">{% trans 'Contributors' %} ({{ grant.activeSubscriptions|length }})</h3>
+      {% 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>
   {% endif %}
+
 </div>