grants/profile : add txn history template (#2465)

* grants/profile: base setup for my grants - set up route + view + empty template - css clean up + indent fix - renamed grants/grant_card -> grants/card - split up card css to it's own file * grants : redesign card * grants/profile: added tabs * grants/profile: added txn history section - UI template with be hardcoded - minimal refactoring * stickler fixes
gitcoinco · Oct 14, 2018 · d6c3020 · d6c3020
1 parent 0ee3802
commit d6c3020
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 12 deletions.
diff --git a/app/assets/v2/css/grants/profile.css b/app/assets/v2/css/grants/profile.css
@@ -1,4 +1,28 @@
 .header-line {
   color: #fff;
   font-style: normal;
+}
+
+h2.title {
+  border-bottom: 1px solid #D0D0D0;
+}
+
+.avatar {
+  max-width: 3.125rem;
+  max-height: 3.125rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.transaction-history:hover {
+  background-color: #F9F9F9;
+}
+
+.grants-container .info {
+  color: #9B9B9B;
+}
+
+.grants-container .txn-link a {
+  color: #7F8FA4;
+  text-decoration: none;
 }
diff --git a/app/assets/v2/css/tag.css b/app/assets/v2/css/tag.css
@@ -9,6 +9,10 @@
   cursor: pointer;
 }
 
+.tag-lg {
+  padding: 6px 16px;
+}
+
 .tag p {
   margin-bottom: 1px;
 }

diff --git a/app/grants/templates/grants/profile.html b/app/grants/templates/grants/profile.html
@@ -20,7 +20,9 @@
   <head>
     {% include 'shared/head.html' %}
     {% include 'shared/cards.html' %}
+    <link rel="stylesheet" href={% static "v2/css/dashboard.css" %}>
     <link rel="stylesheet" href={% static "v2/css/tabs.css" %}>
+    <link rel="stylesheet" href={% static "v2/css/tag.css" %}>
     <link rel="stylesheet" href="{% static "v2/css/grants/profile.css" %}">
   </head>
   <body class="interior {{ active }} g-font-muli">
@@ -41,7 +43,7 @@
           <div class="container px-0">
             <div class="row mb-3 py-2 px-0">
               <div class="col-12 px-0">
-                {% include 'grants/profile_body.html' with grants=grants %}
+                {% include 'grants/profile_body.html' with grants=grants history=history %}
               </div>
             </div>
           </div>
@@ -50,7 +52,7 @@
           <div class="container px-0">
             <div class="row mb-3 py-2 px-0">
               <div class="col-12 px-0">
-                {% include 'grants/profile_body.html' with grants=grants %}
+                {% include 'grants/profile_body.html' with grants=grants history=history %}
               </div>
             </div>
           </div>

diff --git a/app/grants/templates/grants/profile_body.html b/app/grants/templates/grants/profile_body.html
@@ -17,13 +17,53 @@
 {% load static i18n %}
 
 {% if grants %}
-<div class="grants-container">
-  {% for grant in grants %}
-    {% if forloop.counter0|divisibleby:3 %}<div class="row">{% endif %}
-    <div class="col-12 col-md-4 mb-4">
-      {% include 'grants/card.html' %}
-    </div>
-    {%  if forloop.counter|divisibleby:3 or forloop.last %}</div>{% endif %}
-  {% endfor %}
-</div>
+  <div class="grants-container">
+    {% for grant in grants %}
+      {% if forloop.counter0|divisibleby:3 %}<div class="row">{% endif %}
+      <div class="col-12 col-md-4 mb-4">
+        {% include 'grants/card.html' %}
+      </div>
+      {%  if forloop.counter|divisibleby:3 or forloop.last %}</div>{% endif %}
+    {% endfor %}
+    <h2 class="font-title my-3 pb-3 title">{% trans "Transaction History" %}</h2>
+    {% for transaction in history %}
+      <div class="py-3 row transaction-history">
+        <div class="col-1 font-subheader text-center my-auto">
+          {{ transaction.date }}
+        </div>
+        <div class="col-1 justify-content-center special_tag hide_min_viewport">
+          <img class="avatar" src="{{ transaction.avatar_url }}">
+        </div>
+        <div class="col-5 my-auto">
+          <div class="title font-body">
+            {{ transaction.title }}
+          </div>
+          <div class="info font-caption">
+            {{ transaction.value_true }} {{ transaction.token_name }} / {{ transaction.frequency }}
+          </div>
+        </div>
+        <div class="col-2 font-body my-auto txn-link">
+          <a href="{{ transaction.link }}" target="_blank" rel="noopener noreferrer">
+            View Etherscan
+          </a>
+        </div>
+        <div class="offset-lg-1 col-2 my-auto tags font-caption text-right">
+          <div class="tag tag-lg token">
+            <p>
+              {{ transaction.value_true }}
+              <span>{{ transaction.token_name }}</span>
+            </p>
+          </div>
+          {% if transaction.value_in_usdt_now %}
+            <div class="tag tag-lg usd">
+              <p>
+                {{ transaction.value_in_usdt_now }}
+                <span>USD</span>
+              </p>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
 {% endif %}
diff --git a/app/grants/views.py b/app/grants/views.py
@@ -225,10 +225,35 @@ def profile(request):
     """Show grants profile of logged in user."""
     # profile = request.user.profile if request.user.is_authenticated else None
     grants = Grant.objects.all()  # TODO: show only logged in users grants
+
+    history = [
+        {
+            'date': '16 Mar',
+            'value_true': 1.0,
+            'token_name': 'ETH',
+            'frequency': 'days',
+            'value_in_usdt_now': 80,
+            'title': 'Lorem ipsum dolor sit amet',
+            'link': 'https://etherscan.io/txs?a=0xcf267ea3f1ebae3c29fea0a3253f94f3122c2199&f=3',
+            'avatar_url': 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'
+        },
+        {
+            'date': '24 April',
+            'value_true': 90,
+            'token_name': 'DAI',
+            'frequency': 'months',
+            'value_in_usdt_now': 90,
+            'title': 'Lorem ipsum dolor sit amet',
+            'link': 'https://etherscan.io/txs?a=0xcf267ea3f1ebae3c29fea0a3253f94f3122c2199&f=3',
+            'avatar_url': 'https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg'
+        }
+    ]
+
     params = {
         'active': 'profile',
         'title': _('My Grants'),
-        'grants': grants
+        'grants': grants,
+        'history': history
     }
 
     return TemplateResponse(request, 'grants/profile.html', params)