Merge branch 'master' of github.com:gitcoinco/web

app/assets/v2/css/base.css

@@ -996,7 +996,7 @@ input.is-invalid {
   text-decoration: none;
   color: black;
   font-size: 0.9rem;
-  margin: 0 1rem;
+  margin: 0 0.5rem;
 }
 
 .metamask-links a:hover {

app/assets/v2/css/gitcoin.css

@@ -545,6 +545,22 @@ div.button-pink {
   width: 15px;
 }
 
+.g-fadein {
+  opacity: 0;
+}
+
+.g-fadein[data-fade-direction="left"] {
+  left: -5rem;
+}
+
+.g-fadein[data-fade-direction="mid"] {
+  bottom: -5em;
+}
+
+.g-fadein[data-fade-direction="right"] {
+  left: 5rem;
+}
+
 @media (max-width: 389.9px) {
 
   .footer__main {

app/assets/v2/css/retail/plans.css

@@ -12,10 +12,6 @@ nav,
   background-color: #0D0764;
 }
 
-.metamask-banner > .col-12 {
-  background-color: #0D0764;
-}
-
 .banner {
   color: #fff;
   min-height: 10rem;

app/assets/v2/js/grants/fund.js

@@ -84,8 +84,8 @@ $(document).ready(function() {
         deployedToken = new web3.eth.Contract(compiledToken.abi, data.denomination);
         $('#token_symbol').val($('#js-token option:selected').text());
       }
-      if(!selected_token){
-        _alert("Please select a token", 'error');
+      if (!selected_token) {
+        _alert('Please select a token', 'error');
         return;
       }
 

app/assets/v2/js/shared.js

@@ -752,19 +752,21 @@ var currentNetwork = function(network) {
 };
 /* eslint-enable no-lonely-if */
 
+/**
+ * Throws custom alert based on user
+ * - has not installed metamask
+ * - metamask is locked
+ * - metmask connection needs to be authorized
+ * - logged in address has no ETH
+ */
 var trigger_primary_form_web3_hooks = function() {
-  // detect web3, and if not, display a form telling users they must be web3 enabled.
-  var params = {
-    page: document.location.pathname
-  };
-
   if ($('#primary_form').length) {
     var is_zero_balance_not_okay = document.location.href.indexOf('/faucet') == -1;
 
     if (typeof web3 == 'undefined') {
       $('#no_metamask_error').css('display', 'block');
       $('#zero_balance_error').css('display', 'none');
-      $('#primary_form').addClass('hidden');
+      $('#primary_form, .primary_form-meta').addClass('hidden');
       $('.submit_bounty .newsletter').addClass('hidden');
       $('#unlock_metamask_error').css('display', 'none');
       $('#connect_metamask_error').css('display', 'none');
@@ -774,21 +776,21 @@ var trigger_primary_form_web3_hooks = function() {
       $('#unlock_metamask_error').css('display', 'none');
       $('#zero_balance_error').css('display', 'none');
       $('#no_metamask_error').css('display', 'none');
-      $('#primary_form').addClass('hidden');
+      $('#primary_form, .primary_form-meta').addClass('hidden');
       $('.submit_bounty .newsletter').addClass('hidden');
       $('#no_issue_error').css('display', 'none');
     } else if (!web3.eth.coinbase) {
       $('#unlock_metamask_error').css('display', 'block');
       $('#zero_balance_error').css('display', 'none');
       $('#no_metamask_error').css('display', 'none');
-      $('#primary_form').addClass('hidden');
+      $('#primary_form, .primary_form-meta').addClass('hidden');
       $('#connect_metamask_error').css('display', 'none');
       $('.submit_bounty .newsletter').addClass('hidden');
       $('#no_issue_error').css('display', 'none');
     } else if (is_zero_balance_not_okay && document.balance == 0) {
       $('#zero_balance_error').css('display', 'block');
       $('#robot_error').removeClass('hidden');
-      $('#primary_form').addClass('hidden');
+      $('#primary_form, .primary_form-meta').addClass('hidden');
       $('.submit_bounty .newsletter').addClass('hidden');
       $('#unlock_metamask_error').css('display', 'none');
       $('#connect_metamask_error').css('display', 'none');
@@ -801,7 +803,7 @@ var trigger_primary_form_web3_hooks = function() {
       $('#connect_metamask_error').css('display', 'none');
       $('#no_issue_error').css('display', 'block');
       $('#robot_error').addClass('hidden');
-      $('#primary_form').removeClass('hidden');
+      $('#primary_form, .primary_form-meta').removeClass('hidden');
       $('.submit_bounty .newsletter').removeClass('hidden');
     }
   }
@@ -1438,3 +1440,29 @@ const checkFileSize = (input, max_img_size) => {
   return true;
 };
 
+$(document).ready(function() {
+  $(window).scroll(function() {
+    $('.g-fadein').each(function(i) {
+      let duration = $(this).attr('data-fade-duration') ? $(this).attr('data-fade-duration') : 1500;
+      let direction = $(this).attr('data-fade-direction') ? $(this).attr('data-fade-direction') : 'mid';
+      let animateProps;
+
+      switch (direction) {
+        case 'left':
+          animateProps = { 'opacity': '1', 'left': '0' };
+          break;
+        case 'right':
+          animateProps = { 'opacity': '1', 'left': '0' };
+          break;
+        default:
+          animateProps = { 'opacity': '1', 'bottom': '0' };
+      }
+
+      let bottom_of_object = $(this).position().top + $(this).outerHeight() / 2;
+      let bottom_of_window = $(window).scrollTop() + $(window).height();
+
+      if (bottom_of_window > bottom_of_object)
+        $(this).animate(animateProps, duration);
+    });
+  });
+});

app/dashboard/templates/bounty/details.html

@@ -206,7 +206,7 @@ <h5 class="bounty-heading">{% trans "Funder" %}</h5>
         [[else color == 'white']]
           <a class="btn btn-small [[if !enabled]]disabled[[/if]] [[:buttonclass]]" id="btn-white" role="button" target="_blank" href="[[:href]]" target="[[:target]]">
             [[if comments]]
-              <span class="font-caption">
+              <span class="font-caption d-inline-flex">
                 [[:text]]
                 <span class="comment">
                   <img src={% static "v2/images/comment.svg" %}>

app/dashboard/templates/shared/no_metamask_error.html

@@ -15,7 +15,7 @@
   along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static %}
-<div id="no_metamask_error" class="metamask-error container-fluid" style="display: none;">
+<div id="no_metamask_error" class="metamask-error container-fluid my-5" style="display: none;">
   <div class="row align-items-center px-4 py-5 text-center text-lg-left mx-lg-5">
     <div class="col-12 col-lg-6 offset-xl-1 col-xl-5 py-2 px-5">
       <h3>{% trans "To make transactions on Gitcoin, you’ll need MetaMask." %}</h3>

app/retail/templates/home/index.html

@@ -111,7 +111,7 @@ <h2>
         alt="gitcoin logo" />
       <div class="container pt-0">
         <div class="row">
-          <div class="col-12 col-md-6 col-lg-4">
+          <div class="col-12 col-md-6 col-lg-4 g-fadein" data-fade-duration=1000 data-fade-direction="left">
             <h4 class="font-title mb-4">{% trans "Grow OSS" %}</h4>
             {% for groups in products %}
               {% if groups.group == 'grow_oss' %}
@@ -130,7 +130,7 @@ <h2>
               {% endif %}
             {% endfor %}
           </div>
-          <div class="col-12 col-md-6 col-lg-4">
+          <div class="col-12 col-md-6 col-lg-4 g-fadein" data-fade-duration=1000 data-fade-direction="mid">
             <h4 class="font-title mb-4">{% trans "Maintain OSS" %}</h4>
             {% for groups in products %}
               {% if groups.group == 'maintain_oss' %}
@@ -149,7 +149,7 @@ <h2>
               {% endif %}
             {% endfor %}
           </div>
-          <div class="col-12 col-md-6 col-lg-4">
+          <div class="col-12 col-md-6 col-lg-4 g-fadein" data-fade-duration=1000 data-fade-direction="right">
             <h4 class="font-title mb-4">{% trans "Build  Relationships" %}</h4>
             {% for groups in products %}
               {% if groups.group == 'build_oss' %}
@@ -291,6 +291,5 @@ <h3 class="mt-3 mb-2">{{ article.title }}</h3>
       $(this).find('iframe').css('visibility', 'visible');
       $(this).find('iframe').attr('src', 'https://www.youtube.com/embed/oe7oD8ThKx8?autoplay=1');
     })
-
   </script>
 </html>

app/retail/templates/pricing/subscribe.html

@@ -28,18 +28,18 @@
     {% include 'shared/tag_manager_2.html' %}
     {% include 'pricing/nav.html' %}
     <div class="row no-gutters metamask-banner">
+      {% if request.path|matches:"^\/(subscribe.*)$" %}
+        <p id="navbar-network-banner" class="px-0 py-1 m-0 font-caption hidden"></p>
+      {% endif %}
       <div class="col-12">
         {% include 'shared/no_metamask_error.html' %}
         {% include 'shared/zero_balance_error.html' %}
         {% include 'shared/unlock_metamask.html' %}
         {% include 'shared/connect_metamask.html' %}
       </div>
     </div>
-    {% if request.path|matches:"^\/(subscribe.*)$" %}
-      <p id="navbar-network-banner" class="px-0 py-1 m-0 font-caption hidden"></p>
-    {% endif %}
     {% cookielaw_banner %}
-    <div class="banner text-center m-auto">
+    <div class="banner text-center m-auto primary_form-meta">
       <h1 class="pt-5 font-title-xl">
         {% trans "Let’s Get You On Your Way!" %}
       </h1>

docs/RUNNING_LOCALLY.md

@@ -116,16 +116,11 @@ Navigate to `http://localhost:8000/`.
 
 This can be useful if you'd like data to test with:
 
-```shell
-
-~/web/app$ ./manage.py sync_geth
-
-```
 
 or equivalently:
 
 ```shell
 
-~/web/app$ ./manage.py sync_geth rinkeby 402 99999999999
+~/web/app$ ./manage.py sync_geth rinkeby -20 99999999999
 
 ```

docs/RUNNING_LOCALLY_DOCKER.md

@@ -75,14 +75,9 @@ docker-compose exec web python3 app/manage.py createsuperuser
 
 This can be useful if you'd like data to test with:
 
-```shell
-docker-compose exec web python3 app/manage.py sync_geth
-```
-
-or equivalently:
 
 ```shell
-docker-compose exec web python3 app/manage.py sync_geth rinkeby 402 99999999999
+docker-compose exec web python3 app/manage.py sync_geth rinkeby -20 99999999999
 ```
 
 ### FAQ

docs/STYLEGUIDE.md

@@ -63,3 +63,19 @@ _usage_
 
 The Slider styling used in Gitcoin can be found in
 [slider.css](https://github.com/gitcoinco/web/blob/master/app/assets/v2/css/lib/slider.css)
+
+
+## Animations
+
+### FadeIn
+
+Container has a fade in animation when it becomes into viewport.
+
+_values_
+
+`data-fade-direction`: `left` | `mid` | `right` _(defaut: `mid`)_
+`data-fade-duration`: `Number` _(default: `1500`)_
+
+_usage_
+
+```<div class="g-fadein" data-fade-duration=1000 data-fade-direction="mid">```