From f0e8946f1604e5dca3f5e3385a384d6eedbbb38e Mon Sep 17 00:00:00 2001 From: Aditya Anand Date: Fri, 23 Nov 2018 01:52:53 +0530 Subject: [PATCH 1/5] grants/fund : redesign --- app/assets/v2/css/base.css | 4 + app/assets/v2/css/forms/input.css | 2 +- app/assets/v2/css/grants/fund.css | 49 +++++- app/assets/v2/js/grants/fund.js | 7 +- app/grants/templates/grants/fund.html | 227 ++++++++++++++------------ 5 files changed, 178 insertions(+), 111 deletions(-) diff --git a/app/assets/v2/css/base.css b/app/assets/v2/css/base.css index a2fbd2c0125..82c57049124 100644 --- a/app/assets/v2/css/base.css +++ b/app/assets/v2/css/base.css @@ -124,6 +124,10 @@ span { border-radius: 4px !important; } +.font-weight-semibold { + font-weight: 600; +} + #tutorials li{ list-style: none; } diff --git a/app/assets/v2/css/forms/input.css b/app/assets/v2/css/forms/input.css index 63b2cc24ed1..1775032bdba 100644 --- a/app/assets/v2/css/forms/input.css +++ b/app/assets/v2/css/forms/input.css @@ -1,6 +1,6 @@ .form__input { background-color: #FFF; - border-radius: 3px; + border-radius: 2px; border: 1px solid #D3D3D3; font-size: 14px; padding: 5px 7px; diff --git a/app/assets/v2/css/grants/fund.css b/app/assets/v2/css/grants/fund.css index df2687351b7..634d7dc5ed6 100644 --- a/app/assets/v2/css/grants/fund.css +++ b/app/assets/v2/css/grants/fund.css @@ -2,11 +2,52 @@ color: #43484D; } -#frequency_count { - height: 40px !important; +#grants_form input { + height: 2.5rem !important; } -.grant-banner-img { +.select2-container--default .select2-selection--single, +#grants_form input { + border-color: #0D0764 !important; +} + +.grant-banner img { max-height: 20rem; + width: 100%; overflow-y: hidden; -} \ No newline at end of file +} + +.grant-banner { + background-color: #F2F6F9; + width: 100%; +} + +.grant-banner .grant-title { + font-weight: 600; +} + +.grant-banner .grant-title a { + color: #000; +} + +.summary p { + margin: 0 0 4px; +} + +.summary i { + font-size: 6px; + position: relative; + bottom: 2px; +} + +@media (max-width: 767.98px) { + + .banner-img { + text-align: center; + } + + .banner-img img { + width: auto; + max-width: 100%; + } +} diff --git a/app/assets/v2/js/grants/fund.js b/app/assets/v2/js/grants/fund.js index 3a7ce486954..b3c82c5dd76 100644 --- a/app/assets/v2/js/grants/fund.js +++ b/app/assets/v2/js/grants/fund.js @@ -1,12 +1,15 @@ /* eslint-disable no-console */ $(document).ready(function() { - $('#period').select2(); - $('.js-select2').each(function() { $(this).select2(); }); + $('.select2-selection__rendered').hover(function () { + $(this).removeAttr('title'); + }); + + // alert("Just so you know, you will perform two actions in MetaMask on this page!") $('#js-fundGrant').validate({ diff --git a/app/grants/templates/grants/fund.html b/app/grants/templates/grants/fund.html index 849a2bc8e9f..dedacaa4ecf 100644 --- a/app/grants/templates/grants/fund.html +++ b/app/grants/templates/grants/fund.html @@ -36,10 +36,6 @@ -
- -
-
{% trans "WARNING: Gitcoin Grants is in" %} @@ -57,134 +53,157 @@
-
-

-
{% trans "Fund" %} - - {{ grant.title }} - - {% trans "Grant" %} -
-
- {% trans "by" %} - - {{ grant.admin_profile }} - +
+
+

{% trans "Fund Grant" %}

+
+
+ -

- -
-
- {% csrf_token %} -
-
-
-
-
+
+

+ {{ grant.title }} +

+ +
+ {% trans "by" %} + + {{ grant.admin_profile }} + +
+ +
+
+
+
+
+
+
+ {{ grant.amount_received|floatformat:2|intcomma }} DAI +

Current

+
+ {{ grant.amount_goal|floatformat:2|intcomma }} DAI +

Goal

+
+
+
+
-
+
+
+
+

+ {{ grant.admin_profile }} {% trans "is accepting contributions in "%} + {% if grant_has_no_token %} + {% trans "any token." %} + {% else %} + {{ token_symbol }} + {% endif %} +

+ +
+ + {% csrf_token %} +
+
+
+
-
- {{ grant.amount_received|floatformat:2|intcomma }} DAI -

Current

+
+
-
- {{ grant.amount_goal|floatformat:2|intcomma }} DAI -

Goal

+
+
-
- {% if not grant_has_no_token %} -
- {{ grant.admin_profile.handle }} {% trans 'is accepting contributions in '%}{{ grant.token_symbol }} -
- {% endif %} -

- {{ grant.description }} -

-
-
- {% if grant_has_no_token %}
- +
-
-
- -
+
+ +
+
+ {% if grant_has_no_token %} +
+ +
+ {% else %} + {{ token_symbol }} + {% endif %}
- {% endif %} - -
- -
-
- -
-
- -
-
-
- -
- -
-
- -
-
-
-
-
- +
+
-
-
-
-
- +
+

Summary

+

+ + {% trans "Your contribution will stop once this payment has happened" %} + - times. +

+

+ + {% trans "You are contributing" %} + - + - + {% trans "to this grant every" %} + - + -. +

+

+ + {% trans "The first payment will happen immediately after you click Contribute to Grant." %} +

+

+ + {% trans "Note: You will have to approve 2 transactions via MetaMask on submit." %} +

+
+ +
+
+
+ +
-
-
- - - - - - - - - - - -
- +
+ + + + + + + + + + + +
+ +
From 9b4f7f7a5a962c729360a772bda8ff186702c92f Mon Sep 17 00:00:00 2001 From: Aditya Anand Date: Fri, 23 Nov 2018 02:58:47 +0530 Subject: [PATCH 2/5] grants/fund: added summary --- app/assets/v2/js/grants/fund.js | 31 ++++++++++++++++++++++++++- app/grants/templates/grants/fund.html | 20 +++++++++++------ 2 files changed, 43 insertions(+), 8 deletions(-) diff --git a/app/assets/v2/js/grants/fund.js b/app/assets/v2/js/grants/fund.js index b3c82c5dd76..7cc585624f7 100644 --- a/app/assets/v2/js/grants/fund.js +++ b/app/assets/v2/js/grants/fund.js @@ -5,10 +5,11 @@ $(document).ready(function() { $(this).select2(); }); - $('.select2-selection__rendered').hover(function () { + $('.select2-selection__rendered').hover(function() { $(this).removeAttr('title'); }); + updateSummary(); // alert("Just so you know, you will perform two actions in MetaMask on this page!") @@ -172,3 +173,31 @@ $(document).ready(function() { $('#js-token').select2(); }); }); + +const updateSummary = (element) => { + + $('#summary-period').html($('input#frequency_count').val()); + $('#summary-amount').html($('input#amount').val() ? $('input#amount').val() : 0); + $('#summary-frequency').html($('input#period').val() ? $('input#period').val() : 0); + $('#summary-frequency-unit').html($('#frequency_unit').val()); + + $('#js-token').on('select2:select', event => { + $('#summary-token').html(event.params.data.text); + }); + + $('#frequency_unit').on('select2:select', event => { + $('#summary-frequency-unit').html(event.params.data.text); + }); + + $('input#frequency_count').on('input', () => { + $('#summary-period').html($('input#frequency_count').val()); + }); + + $('input#amount').on('input', () => { + $('#summary-amount').html($('input#amount').val()); + }); + + $('input#period').on('input', () => { + $('#summary-frequency').html($('input#period').val()); + }); +}; diff --git a/app/grants/templates/grants/fund.html b/app/grants/templates/grants/fund.html index dedacaa4ecf..374aff5c63d 100644 --- a/app/grants/templates/grants/fund.html +++ b/app/grants/templates/grants/fund.html @@ -127,7 +127,7 @@

- +
{% if grant_has_no_token %} @@ -147,7 +147,7 @@

- +

@@ -157,16 +157,22 @@

{% trans "Your contribution will stop once this payment has happened" %} - - times. + - times.

{% trans "You are contributing" %} - - - - + - + + {% if not grant_has_no_token %} + {{ token_symbol }} + {% else %} + - + {% endif %} + {% trans "to this grant every" %} - - - -. + - + -.

From 6db44633f6a844176a83dc0bf574745baa195505 Mon Sep 17 00:00:00 2001 From: Aditya Anand Date: Sat, 24 Nov 2018 12:16:50 +0530 Subject: [PATCH 3/5] grants: added metamask connect banner across new + fund + cancel --- app/assets/v2/css/buttons.css | 2 +- app/assets/v2/js/grants/shared.js | 16 +++++++++++++++- app/assets/v2/js/metamask-approval.js | 2 +- .../templates/shared/connect_metamask.html | 9 ++++++++- app/grants/templates/grants/cancel.html | 3 ++- app/grants/templates/grants/fund.html | 5 +++-- app/grants/templates/grants/new.html | 1 + 7 files changed, 31 insertions(+), 7 deletions(-) diff --git a/app/assets/v2/css/buttons.css b/app/assets/v2/css/buttons.css index 7743323242e..1d9456091eb 100644 --- a/app/assets/v2/css/buttons.css +++ b/app/assets/v2/css/buttons.css @@ -192,5 +192,5 @@ button:focus { background: none; color: white; border: 2px solid white; - border-radius: 10px; + border-radius: 4px; } diff --git a/app/assets/v2/js/grants/shared.js b/app/assets/v2/js/grants/shared.js index 8754755274b..605e7755a61 100644 --- a/app/assets/v2/js/grants/shared.js +++ b/app/assets/v2/js/grants/shared.js @@ -19,7 +19,7 @@ $(document).ready(function() { }); }; - setInterval(listen_web3_1_changes, 300); + setInterval(listen_web3_1_changes, 1000); const show_error_banner = (result) => { if ($('#grants_form').length) { @@ -32,10 +32,22 @@ $(document).ready(function() { $('#grants_form').addClass('hidden'); $('.submit_bounty .newsletter').addClass('hidden'); $('#unlock_metamask_error').css('display', 'none'); + $('#connect_metamask_error').css('display', 'none'); $('#no_issue_error').css('display', 'none'); mixpanel_track_once('No Metamask Error', params); + } else if (is_metamask_unlocked && !is_metamask_approved) { + $('#connect_metamask_error').css('display', 'block'); + $('#unlock_metamask_error').css('display', 'none'); + $('#zero_balance_error').css('display', 'none'); + $('#no_metamask_error').css('display', 'none'); + $('#robot_error').removeClass('hidden'); + $('#grants_form').addClass('hidden'); + $('.submit_bounty .newsletter').addClass('hidden'); + $('#no_issue_error').css('display', 'none'); + mixpanel_track_once('Unlock Metamask Error', params); } else if (!result) { $('#unlock_metamask_error').css('display', 'block'); + $('#connect_metamask_error').css('display', 'none'); $('#zero_balance_error').css('display', 'none'); $('#no_metamask_error').css('display', 'none'); $('#robot_error').removeClass('hidden'); @@ -49,6 +61,7 @@ $(document).ready(function() { $('#grants_form').addClass('hidden'); $('.submit_bounty .newsletter').addClass('hidden'); $('#unlock_metamask_error').css('display', 'none'); + $('#connect_metamask_error').css('display', 'none'); $('#no_metamask_error').css('display', 'none'); $('#no_issue_error').css('display', 'none'); mixpanel_track_once('Zero Balance Metamask Error', params); @@ -56,6 +69,7 @@ $(document).ready(function() { $('#zero_balance_error').css('display', 'none'); $('#unlock_metamask_error').css('display', 'none'); $('#no_metamask_error').css('display', 'none'); + $('#connect_metamask_error').css('display', 'none'); $('#no_issue_error').css('display', 'block'); $('#robot_error').addClass('hidden'); $('#grants_form').removeClass('hidden'); diff --git a/app/assets/v2/js/metamask-approval.js b/app/assets/v2/js/metamask-approval.js index c4577d4c170..15ef58dc5b8 100644 --- a/app/assets/v2/js/metamask-approval.js +++ b/app/assets/v2/js/metamask-approval.js @@ -51,7 +51,7 @@ function ask_metamask_connection() { shown_on = [ '/tip/send/2', '/kudos/send', '/ens' ]; var len = page_url.length - 1; - + if (page_url.lastIndexOf('/') === len) { page_url = page_url.substring(0, len); } diff --git a/app/dashboard/templates/shared/connect_metamask.html b/app/dashboard/templates/shared/connect_metamask.html index 04c3cd0a4ac..02e741b13ff 100644 --- a/app/dashboard/templates/shared/connect_metamask.html +++ b/app/dashboard/templates/shared/connect_metamask.html @@ -24,7 +24,7 @@

{% trans "Please Connect to Metamask to Continue" %}

{% trans "Please connect to Metamask and refresh the page." %} - +

@@ -32,3 +32,10 @@

{% trans "Please Connect to Metamask to Continue" %}

+ + diff --git a/app/grants/templates/grants/cancel.html b/app/grants/templates/grants/cancel.html index e5d2ca3a58f..62e767f8334 100644 --- a/app/grants/templates/grants/cancel.html +++ b/app/grants/templates/grants/cancel.html @@ -31,13 +31,14 @@ {% include 'shared/no_metamask_error.html' %} {% include 'shared/zero_balance_error.html' %} {% include 'shared/unlock_metamask.html' %} + {% include 'shared/connect_metamask.html' %}
- diff --git a/app/grants/templates/grants/fund.html b/app/grants/templates/grants/fund.html index 374aff5c63d..5933f510bf2 100644 --- a/app/grants/templates/grants/fund.html +++ b/app/grants/templates/grants/fund.html @@ -32,6 +32,7 @@ {% include 'shared/no_metamask_error.html' %} {% include 'shared/zero_balance_error.html' %} {% include 'shared/unlock_metamask.html' %} + {% include 'shared/connect_metamask.html' %}
@@ -48,12 +49,12 @@
- -
+

{% trans "Fund Grant" %}

diff --git a/app/grants/templates/grants/new.html b/app/grants/templates/grants/new.html index 11bab9104cf..89d99cc92b7 100644 --- a/app/grants/templates/grants/new.html +++ b/app/grants/templates/grants/new.html @@ -33,6 +33,7 @@ {% include 'shared/no_metamask_error.html' %} {% include 'shared/zero_balance_error.html' %} {% include 'shared/unlock_metamask.html' %} + {% include 'shared/connect_metamask.html' %}
From c851a358dbb4607d67b1de7a3e659aee98c4da29 Mon Sep 17 00:00:00 2001 From: Aditya Anand Date: Mon, 26 Nov 2018 13:49:10 +0530 Subject: [PATCH 4/5] grant/fund : fixed variable not declared --- app/assets/v2/js/grants/fund.js | 5 +++-- app/grants/templates/grants/detail.html | 10 +++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/app/assets/v2/js/grants/fund.js b/app/assets/v2/js/grants/fund.js index 7cc585624f7..2f7f6976a48 100644 --- a/app/assets/v2/js/grants/fund.js +++ b/app/assets/v2/js/grants/fund.js @@ -41,11 +41,12 @@ $(document).ready(function() { } let deployedSubscription = new web3.eth.Contract(compiledSubscription.abi, data.contract_address); + let deployedToken; if (data.token_address != '0x0000000000000000000000000000000000000000') { - let deployedToken = new web3.eth.Contract(compiledToken.abi, data.token_address); + deployedToken = new web3.eth.Contract(compiledToken.abi, data.token_address); } else { - let deployedToken = new web3.eth.Contract(compiledToken.abi, data.denomination); + deployedToken = new web3.eth.Contract(compiledToken.abi, data.denomination); } deployedToken.methods.decimals().call(function(err, decimals) { diff --git a/app/grants/templates/grants/detail.html b/app/grants/templates/grants/detail.html index 99c2cfec40d..732585fcefa 100644 --- a/app/grants/templates/grants/detail.html +++ b/app/grants/templates/grants/detail.html @@ -99,11 +99,6 @@

- {% if user_subscription %} -

- {% trans 'You have agreed to contribute' %} {{ user_subscription.amount_per_period|floatformat:2|intcomma }} {{ user_subscription.token_symbol }} every {{ user_subscription.frequency }} {{ user_subscription.frequency_unit }} -
- {% endif %} {% if grant_is_inactive %}

{% trans "This grant has ended. You can find all active grants" %} @@ -145,6 +140,11 @@

{% endif %} + {% if user_subscription %} +
+ {% trans 'You have agreed to contribute' %} {{ user_subscription.amount_per_period|floatformat:2|intcomma }} {{ user_subscription.token_symbol }} every {{ user_subscription.frequency }} {{ user_subscription.frequency_unit }} +
+ {% endif %} From 68affd30c18119629cc02544c6fef3d5e2106cdb Mon Sep 17 00:00:00 2001 From: Aditya Anand Date: Mon, 26 Nov 2018 14:26:54 +0530 Subject: [PATCH 5/5] lint fix --- app/assets/v2/js/shared.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/app/assets/v2/js/shared.js b/app/assets/v2/js/shared.js index 3844cccfb4d..86d2a5e4f7f 100644 --- a/app/assets/v2/js/shared.js +++ b/app/assets/v2/js/shared.js @@ -938,22 +938,22 @@ var listen_for_web3_changes = async function() { document.listen_for_web3_iterations += 1; } - if (typeof web3 == 'undefined') { - currentNetwork(); - trigger_form_hooks(); - } else if (typeof web3 == 'undefined' || typeof web3.eth == 'undefined' || typeof web3.eth.coinbase == 'undefined' || !web3.eth.coinbase) { - currentNetwork('locked'); - trigger_form_hooks(); - } else { - is_metamask_unlocked = true; - web3.eth.getBalance(web3.eth.coinbase, function(errors, result) { - if (errors) { - return; - } - if (typeof result != 'undefined') { - document.balance = result.toNumber(); - } - }); + if (typeof web3 == 'undefined') { + currentNetwork(); + trigger_form_hooks(); + } else if (typeof web3 == 'undefined' || typeof web3.eth == 'undefined' || typeof web3.eth.coinbase == 'undefined' || !web3.eth.coinbase) { + currentNetwork('locked'); + trigger_form_hooks(); + } else { + is_metamask_unlocked = true; + web3.eth.getBalance(web3.eth.coinbase, function(errors, result) { + if (errors) { + return; + } + if (typeof result != 'undefined') { + document.balance = result.toNumber(); + } + }); web3.version.getNetwork(function(error, netId) { if (error) {