grant: update grant amount design

- fix breaking UI for wallet address - hide fund grant button for grant owner - updated grant amount view on grant/detail & landing. - removed outdated text from CLR matching
gitcoinco · May 13, 2019 · c61b0ed · c61b0ed
1 parent d47f8e6
commit c61b0ed
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 83 deletions.
diff --git a/app/assets/v2/css/grants/detail.css b/app/assets/v2/css/grants/detail.css
@@ -4,15 +4,6 @@
   }
 }
 
-#CLR_banner img {
-  bottom: 2rem;
-  position: relative;
-}
-
-#CLR_banner .clr-text {
-  display: inline-block;
-}
-
 .grant_details {
   background-color: #F8FAFC;
 }
@@ -178,6 +169,10 @@ textarea.editable {
   max-height: 22rem;
 }
 
+.wallet-address {
+  font-size: 0.85rem;
+}
+
 .grant__stakeholders-list img,
 .grant-item__members img,
 .grant-item__owner-image img {

diff --git a/app/assets/v2/css/grants/grant.css b/app/assets/v2/css/grants/grant.css
@@ -38,7 +38,8 @@
 
 .progress {
   background-color: #D8D8D8;
-  border-radius: 2px;
+  border-radius: 5px;
+  height: 0.5rem;
 }
 
 .grant-tooltip {
@@ -62,8 +63,12 @@
   max-width: 100%;
 }
 
+.progress-container {
+  color: #0D0764;
+}
+
 .progress .progress-bar {
-  background-color: #0FCE7C;
+  background-color: #0D0764;
   height: auto;
 }
 
@@ -72,15 +77,14 @@
   position: relative;
 }
 
-.progress-bar.progress-bar--fund {
-  background-color: #0D0764;
-  position: relative;
-}
-
 .progress--small {
   height: 7px;
 }
 
+.progress--small .progress-bar {
+  background-color: #0ECF7C;
+}
+
 .grant-item__owner-handle {
   color: #9B9B9B;
   line-height: 18px;

diff --git a/app/assets/v2/images/grants/clr.svg b/app/assets/v2/images/grants/clr.svg
diff --git a/app/grants/templates/grants/card/front.html b/app/grants/templates/grants/card/front.html
@@ -38,19 +38,37 @@ <h2 class="grant-item__title font-subheader"><a href="{% url 'grants:details' gr
           </div>
         </a>
       </div>
-      <div class="progress progress--small">
-        <div class="progress-bar" role="progressbar" style="width: {{ grant.percentage_done }}%" aria-valuenow="{{ grant.percentage_done }}%" aria-valuemin="0" aria-valuemax="100"></div>
-      </div>
-      <div class="grant-item__funding mt-2">
-        <div class="grant-item__funding-item">
-          <div class="grant-item__funding-number font-body">{{ grant.amount_received|floatformat:2|intcomma }} DAI</div>
-          <div class="grant-item__funding-label font-caption">{% trans 'Funded' %}</div>
+
+      <div class="row progress-container mb-4">
+        <div class="offset-2 col-8 text-center text-xl-left offset-xl-0 col-xl-6 mb-4 mb-xl-0 ">
+          <p class="sub-title mb-0 font-caption">MONTHLY RECURRING</p>
+          <p class="font-title mb-0 font-weight-bold">
+            {{ grant.monthly_amount_subscribed|floatformat:0|intcomma }} DAI
+          </p>
+          <p class="font-caption {% if grant.clr_matching %} my-2 {% endif %}">
+            of {{ grant.amount_goal|floatformat:0|intcomma }} DAI goal
+          </p>
+          <div class="progress progress--small">
+            <div class="progress-bar" role="progressbar"
+              style="width: {{ grant.percentage_done }}%" aria-valuenow="{{ grant.percentage_done }}%" aria-valuemin="0" aria-valuemax="100">
+            </div>
+          </div>
         </div>
-        <div class="grant-item__funding-item">
-          <div class="grant-item__funding-number font-body">{{ grant.amount_goal|floatformat:2|intcomma }} DAI</div>
-          <div class="grant-item__funding-label font-caption">{% trans ' Monthly Goal' %}</div>
+
+        <div class="offset-2 col-8 text-center text-xl-left offset-xl-0 col-xl-6">
+          <p class="sub-title mb-0 font-caption">TOTAL FUNDED</p>
+          <p class="font-title mb-0 font-weight-bold">
+            {{ grant.amount_received|floatformat:0|intcomma }} DAI
+          </p>
+
+          {% if grant.clr_matching %}
+            <span class="mr-2 font-caption">+{{ grant.clr_matching|floatformat:0 }} DAI</span>
+            <img src="{% static "v2/images/grants/clr.svg" %}">
+          {% endif %}
+
         </div>
       </div>
+
       {% include 'grants/detail/matching.html' %}
       <div class="grant-item__state mt-3 row">
         <div class="col-6">

diff --git a/app/grants/templates/grants/detail/info.html b/app/grants/templates/grants/detail/info.html
@@ -79,9 +79,10 @@ <h1 class="font-title-xl my-4 font-weight-bold">
         {% endif %}
       </div>
 
-      <div class="font-body mb-2">
+      <div class="mb-2">
         <i style="width: 14px;" class="fab fa-ethereum mr-2 text-center"></i>
-        <a href="https://etherscan.io/address/{{ grant.admin_address }}" target="_blank" data-toggle="tooltip" data-placement="top" title="Recipient Funding Address">
+        <a class="wallet-address" href="https://etherscan.io/address/{{ grant.admin_address }}"
+          target="_blank" data-toggle="tooltip" data-placement="top" title="Recipient Funding Address">
           {{ grant.admin_address }}
         </a>
       </div>
@@ -113,19 +114,20 @@ <h1 class="font-title-xl my-4 font-weight-bold">
         {% trans "Grant Has Ended" %}
       </button>
 
-    {% elif user_non_errored_subscription and not is_admin %}
+    {% elif not is_admin %}
 
-      <a href="{% url 'grants:subscription_cancel' grant.id grant.slug user_subscription.id %}">
-        <button class="button button--primary button--warning button--full shadow-none font-weight-bold py-3">{% trans "Cancel Your Funding" %}</button>
-      </a>
+      {% if user_non_errored_subscription %}
 
-    {% else %}
+        <a href="{% url 'grants:subscription_cancel' grant.id grant.slug user_subscription.id %}">
+          <button class="button button--primary button--warning button--full shadow-none font-weight-bold py-3">{% trans "Cancel Your Funding" %}</button>
+        </a>
 
-      {% if not is_admin and grant_is_inactive %}
+      {% else %}
 
         <a href="{% url 'grants:fund' grant.id grant.slug %}">
           <button class="btn btn-gc-blue button--full shadow-none font-weight-bold py-3">{% trans "Fund this Grant" %}</button>
         </a>
+
       {% endif %}
 
     {% endif %}
@@ -138,30 +140,39 @@ <h1 class="font-title-xl my-4 font-weight-bold">
           <input id="amount_goal" class="p-0 m-0 inline-edit" value="{{ grant.amount_goal }}" disabled>
         </div>
       {% endif %}
-      <div class="grant__progress mt-4">
-        <div class="progress">
-          <div class="progress-bar" role="progressbar" style="width: {{ grant.percentage_done }}%" aria-valuenow="{{ grant.percentage_done }}%" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-        <div class="progress-text mt-2">
-          <div class="row">
-            <div class="col-6">
-              <span>{{ grant.amount_received|floatformat:2|intcomma }} DAI</span>
-              <p>Total Funding</p>
-            </div>
-            <div class="col-6 text-right">
-              <span>{{ grant.amount_goal|floatformat:2|intcomma }} DAI</span>
-              <p>{% trans "Monthly Goal" %}</p>
+
+      <div class="row progress-container {% if not is_admin %} mt-4 {% endif %} mb-5">
+        <div class="offset-2 col-8 text-center text-xl-left offset-xl-0 col-xl-6 mb-4 mb-xl-0 ">
+          <p class="sub-title mb-0 font-caption">MONTHLY RECURRING</p>
+          <p class="font-title-xl mb-0 font-weight-bold">
+            {{ grant.monthly_amount_subscribed|floatformat:0|intcomma }} DAI
+          </p>
+          <p>of {{ grant.amount_goal|floatformat:0|intcomma }} DAI goal</p>
+          <div class="progress">
+            <div class="progress-bar" role="progressbar"
+              style="width: {{ grant.percentage_done }}%" aria-valuenow="{{ grant.percentage_done }}%" aria-valuemin="0" aria-valuemax="100">
             </div>
           </div>
         </div>
-        <p class="sub-title mb-3">
-          {% trans 'Monthly Recurring Funding: '%} 
-        </p>
-        <p>
-          {{ grant.monthly_amount_subscribed|floatformat:0 }} DAI
-        </p>
+
+        <div class="offset-2 col-8 text-center text-xl-left offset-xl-0 col-xl-6">
+          <p class="sub-title mb-0 font-caption">TOTAL FUNDED</p>
+          <p class="font-title-xl mb-0 font-weight-bold">
+            {{ grant.amount_received|floatformat:0|intcomma }} DAI
+          </p>
+
+          {% if grant.clr_matching %}
+            <span class="mr-2">+{{ grant.clr_matching|floatformat:0 }} DAI</span>
+            <img src="{% static "v2/images/grants/clr.svg" %}">
+          {% endif %}
+        </div>
+
+        <div class="col-12 mt-4 font-body">
+          <span class="sub-title">{% trans 'MONTHLY RECURRING FUNDING:' %}</span>
+          <span class="font-weight-bold">{{ grant.monthly_amount_subscribed|floatformat:0 }} DAI </span>
+        </div>
+
       </div>
-      <!-- TODO: CLEAN UP-->
     </div>
 
     {% if is_admin and not grant_is_inactive %}

diff --git a/app/grants/templates/grants/detail/matching.html b/app/grants/templates/grants/detail/matching.html
@@ -11,21 +11,16 @@
       height: 3rem;
     }
   </style>
-  <div id="CLR_banner" class="my-2 p-3 {% if is_grant_info %} row {% endif %}">
+  <div id="CLR_banner" class="my-2 p-3 d-flex">
 
     {% if clr_matching_banners_style == "results" %}
-      {% if is_grant_info %}
-        <div class="col-md-4 col-xl-3 my-auto">
-      {% endif %}
-          <a class="logo" target="new" href="https://medium.com/gitcoin/gitcoin-grants-clr-matching-ecbc87b10038">
-            <img src="{% static "v2/images/eth_dollar.png" %}" />
-          </a>
-      {% if is_grant_info %}
-        </div>
-      {% endif %}
-
-      <div class="{% if is_grant_info %} col-md-8 col-xl-9 {% endif %} clr-text pl-2">
-        <p class="mt-2 mb-1 font-weight-bold">
+
+      <a class="my-auto logo" target="new" href="https://medium.com/gitcoin/gitcoin-grants-clr-matching-ecbc87b10038">
+        <img src="{% static "v2/images/eth_dollar.png" %}" />
+      </a>
+
+      <div class="clr-text pl-2">
+        <p class="mt-2 mb-1 font-weight-semibold">
           +${{grant.clr_matching}} in CLR Matching
         </p>
         <p class="mb-0">
@@ -35,23 +30,14 @@
 
     {% else %}
 
-      {% if is_grant_info %}
-        <div class="col-md-4 col-xl-3 my-auto">
-      {% endif %}
-          <a class="logo" target="new" href="https://medium.com/gitcoin/gitcoin-grants-50k-oss-fund-e20e09dc2110">
-            <img src="{% static "v2/images/eth_dollar.png" %}" />
-          </a>
-      {% if is_grant_info %}
-        </div>
-      {% endif %}
-
-      <div class="{% if is_grant_info %} col-md-8 col-xl-9 {% endif %} clr-text pl-2">
-        <p class="mt-2 mb-1 font-weight-bold">
+      <a class="my-auto logo" target="new" href="https://medium.com/gitcoin/gitcoin-grants-50k-oss-fund-e20e09dc2110">
+        <img src="{% static "v2/images/eth_dollar.png" %}" />
+      </a>
+
+      <div class="clr-text pl-2">
+        <p class="mt-2 mb-1 font-weight-semibold">
           This Grant is accepting Matching Contributions
         </p>
-        <p class="mb-0">
-          Contribute from 3/6 to 4/19 and have up to $50k in contributions matched.
-        </p>
       </div>
 
     {% endif %}

diff --git a/app/grants/views.py b/app/grants/views.py
@@ -213,7 +213,6 @@ def grant_details(request, grant_id, grant_slug):
         'updates': updates,
         'milestones': milestones,
         'keywords': get_keywords(),
-        'is_grant_info': True,
     }
 
     if add_cancel_params: