Add a funding rules UI

js/gittip/tips.js

@@ -20,7 +20,7 @@ Gittip.tips.init = function() {
     function checkTip() {
         var $this     = $(this),
             $parent   = $this.parents('form'),
-            $confirm  = $parent.find('.confirm-tip'),
+            $confirm  = $parent.find('.confirm'),
             amount    = parseFloat($this.val(), 10) || 0,
             oldAmount = parseFloat(this.defaultValue, 10),
             max       = parseFloat($this.prop('max')),
@@ -71,13 +71,13 @@ Gittip.tips.init = function() {
                 });
         });
 
-    $('.my-tip .cancel-tip').click(function(event) {
+    $('.my-tip .cancel').click(function(event) {
         event.preventDefault();
 
         $(this).parents('form').trigger('reset');
     });
 
-    $('.my-tip .tip-suggestions a').click(function(event) {
+    $('.my-tip .suggestions a').click(function(event) {
         event.preventDefault();
 
         var $this  = $(this),
@@ -88,7 +88,7 @@ Gittip.tips.init = function() {
 
     $('form.my-tip').on('reset', function() {
         $(this).removeClass('changed');
-        $(this).find('.confirm-tip').prop('disabled', true);
+        $(this).find('.confirm').prop('disabled', true);
         $(window).off('beforeunload.tips');
     });
 

scss/gittip.scss

@@ -31,12 +31,14 @@
 // Styles specific to certain pages. 
 
 @import "history";
+@import "giving";
+
 @import "team";
 @import "profile-edit";
 
 @import "widgets/sign_in";
 
-@import "widgets/my_tip";
+@import "widgets/money";
 
 @import "widgets/tipr";
 

scss/giving.scss

@@ -0,0 +1,19 @@
+#giving {
+    h2 { white-space: nowrap }
+
+    th {
+        vertical-align: middle;
+        padding-right: 0.5em;
+    }
+
+    td {
+        text-align: left;
+        height: 30px;
+    }
+
+   tr.tip, tr.pledge {
+        th, td {
+            white-space: nowrap
+        }
+    }
+}

scss/widgets/my_tip.scss → scss/widgets/money.scss

@@ -1,13 +1,13 @@
-form.my-tip {
+form.money {
     line-height: 1.7em;
     overflow: hidden;
 
-    .tip-controls {
+    .controls {
         text-align: right;
         width: 60%;
         float: left;
 
-        .tip-suggestions {
+        .suggestions {
             display: inline-block;
             font-size: 0.9em;
 
@@ -26,31 +26,29 @@ form.my-tip {
         }
     }
 
-    .tip-actions {
+    .actions {
         width: 38%;
         float: right;
         text-align: left;
         border-left: 1px solid $brown;
         padding-left: 1.9%;
 
-        .cancel-tip {
+        .cancel {
             font-size: 0.9em;
         }
     }
 
-    .cancel-tip {
+    .cancel {
         opacity: 0.5;
         cursor: default;
     }
 
-    &.changed {
-        .cancel-tip {
-            opacity: 1;
-            cursor: pointer;
-        }
+    &.changed .cancel {
+        opacity: 1;
+        cursor: pointer;
     }
 }
 
-input.my-tip {
+input.money {
     width: 5.5em;
 }

templates/my-tip-bulk.html

@@ -1,12 +1,12 @@
-<form class="my-tip{{ " anon" if user.ANON else "" }}">
+<form class="money my-tip{{ " anon" if user.ANON else "" }}">
     $ <input type="number"
-           class="my-tip"
+           class="money my-tip"
            min="0"
            max="{{ tip.number == 'plural' and '1000' or '100' }}"
            step="0.01"
            value="{{ my_tip }}"
            data-tippee="{{ tippee }}"> / week
 
-    <button class="confirm-tip" disabled>Confirm</button>
-    <a href="#" class="cancel-tip">Cancel</a>
+    <button class="confirm" disabled>Confirm</button>
+    <a href="#" class="cancel">Cancel</a>
 </form>

templates/my-tip.html

@@ -1,10 +1,10 @@
-<form class="my-tip{{ " anon" if user.ANON else "" }}">
-    <div class="tip-controls">
-        <div class="tip-amount">
-            $ <input type="number" class="my-tip" min="0" max="{{ '1000' if participant.IS_PLURAL else '100' }}" step="0.01" value="{{ my_tip }}" data-tippee="{{ tippee }}"> / week
-        </div>
+<form class="money my-tip{{ " anon" if user.ANON else "" }}">
+    <div class="controls">
+        $ <input type="number" class="money my-tip" min="0" max="{{ '1000' if participant.IS_PLURAL else '100' }}"
+                 step="0.01" value="{{ my_tip }}" data-tippee="{{ tippee }}"
+        > / week
 
-        <ul class="tip-suggestions">
+        <ul class="suggestions">
             <li><a href="#">$100</a></li>
             <li><a href="#">$25</a></li>
             <li><a href="#">$10</a></li>
@@ -13,8 +13,8 @@
         </ul>
     </div>
 
-    <div class="tip-actions">
-        <button class="confirm-tip" disabled>Confirm</button><br>
-        <a href="#" class="cancel-tip">Cancel</a>
+    <div class="actions">
+        <button class="confirm" disabled>Confirm</button><br>
+        <a href="#" class="cancel">Cancel</a>
     </div>
 </form>

templates/profile.html

@@ -6,6 +6,8 @@
       $('#goal-custom').on('click change', function() {
         $('#goal-yes').attr('checked', true)
       })
+
+      $('[data-tip]').tipr();
     })</script>
 {% endblock %}
 

www/%username/giving/index.html.spt

@@ -13,24 +13,7 @@ first_time = qs.get('first_time') == '1'
 [-----------------------------------------------------------------------------]
 {% extends "templates/profile.html" %}
 {% block page %}
-<style>
-    #matrix td {
-        text-align: left;
-        height: 30px;
-    }
-    #matrix h2,
-    #matrix tr.tip td,
-    #matrix tr.tip th,
-    #matrix tr.pledge td,
-    #matrix tr.pledge th {
-        white-space: nowrap;
-    }
-    #matrix th {
-        vertical-align: middle;
-        padding-right: 0.5em;
-    }
-</style>
-<table id="matrix" class="col0">
+<table id="giving" class="col0">
     <tr>
         <td colspan="2">
             {% if first_time %}
@@ -51,6 +34,22 @@ first_time = qs.get('first_time') == '1'
 
             {% endif %}
             {% if participant == user.participant %}
+            <h2>When my balance runs low, use my
+                <select><option>Credit Card</option></select>
+            </h2>
+
+
+<form class="money my-tip">
+    to add $ <input class="money my-tip" min="10" max="1000" step="0.01" value="10.00" type="number">
+    - <span data-tip="Gittip is <a href='ff'>funded on Gittip</a>; we don't charge any fees to keep the site going. This is a standard credit card fee of 2.9% + 30&cent;"
+            style="display: inline-block; border-bottom: 1px dashed #999;">$0.59 fee</span> = <span style="font-weight: bold">$9.41</span> usable
+    <span>
+    <button class="confirm" disabled="">Confirm</button>
+    <a href="#" class="cancel">Cancel</a>
+    </span>
+</form>
+
+
             <h2>You give <span class="my-total-giving">${{ total }}</span> per
                 week</h2>
             {% else %}