Skip to content

Commit

Permalink
card: clickable + image (#2843)
Browse files Browse the repository at this point in the history 
* card: added image to card

* make card clickable

* updated grant detail format
  • Loading branch information
@thelostone-mc
thelostone-mc authored and Mark Beacom committed Nov 15, 2018
1 parent 5fce377 commit bd0fac5
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 53 deletions.
4 changes: 4 additions & 0 deletions app/assets/v2/css/grants/card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@
display: flex;
}

.grant-item__img img {
width: 100%;
}

.grant-item__owner-image {
height: 35px;
width: 35px;
Expand Down
12 changes: 10 additions & 2 deletions app/assets/v2/css/grants/detail.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,15 @@
position: relative;
}

.grant__title,
.grant__title a {
.grant__title {
color: #43484D;
}

.grant__url a {
text-decoration: none;
color: #0D0764;
}

.inline-edit {
border: none;
}
Expand All @@ -84,6 +88,10 @@ textarea.editable {
width: 100%;
}

#form--input__description {
text-align: justify;
}

.article-title,
.grant__description,
.article-description {
Expand Down
6 changes: 2 additions & 4 deletions app/assets/v2/css/grants/grant.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,8 @@
}

.grant-item__owner-handle span,
.grant-item__member-handle span {
color: #0D0764;
}

.grant-item__owner-handle a,
.grant-item__member-handle span,
.progress-text span {
color: #0D0764;
}
Expand Down
78 changes: 45 additions & 33 deletions app/grants/templates/grants/card.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,42 +16,54 @@
{% endcomment %}
{% load i18n static humanize i18n %}
<div class="grant-item">
<div class="grant-item__content py-4 px-3">
<h2 class="grant-item__title font-subheader"><a href="{% url 'grants:details' grant.id %}">{{ grant.title|truncatechars:60 }}</a></h2>
<p class="grant-item__pitch font-caption">{{ grant.description|truncatechars:190 }}</p>
<div class="grant-item__footer">
<div class="grant-item__owner mt-3 mb-4">
<div class="grant-item__owner-image mr-2">
<img src="{% if grant.admin_profile.avatar_url %}{{ grant.admin_profile.avatar_url }}{% else %}https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg{% endif %}">
</div>
<div class="grant-item__owner-handle font-body">{% trans 'by' %} <span>{{ grant.admin_profile.handle|default:'anonymous' }}</span></div>
</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 }} ETH</div>
<div class="grant-item__funding-label font-caption">{% trans 'Current' %}</div>
<a href="{% url 'grants:details' grant.id %}">
<div class="grant-item__img">
<img src="{% if grant.logo and grant.logo.url %}{{ grant.logo.url }}{% else %}{% static 'v2/images/bitmap.png' %}{% endif %}">
</div>
<div class="grant-item__content py-4 px-3">
<h2 class="grant-item__title font-subheader"><a href="{% url 'grants:details' grant.id %}">{{ grant.title|truncatechars:60 }}</a></h2>
<p class="grant-item__pitch font-caption">{{ grant.description|truncatechars:190 }}</p>
<div class="grant-item__footer">
<div class="grant-item__owner mt-3 mb-4">
<div class="grant-item__owner-image mr-2">
<img src="{% if grant.admin_profile.avatar_url %}{{ grant.admin_profile.avatar_url }}{% else %}https://c.gitcoin.co/avatars/57e79c0ae763bb27095f6b265a1a8bf3/thelostone-mc.svg{% endif %}">
</div>
<div class="grant-item__owner-handle font-body">
{% trans 'by' %}
<span>
<a href="{% url 'profile' grant.admin_profile.handle %}" target="_blank" rel="noopener noreferrer">
{{ grant.admin_profile.handle|default:'anonymous' }}
</a>
</span>
</div>
</div>
<div class="grant-item__funding-item">
<div class="grant-item__funding-number font-body">{{ grant.amount_goal|floatformat:2|intcomma }} ETH</div>
<div class="grant-item__funding-label font-caption">{% trans 'Goal' %}</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>
<div class="grant-item__state mt-3">
{% if grant %} <!-- TODO: wire up grant state -->
<div class="grant-item__state-active">
<div class="inner"></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 }} ETH</div>
<div class="grant-item__funding-label font-caption">{% trans 'Current' %}</div>
</div>
<span class="grant-item__state-label font-caption">Active</span>
{% else %}
<div class="grant-item__state-completed">
<div class="inner"></div>
<div class="grant-item__funding-item">
<div class="grant-item__funding-number font-body">{{ grant.amount_goal|floatformat:2|intcomma }} ETH</div>
<div class="grant-item__funding-label font-caption">{% trans 'Goal' %}</div>
</div>
<span class="grant-item__state-label font-caption">Completed</span>
{% endif %}
</div>
<div class="grant-item__state mt-3">
{% if grant %} <!-- TODO: wire up grant state -->
<div class="grant-item__state-active">
<div class="inner"></div>
</div>
<span class="grant-item__state-label font-caption">Active</span>
{% else %}
<div class="grant-item__state-completed">
<div class="inner"></div>
</div>
<span class="grant-item__state-label font-caption">Completed</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</a>
</div>
29 changes: 15 additions & 14 deletions app/grants/templates/grants/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,16 @@
<div class="row">
<div class="col-12 col-md-6 col-lg-5">
<div class="grant__specs">
<h1 class="grant__title font-title-xl mb-4">
<h1 class="grant__title font-title-lg">
{% if is_admin %}
<div class="font-caption mt-4">
<span class="font-weight-bold">Edit Title</span>
<i id="edit--title" class="far fa-edit ml-2"></i>
</div>
{% endif %}
<input type="text" id="form--input__title" class="p-0 inline-edit" value="{{ grant.title }}" readonly>
</h1>
<p class="grant__url font-subheader mb-4">
{% if is_admin %}
<div>
<div class="font-caption">
Expand All @@ -50,19 +59,11 @@ <h1 class="grant__title font-title-xl mb-4">
</div>
{% else %}
<a href="{{ grant.reference_url }}" target="_blank">
<i class="fab fa-github font-title"></i>
<i class="fas fa-link mr-1"></i>
{{ grant.reference_url }}
</a>
{% endif %}
<span>
{% if is_admin %}
<div class="font-caption mt-4">
<span class="font-weight-bold">Edit Title</span>
<i id="edit--title" class="far fa-edit ml-2"></i>
</div>
{% endif %}
<input type="text" id="form--input__title" class="p-0 inline-edit" value="{{ grant.title }}" readonly>
</span>
</h1>
</p>
<div class="grant-item__owner mb-4">
{% if is_admin %}
<div class="font-caption">
Expand All @@ -87,7 +88,7 @@ <h1 class="grant__title font-title-xl mb-4">
</div>
{% endif %}
</div>
<p class="grant__description font-body">
<p class="grant__description font-subheader">
{% if is_admin %}
<div class="font-caption">
<span class="font-weight-bold">
Expand Down Expand Up @@ -115,7 +116,7 @@ <h1 class="grant__title font-title-xl mb-4">
</div>
{% else %}
{% if grant.team_members %}
<p class="font-caption font-weight-bold">Team Members</p>
<p class="font-body font-weight-bold">Team Members</p>
<div class="grant-item__members">
{% for team_member in grant.team_members.all %}
<div class="font-caption grant-item__member mr-4">
Expand Down

0 comments on commit bd0fac5

Please sign in to comment.