From f883eaa74f9c33737a7b86bdf94b7fda6c3ac9f5 Mon Sep 17 00:00:00 2001 From: Max Daunarovich Date: Tue, 9 Apr 2019 19:43:51 +0300 Subject: [PATCH 01/15] Create css styles for results page elements --- app/assets/v2/css/base.css | 67 ----------------- app/assets/v2/css/results.css | 137 ++++++++++++++++++++++++++++++++++ 2 files changed, 137 insertions(+), 67 deletions(-) create mode 100644 app/assets/v2/css/results.css diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css index bd2520c93c7..7ef0cfc60a0 100644 --- a/app/assets/v2/css/base.css +++ b/app/assets/v2/css/base.css @@ -1441,63 +1441,6 @@ input.is-invalid { padding: 0.25rem 1.25rem; } -/* Results */ - -.results h2 { - font-size: 1.8rem; - font-weight: 700; -} - -.results h3 { - font-weight: 700; -} - -.results h5 { - font-weight: 700; - text-decoration: underline; -} - -.results .bounty_status { - margin-top: 1.5rem; -} - -.results .bounty_status p { - font-size: 1.2rem; -} - -.results #price_per_hour img{ - width: 100%; -} - -.results .bounty_status .box_1, -.box_2, -.box_3, -.box_4, -.box_5, -.box_6 { - float: left; - width: 1rem; - height: 1rem; - margin-top: .2rem; - margin-right: 1rem; -} - -.results ul#programming_languages { - text-align: center; -} - -.results ul#programming_languages li { - list-style: none; - padding: 0.5rem 2rem; - margin-bottom: 1.5rem; - display: inline-block; - border: 1px solid #999; -} - -.results ul#programming_languages li.selected{ - background-color: #eee; -} - .box_1 { color: #011f4b; border: 10px solid #011f4b; @@ -1528,16 +1471,6 @@ input.is-invalid { border: 10px solid #d3ddf0; } -.results .icon { - height: 6rem; - width: auto; -} - -.results p { - font-size: 1.3rem; - font-weight: 500; - margin-bottom: 0.5rem; -} @keyframes busyOverlay { from { diff --git a/app/assets/v2/css/results.css b/app/assets/v2/css/results.css new file mode 100644 index 00000000000..9e28cea2d4c --- /dev/null +++ b/app/assets/v2/css/results.css @@ -0,0 +1,137 @@ + +/* Results */ + +.results h2 { + font-size: 1.8rem; + font-weight: 700; +} + +.results h3 { + font-weight: 700; +} + +.results h5 { + font-weight: 700; + text-decoration: underline; +} + +.results .bounty_status { + margin-top: 1.5rem; +} + +.results .bounty_status p { + font-size: 1.2rem; +} + +.results #price_per_hour img{ + width: 100%; +} + +.results .bounty_status .box_1, +.box_2, +.box_3, +.box_4, +.box_5, +.box_6 { + float: left; + width: 1rem; + height: 1rem; + margin-top: .2rem; + margin-right: 1rem; +} + +.results ul#programming_languages { + text-align: center; +} + +.results ul#programming_languages li { + list-style: none; + padding: 0.5rem 2rem; + margin-bottom: 1.5rem; + display: inline-block; + border: 1px solid #999; +} + +.results ul#programming_languages li.selected{ + background-color: #eee; +} + +.results .icon { + height: 6rem; + width: auto; +} + +.grey-block{ + background-color: #fafafa; + padding: 3rem 1rem; +} + +.blue-grey-block{ + background-color: #f2f6f9; + padding: 3rem 1rem; +} + +.text-align-center{ + text-align: center; +} + +.title-text{ + color: #212529; + text-align: center; + font-size: 32px; + margin-bottom: 1em; +} + +.promo-text{ + margin: 0; + font-size: 28px; +} + +.platform-stats-container{ + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + --stat-container-width: 350px; +} + +.single-stat { + --image-size: 150px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: var(--stat-container-width); + margin-bottom: 20px; +} + +.single-stat p, +.single-stat h3 { + margin: 0; + text-align: center; +} + +.single-stat img { + width: var(--image-size); + height: auto; + margin-bottom: 0; +} + +h3.single-stat__title { + font-size: 24px; + font-weight: 900; + margin: 0; + margin-bottom: 4px; + color: #212529; +} + +p.single-stat__subtitle { + font-size: 20px; + margin-bottom: 4px; + color: #3d3d3d; +} + +p.single-stat__fineprint { + font-size: 14px; + color: #868789; +} From 1241ea98c2038ff7f99bf6453f3a97aa9e3d909a Mon Sep 17 00:00:00 2001 From: Max Daunarovich Date: Tue, 9 Apr 2019 19:45:17 +0300 Subject: [PATCH 02/15] Update html layout for stats containers to clean up code and allow better view on mobile --- app/retail/templates/results.html | 108 ++++++++++++++---------------- 1 file changed, 52 insertions(+), 56 deletions(-) diff --git a/app/retail/templates/results.html b/app/retail/templates/results.html index a84c8f7c749..3a752dc1fcb 100644 --- a/app/retail/templates/results.html +++ b/app/retail/templates/results.html @@ -15,8 +15,10 @@ along with this program. If not,see . {% endcomment %} +{% load staticfiles %} {% load humanize i18n static %} {% load kudos_extras %} + {% include 'shared/head.html' %} @@ -24,6 +26,7 @@ + @@ -70,67 +73,60 @@
{% trans "and by Type" %}
-
-
-
-
-

- Since its launch in November 2017, Gitcoin has helped {{funders|intcomma}} funders reach an audience of {{audience|intcomma}} developers. Gitcoin has facilitated {{transactions|intcomma}} complete transactions to {{recipients|intcomma}} unique coders. -

-
-
+ +
+
+

+ Since its launch + in November 2017, Gitcoin has helped {{funders|intcomma}} funders reach an audience of + {{audience|intcomma}} developers. Gitcoin has facilitated {{transactions|intcomma}} complete transactions + to {{recipients|intcomma}} unique coders. +

-
+
-
-
-

{% trans "Gitcoin Platform Stats" %} {% if keyword %}({{keyword}}){%endif%}

-
- -
- -

{{ bounty_median_pickup_time }} {% trans "Hours" %}

-

{% trans "Median Bounty Start Time" %}

- (after Funding) -
- -
- -

18,689

-

{% trans "Monthly Active Users" %}

- (but only 1% of them create on-chain tx's) -
- -
- -

{{ hourly_rate_distribution }}

-

{% trans "Hourly Rate Distribution" %}

- (for most bounties; more details here) -
- -
- -

{{ bounty_average_turnaround }}

-

{% trans "Median Bounty Turnaround Time" %}

- (after Start Work) -
- -
- -

{{ bounty_claimed_completion_rate|floatformat:1 }}%

-

{% trans "Bounty Completion Rate" %}

- (after Start Work) -
- -
- -

{{ alumni_count }}

-

GitCoin {% trans "Bounty Hunters Hired Full Time" %}

- (that we know of, at least 🤷‍♀️) +

{% trans "Gitcoin Platform Stats" %} {% if keyword %}({{keyword}}){%endif%}

+
+
+ +

{{ bounty_median_pickup_time }} {% trans "Hours" %}

+

{% trans "Median Bounty Start Time" %}

+

(after Funding)

+
+
+ +

{% trans "18,689" %}

+

{% trans "Monthly Active Users" %}

+

(but only 1% of them create on-chain tx's)

+
+
+ +

{{ hourly_rate_distribution }}

+

{% trans "Hourly Rate Distribution" %}

+

(for most bounties; more details here)

+
+
+ +

{{ bounty_average_turnaround }}

+

{% trans "Median Bounty Turnaround Time" %}

+

(after Start Work)

+
+
+ +

{{ bounty_claimed_completion_rate|floatformat:1 }}%

+

{% trans "Bounty Completion Rate" %}

+

((after Start Work)

+
+
+ +

{{ alumni_count }}

+

{% trans "Bounty Hunters Hired Full Time" %}

+

(that we know of, at least 🤷‍♀️)

+
@@ -197,7 +193,7 @@

-
+
{% for org in top_funders %} From c2a1e4491c9273972f477f8c9fb11ab51c83fc7c Mon Sep 17 00:00:00 2001 From: Max Daunarovich Date: Wed, 10 Apr 2019 13:19:05 +0300 Subject: [PATCH 03/15] Add color variables to root element --- app/assets/v2/css/base.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css index 7ef0cfc60a0..64e440bf746 100644 --- a/app/assets/v2/css/base.css +++ b/app/assets/v2/css/base.css @@ -2,6 +2,16 @@ /* ...because sometimes descending-specificity is a PIA to clean up */ +:root{ + --brand-white: #ffffff; + --brand-pink: #f6146d; + --brand-green: #37ec9b; + --brand-light-violet: #bbafd0; + --brand-vivid-violet: #773ae0; + --brand-dark-violet: #130b88; + --brand-black: #0d023a; +} + div.body { min-height: 400px; } From 98b558b43fe9349df98863126cdd0cea145f6bda Mon Sep 17 00:00:00 2001 From: Max Daunarovich Date: Wed, 10 Apr 2019 13:20:51 +0300 Subject: [PATCH 04/15] Update styles and layout for containers, headers and blocks, removing inline styles and using classes with BEM methodology naming instead --- app/assets/v2/css/results.css | 151 +++++++--- app/retail/templates/results.html | 466 +++++++++++++----------------- 2 files changed, 324 insertions(+), 293 deletions(-) diff --git a/app/assets/v2/css/results.css b/app/assets/v2/css/results.css index 9e28cea2d4c..8e130025640 100644 --- a/app/assets/v2/css/results.css +++ b/app/assets/v2/css/results.css @@ -1,43 +1,20 @@ /* Results */ -.results h2 { - font-size: 1.8rem; - font-weight: 700; -} - -.results h3 { - font-weight: 700; -} - .results h5 { font-weight: 700; text-decoration: underline; } -.results .bounty_status { - margin-top: 1.5rem; -} - -.results .bounty_status p { - font-size: 1.2rem; -} - -.results #price_per_hour img{ - width: 100%; -} - -.results .bounty_status .box_1, +.box_1, .box_2, .box_3, .box_4, .box_5, .box_6 { - float: left; - width: 1rem; - height: 1rem; - margin-top: .2rem; - margin-right: 1rem; + width: 20px; + height: 20px; + margin-right: 10px; } .results ul#programming_languages { @@ -61,18 +38,39 @@ width: auto; } -.grey-block{ - background-color: #fafafa; +/* BEM based styles*/ + +.content-block{ padding: 3rem 1rem; + text-align: center; +} + +.content-block--white{ + background-color: var(--brand-white); } -.blue-grey-block{ +.content-block--grey{ + background-color: #fafafa; +} + +.content-block--blue-grey{ background-color: #f2f6f9; - padding: 3rem 1rem; } -.text-align-center{ - text-align: center; +.content-block__title{ + color: var(--brand-black); + font-size: 32px; + font-weight: 700; + margin-bottom: 1em; +} + +.content-block__title--small-margin{ + margin-bottom: 0.25em; +} + +.content-block__subtitle{ + color: var(--brand-dark-violet); + font-size: 18px; } .title-text{ @@ -82,6 +80,37 @@ margin-bottom: 1em; } +.value-container{ + display: flex; + justify-content: center; +} + +.chart_container{ + display: flex; + flex-direction: column; +} + +.chart_container--big{ + width: 75%; +} + +.chart_container__content{ + flex: 1; +} + +.chart_container--flex{ + display: flex; + align-items: center; +} + +.chart_container__title +{ + color: var(--brand-light-violet); + font-size: 20px; + margin-bottom: 10px; + font-weight: 700; +} + .promo-text{ margin: 0; font-size: 28px; @@ -135,3 +164,59 @@ p.single-stat__fineprint { font-size: 14px; color: #868789; } + + +.bounty-status-breakdown{ + display: flex; + align-items: center; + justify-content: center; +} + +.bounty-status-list{ + text-align: left; + margin-left: 2rem; +} + +.bounty-status-list p{ + display: flex; + align-items: center; + margin: 0; + margin-bottom: 10px; + font-size: 16px; + color: var(--brand-dark-violet); +} + + +.bounty-grid { + display: flex; + max-width: 960px; + margin: 0 auto; + justify-content: center; + flex-wrap: wrap; +} + +.single-bounty{ + padding: 20px 20px 16px; + margin: 10px; + text-align: center; + border: 1px solid #ccc; +} + +.single-bounty__title { + font-weight: 700; + font-size: 18px; + margin-bottom: 4px; + color: var(--brand-dark-violet); +} + +.single-bounty__label{ + font-size: 14px; + text-transform: lowercase; + margin-bottom: 4px; + color: #777; +} +.single-bounty__payout{ + font-weight: 700; + font-size: 20px; + color: var(--brand-vivid-violet); +} diff --git a/app/retail/templates/results.html b/app/retail/templates/results.html index 3a752dc1fcb..c5f31cecaaf 100644 --- a/app/retail/templates/results.html +++ b/app/retail/templates/results.html @@ -37,44 +37,47 @@ {% include 'shared/minihero.html' with h1=title position_h1_below_logo=1 %}
-
-
-
-
-

- ${{ universe_total_usd|floatformat:2|intcomma }} of {% blocktrans %} - Total Platform Value - {% endblocktrans %} - {% if keyword %}({{keyword}}){%endif%} -

-
- - -
-
{% trans "Broken Down by Month" %}
-
+
+
+

+ ${{ universe_total_usd|floatformat:2|intcomma }} of {% blocktrans %} + Total Platform Value + {% endblocktrans %} + {% if keyword %}({{keyword}}){%endif%} +

+ +
+
+

{% trans "Broken Down by Month" %}

+
+
+
-
-
{% trans "and by Type" %}
-

{% trans "Bounties" %}

-

{% trans "Tips" %}

-

{% trans "Grants" %}

-

{% trans "Kudos" %}

-

{% trans "Ads" %}

-

{% trans "Ecosystem" %}

+
+

{% trans "and by Type" %}

+
+
+

{% trans "Bounties" %}

+

{% trans "Tips" %}

+

{% trans "Grants" %}

+

{% trans "Kudos" %}

+

{% trans "Ads" %}

+

{% trans "Ecosystem" %}

+
+
+
-
+

Since its launch @@ -87,83 +90,79 @@

{% trans "and by Type" %}
-
+
-

{% trans "Gitcoin Platform Stats" %} {% if keyword %}({{keyword}}){%endif%}

-
-
- -

{{ bounty_median_pickup_time }} {% trans "Hours" %}

-

{% trans "Median Bounty Start Time" %}

-

(after Funding)

-
-
- -

{% trans "18,689" %}

-

{% trans "Monthly Active Users" %}

-

(but only 1% of them create on-chain tx's)

-
-
- -

{{ hourly_rate_distribution }}

-

{% trans "Hourly Rate Distribution" %}

-

(for most bounties; more details here)

-
-
- -

{{ bounty_average_turnaround }}

-

{% trans "Median Bounty Turnaround Time" %}

-

(after Start Work)

-
-
- -

{{ bounty_claimed_completion_rate|floatformat:1 }}%

-

{% trans "Bounty Completion Rate" %}

-

((after Start Work)

-
-
- -

{{ alumni_count }}

-

{% trans "Bounty Hunters Hired Full Time" %}

-

(that we know of, at least 🤷‍♀️)

-
+

{% trans "Gitcoin Platform Stats" %} {% if keyword %}({{keyword}}){%endif%}

+
+
+ +

{{ bounty_median_pickup_time }} {% trans "Hours" %}

+

{% trans "Median Bounty Start Time" %}

+

(after Funding)

+
+
+ +

{% trans "18,689" %}

+

{% trans "Monthly Active Users" %}

+

(but only 1% of them create on-chain tx's)

+
+
+ +

{{ hourly_rate_distribution }}

+

{% trans "Hourly Rate Distribution" %}

+

(for most bounties; more details here)

+
+
+ +

{{ bounty_average_turnaround }}

+

{% trans "Median Bounty Turnaround Time" %}

+

(after Start Work)

+
+
+ +

{{ bounty_claimed_completion_rate|floatformat:1 }}%

+

{% trans "Bounty Completion Rate" %}

+

((after Start Work)

+
+
+ +

{{ alumni_count }}

+

{% trans "Bounty Hunters Hired Full Time" %}

+

(that we know of, at least 🤷‍♀️)

+
-
-
-
-
-

{% trans "Bounty Status Breakdown" %} {% if keyword %}({{keyword}}){%endif%}

-
- -
-
-
- +
+
+

{% trans "Bounty Status Breakdown" %} {% if keyword %}({{keyword}}){%endif%}

-
+
+
+
{% blocktrans %} -

{{ pct_open }}% open bounties

+

{{ pct_open }}% open bounties

{% endblocktrans %} {% blocktrans %} -

{{ pct_started }}% bounties with started work

+

{{ pct_started }}% bounties with started work

{% endblocktrans %} {% blocktrans %} -

{{ pct_done }}% completed bounties

+

{{ pct_done }}% completed bounties

{% endblocktrans %}
+ +
-
+
@@ -173,197 +172,157 @@

- {% for org in top_orgs %} - - - - {% endfor %} + {% for org in top_orgs %} + + + + {% endfor %}
-
+
-
-
-

- {% trans "Top Funders" %} {% if keyword %}({{keyword}}){%endif%} -

-
-
-
- {% for org in top_funders %} - - - - {% endfor %} -
+

+ {% trans "Top Funders" %} {% if keyword %}({{keyword}}){%endif%} +

+
+
+ {% for org in top_funders %} + + + + {% endfor %}
-
+ +
-
-
-

- {% trans "Top Mega-Funders" %} -

-
-
-
- - - - - - - - - -
+

{% trans "Top Mega-Funders" %}

+ +
+
+ + + + + + + + +
+
-
+
-
-
-

- {% trans "Top Coders" %} {% if keyword %}({{keyword}}){%endif%} -

-
-
-
- {% for org in top_coders %} - - - - {% endfor %} -
+

{% trans "Top Coders" %} {% if keyword %}({{keyword}}){%endif%}

+
+
+ {% for org in top_coders %} + + + + {% endfor %}
+
- {% trans "Checkout the Leaderboard" %} + {% trans "Checkout the Leaderboard" %}
{% if not keyword %} -
-
-
-
-

{% trans "Hourly Rates of Bounties" %} {% if keyword %}({{keyword}}){%endif%}

-
-
- -
-
- -
-
+
+
+

{% trans "Hourly Rates of Bounties" %} {% if keyword %}({{keyword}}){%endif%}

-
-
-

{% trans "Hourly Rates Vary by Bounty Size" %}

+
+
+ +
-
-
- {% for the_title, hrd in hourly_rate_distribution_by_range.items %} - {% if hrd %} -
- {{the_title | title}} -
- {% trans "Bounties Pay" %} -
- {{hrd}}/hr -
- {% endif %} - {% endfor %} -
-
-
-

{% trans "And By Skill" %}

+

{% trans "Hourly Rates Vary by Bounty Size" %}

+
+ {% for the_title, hrd in hourly_rate_distribution_by_range.items %} + {% if hrd %} +
+
{{the_title | title}}
+
{% trans "Bounties Pay" %}
+
{{hrd}}/hr
+
+ {% endif %} + {% endfor %} +
+ +

{% trans "And By Skill" %}

+ +
+ {% for the_title, hrd in skill_rate_distribution_by_range.items %} + {% if hrd %} +
+
{{the_title | title}}
+
{% trans "Bounties Pay" %}
+
{{hrd}}/hr
+
+ {% endif %} + {% endfor %} +
+ +
+
+ {% trans "Read More about Pricing on Gitcoin" %} +
-
-
- {% for the_title, hrd in skill_rate_distribution_by_range.items %} - {% if hrd %} -
- {{the_title | title}} -
- {% trans "Bounties Pay" %} -
- {{hrd}}/hr -
- {% endif %} - {% endfor %} -
-
-
- {% trans "Read More about Pricing on Gitcoin" %} -
-
-
{% endif %} {% if not keyword and kudos_tokens %} -
-
-
-
-

- {% trans "Top Kudos" %} -

-
-
+
+
+

{% trans "Top Kudos" %}

-
-
-

Kudos is a way of showing your appreciation for another Gitcoin member. It's also a way to showcase special skills that a member might have, such as Pythonista, or Design Star. Kudos tokens can also be bought and sold on the Kudos Marketplace.

-
-
-
+
+
+

Kudos is a way of showing your appreciation for another Gitcoin member. It's also a way to showcase special skills that a member might have, such as Pythonista, or Design Star. Kudos tokens can also be bought and sold on the Kudos Marketplace.

+
+
+
{% for kudos in kudos_tokens %} {% endfor %} +
-
{% endif %} -
+
-
-
-

{% trans "Testimonials" %}

-
-
+

{% trans "Testimonials" %}

+

from real Gitcoin community members

-
-

from real Gitcoin community members

-
-
@@ -372,13 +331,9 @@

{% trans "Testimonials" %}

-
+
-
-
-

{% trans "Joe Dominance Index" %} {% if keyword %}({{keyword}}){%endif%}

-
-
+

{% trans "Joe Dominance Index" %} {% if keyword %}({{keyword}}){%endif%}

Gitcoin is a double sided market of funders and developers. In order to jump start the marketplace and dogfood our own product, we've funded some work on the platform ourselves. The Joe Dominance Index (a portmeanteau of the Bitcoin Dominance Index and the name of Gitcoin's largest investor, Consensys's CEO Joe Lubin) is a measure of the percentage of work on the platform that is funded by us.

@@ -395,12 +350,10 @@

{% trans "Joe Dominance Index" %} {% if keyword %}({{keyword}}){%endif%}

-
+
+

{% trans "Community Growth" %} {% if keyword %}({{keyword}}){%endif%}

-
-

{% trans "Community Growth" %} {% if keyword %}({{keyword}}){%endif%}

-