Skip to content

Commit

Permalink
Merge pull request #4297 from thelostone-mc/prettify
Browse files Browse the repository at this point in the history 
grants/index: clean up landing page
  • Loading branch information
@SaptakS
SaptakS authored Apr 27, 2019
2 parents c5993cf + c5e5b4a commit a61e561
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 60 deletions.
70 changes: 54 additions & 16 deletions app/assets/v2/css/grants/grant.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
.header {
background-image: none;
background: linear-gradient(to right top, #0fce7c, #00a5a1, #0077b5, #0046a1, #0d0764);
animation: gradient 40s ease infinite;
background-size: 200% 200% !important;
}

.header .embed-responsive {
border-radius: 3px;
}

.white-icon {
width: 14px;
height: 20px;
Expand Down Expand Up @@ -176,6 +187,36 @@
font-size: 12px;
}

#grants-details {
padding-bottom: 1em;
}

#grants_nav{
border-bottom: 1px solid #333333;
text-align: left;
width: 100%;
}

#grants_nav a{
color: #333333;
margin-right: 30px;
}

#grants_nav a:hover{
font-weight: 700;
}

#grants_nav .selected{
font-weight: 1000;
color: #3f24f9;
}

@media (min-width: 1200px) {
.header .container {
max-width: 1240px;
}
}

@media (max-width: 767.98px) {
.search {
margin-left: 0rem;
Expand All @@ -194,23 +235,20 @@
}
}

#grants-details {
padding-bottom: 1em;
@-webkit-keyframes gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}

#grants_nav{
border-bottom: 1px solid #333333;
text-align: left;
width: 100%;
}
#grants_nav a{
color: #333333;
margin-right: 30px;
}
#grants_nav a:hover{
font-weight: 700;
@-moz-keyframes gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
#grants_nav .selected{
font-weight: 1000;
color: #3f24f9;

@keyframes gradient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
89 changes: 45 additions & 44 deletions app/grants/templates/grants/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@
<div class="container-fluid header dash">
{% include 'shared/top_nav.html' with class='d-md-flex' %}
{% include 'grants/nav.html' %}
<div class="container py-5">
<div class="grants-hero white">
<div class="container py-5 ">
<div class="grants-hero white my-5">
<div class="row">
<div class="col-12 col-md-6 order-md-last mb-5 mb-md-0">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/eVgEWSPFR2o?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
<div class="m-auto col-12 col-md-6 offset-lg-1 col-lg-5">
<h1 class="font-title-xl">{% trans 'Provide sustainable funding for Open Source with Gitcoin Grants' %}</h1>
<p class="my-4 pt-1 font-subheader">
<h1 class="font-title-xl font-weight-semibold">{% trans 'Provide sustainable funding for Open Source with Gitcoin Grants' %}</h1>
<p class="my-4 pt-1 font-header">
{% blocktrans %}
Gitcoin Grants, powered by the <a target="_blank" rel="noopener noreferrer" href="http://1337alliance.com/">EIP 1337 standard</a>
, are a fast, easy and secure way to provide recurring token contributions to your favorite OSS maintainers. <br/><br/>
Expand All @@ -53,27 +53,32 @@ <h1 class="font-title-xl">{% trans 'Provide sustainable funding for Open Source
</div>
</div>

<div class="container-fluid py-5 grants-matching">
<div class="container">
<div class="row">
<div class="container-fluid py-5 grants-matching">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Round 2 of Matching is now closed! Round 3 details coming soon.</h2>
<h5>We will be announcing the match amounts soon..</h5>
<p>A special thanks to the following partners who have offered to match contributions to Gitcoin Grants. <a href="https://medium.com/gitcoin/gitcoin-grants-50k-oss-fund-e20e09dc2110">(Read Announcement Here)</a></p>

{% if not user.is_authenticated %}
<a class="btn btn-gc-blue" href="{% url 'social:begin' 'github' %}?next={{ request.get_full_path }}">{% trans 'Become a Matching Partner' %}</a>
{% else %}
<div class="btn btn-gc-blue" onclick="processPayment()">
{% trans 'Become a Matching Partner' %}
</div>
{% endif %}

<h2 class="mb-1">Round 3 details coming soon.</h2>
<h3 class="mb-3 font-header">We will be announcing the match amounts soon!</h5>
<h2 class="mb-3 font-title">Round 2 of Matching is now closed!</h2>
<p class="mb-4">
A special thanks to the following partners who have offered to match contributions to Gitcoin Grants.
<a href="https://medium.com/gitcoin/gitcoin-grants-50k-oss-fund-e20e09dc2110">(Read Announcement Here)
</a>
</p>

</div>
<div class="col-md-6"><img src="{% static 'v2/images/grants/robots.png' %}" class="rounded mx-auto d-block"/></div>
{% if not user.is_authenticated %}
<a class="btn btn-gc-blue" href="{% url 'social:begin' 'github' %}?next={{ request.get_full_path }}">{% trans 'Become a Matching Partner' %}</a>
{% else %}
<div class="btn btn-gc-blue" onclick="processPayment()">
{% trans 'Become a Matching Partner' %}
</div>
{% endif %}
</div>
{% if current_partners or past_partners %}
<div class="col-md-6">
<img src="{% static 'v2/images/grants/robots.png' %}" class="rounded mx-auto d-block"/>
</div>
</div>
{% if current_partners or past_partners %}
<ul class="nav nav-tabs my-5" role="tablist">
<li class="nav-item">
<a class="nav-link nav-line active" id="currentpartners-tab" data-toggle="tab" href="#currentpartners" role="tab" aria-controls="currentpartners" aria-selected="true">Current Partners</a>
Expand All @@ -85,26 +90,23 @@ <h5>We will be announcing the match amounts soon..</h5>
</li>
</ul>


<div class="tab-content">
<div class="tab-pane fade show active" id="currentpartners" role="tabpanel" aria-labelledby="currentpartners-tab">
{% if current_partners|length == 0 %}
No current partners.
{% endif %}
{% for current_partner in current_partners %}
<div style="text-align:center; display: inline-block; padding: 10px;">
<h5>
<a href="/profile/{{current_partner.profile.handle}}">
@{{current_partner.profile.handle}}
</a>
</h5>
<a href="/profile/{{current_partner.profile.handle}}">
<img style="max-width:100px; border-radius: 50px;" src="/dynamic/avatar/{{current_partner.profile.handle}}">
</a>
<p>${{current_partner.amount|floatformat}}</p>
</div>
{% endfor %}
</div>
<div class="tab-pane fade show active" id="currentpartners" role="tabpanel" aria-labelledby="currentpartners-tab">
{% if current_partners|length == 0 %} No current partners.{% endif %}
{% for current_partner in current_partners %}
<div style="text-align:center; display: inline-block; padding: 10px;">
<h5>
<a href="/profile/{{current_partner.profile.handle}}">
@{{current_partner.profile.handle}}
</a>
</h5>
<a href="/profile/{{current_partner.profile.handle}}">
<img style="max-width:100px; border-radius: 50px;" src="/dynamic/avatar/{{current_partner.profile.handle}}">
</a>
<p>${{current_partner.amount|floatformat}}</p>
</div>
{% endfor %}
</div>

<div class="tab-pane fade" id="pastpartners" role="tabpanel" aria-labelledby="pastpartners-tab">
{% for past_partner in past_partners %}
Expand All @@ -116,10 +118,9 @@ <h5>@{{past_partner.profile.handle}}</h5>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>

</div>

<div class="container-fluid py-5 grants-search">
<div class="container">
Expand Down

0 comments on commit a61e561

Please sign in to comment.