[webwml/staging] add comments - tor-commits

26 Dec 2015

commit 226c14bbc9e4a10ac7a1fe52c7de6eacea47e8fc
Author: MehrabKamrani mk.zizou@gmail.com
Date:   Fri Dec 18 09:06:36 2015 +0800
add comments
    add a div with paypal-donate class in order to wrap up the paypal donate section
---
 donate/en/donate.wml |  157 +++++++++++++++++++++++++++-----------------------
 1 file changed, 84 insertions(+), 73 deletions(-)

diff --git a/donate/en/donate.wml b/donate/en/donate.wml
index 3407f14..791f4cd 100644
--- a/donate/en/donate.wml
+++ b/donate/en/donate.wml
@@ -9,6 +9,7 @@
     <div class="quote-section">
       <div class="container">
         <div class="row">
+          
           <div class="col-sm-3 img-section">
               <img src="$(IMGROOT)/shari.png" class="img-thumbnail img-responsive champion" alt="Shari Steele">
           </div>
@@ -20,78 +21,80 @@
             </blockquote>
           </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="container">
-      <div class="row">
-        <div class="col-sm-7">
-          <h2 class="main-text">Your support is critical to our success</h2>
-          <hr>
-          <p style="text-align:left;">Donate $23 or more, get swag, take a picture and share it with us via <code><a href="https://twitter.com/search?q=%23SupportTor" target="_blank">#supportTor</a></code> hashtag.</p>
-            
-          <noscript class="perks">
+        </div><!-- container -->
+      </div><!-- row -->
+    </div><!-- quote-section -->
+
+    <div class="paypal-donate">
+      <div class="container">
+        <div class="row">
+          <div class="col-sm-7">
+            <h2 class="main-text">Your support is critical to our success</h2>
+            <hr>
+            <p style="text-align:left;">Donate $23 or more, get swag, take a picture and share it with us via <code><a href="https://twitter.com/search?q=%23SupportTor" target="_blank">#supportTor</a></code> hashtag.</p>
+              
+            <noscript class="perks">
+              <h4 style="text-align:left; padding-top:10px;"><b>Perks</b></h4>
+              <p style="text-align:left;">Donate $23+ to get a <b>pack of stickers</b></p>
+              <p style="text-align:left;">Donate $100+ to get a <b>Tor supporter tshirt</b></p>
+              <p style="text-align:left;">Donate $500+ to get a <b>hoodie</b></p>
+            </noscript>
+
             <h4 style="text-align:left; padding-top:10px;"><b>Perks</b></h4>
-            <p style="text-align:left;">Donate $23+ to get a <b>pack of stickers</b></p>
-            <p style="text-align:left;">Donate $100+ to get a <b>Tor supporter tshirt</b></p>
-            <p style="text-align:left;">Donate $500+ to get a <b>hoodie</b></p>
-          </noscript>
-
-          <h4 style="text-align:left; padding-top:10px;"><b>Perks</b></h4>
-          <div class="col-sm-4 no-padding"><img id="stickers" class="img-responsive half-opacity" src="$(IMGROOT)/swag-stickers-lg.png" alt="stickers"></div>
-          <div class="col-sm-4 no-padding"><img id="tshirt" class="img-responsive half-opacity" src="$(IMGROOT)/swag-tees-lg.png" alt="tshirt"></div>
-          <div class="col-sm-4 no-padding"><img id="hoody" class="img-responsive half-opacity" src="$(IMGROOT)/swag-hoody-lg.png" alt="hoody"></div>
-        </div>
-        
-        <div class="donate-section col-sm-5">
-          <form id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
-            <div class="row col-md-offset-0 combined-input">
-              <div class="left col-xs-6 btn btn-default btn-lg active">
-                <label class="choiceLabel">
-                  <input class="sr-only" name="cmd" id="blankRadio1" type="radio" value="_donations" aria-label="one_time"checked >
-                  <span>One-time</span>
-                </label>
-              </div>
-              <div class="right col-xs-6 btn btn-default btn-lg ">
-                <label class="choiceLabel">
-                  <input class="sr-only" name="cmd" id="blankRadio2" type="radio" value="_xclick-subscriptions" aria-label="monthly">
-                  <span>Monthly</span>
-                </label>
+            <div class="col-sm-4 no-padding"><img id="stickers" class="img-responsive half-opacity" src="$(IMGROOT)/swag-stickers-lg.png" alt="stickers"></div>
+            <div class="col-sm-4 no-padding"><img id="tshirt" class="img-responsive half-opacity" src="$(IMGROOT)/swag-tees-lg.png" alt="tshirt"></div>
+            <div class="col-sm-4 no-padding"><img id="hoody" class="img-responsive half-opacity" src="$(IMGROOT)/swag-hoody-lg.png" alt="hoody"></div>
+          </div>
+          
+          <div class="donate-section col-sm-5">
+            <form id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
+              <div class="row col-md-offset-0 combined-input">
+                <div class="left col-xs-6 btn btn-default btn-lg active">
+                  <label class="choiceLabel">
+                    <input class="sr-only" name="cmd" id="blankRadio1" type="radio" value="_donations" aria-label="one_time"checked >
+                    <span>One-time</span>
+                  </label>
+                </div>
+                <div class="right col-xs-6 btn btn-default btn-lg ">
+                  <label class="choiceLabel">
+                    <input class="sr-only" name="cmd" id="blankRadio2" type="radio" value="_xclick-subscriptions" aria-label="monthly">
+                    <span>Monthly</span>
+                  </label>
+                </div>
               </div>
-            </div>
-            <div class="btn-group btn-group-lg" role="group" style="margin-bottom: 30px;">
-              <div style="padding-bottom:5px;" class="col-xs-6">
-                <button value="10" id="amount10" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn">$10</button>
-              </div>
-              <div style="padding-bottom:5px;" class="col-xs-6">
-                <button value="23" id="amount23" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a sticker!">$23</button>
-              </div>
-              <div style="padding-bottom:5px;" class="col-xs-6">
-                <button value="100" id="amount100" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a tshirt!">$100</button>
-              </div>
-              <div style="padding-bottom:5px;" class="col-xs-6">
-                <button value="256" id="amount256" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a tshirt!">$256</button>
-              </div>
-              <div style="padding-bottom:5px;" class="col-xs-6">
-                <button value="500" id="amount500" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a hoody!">$500</button>
-              </div>
-              <div class="col-xs-6 form-group-lg">
-                <label class="sr-only" for="exampleInputAmount">1</label>
-                <div class="input-group">
-                  <div class="input-group-addon">$</div>
-                  <input type="number" min="5" step="1" name="custom_amnt" class="form-control" id="exampleInputAmount" placeholder="other amount">
+              <div class="btn-group btn-group-lg" role="group" style="margin-bottom: 30px;">
+                <div style="padding-bottom:5px;" class="col-xs-6">
+                  <button value="10" id="amount10" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn">$10</button>
+                </div>
+                <div style="padding-bottom:5px;" class="col-xs-6">
+                  <button value="23" id="amount23" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a sticker!">$23</button>
+                </div>
+                <div style="padding-bottom:5px;" class="col-xs-6">
+                  <button value="100" id="amount100" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a tshirt!">$100</button>
+                </div>
+                <div style="padding-bottom:5px;" class="col-xs-6">
+                  <button value="256" id="amount256" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a tshirt!">$256</button>
+                </div>
+                <div style="padding-bottom:5px;" class="col-xs-6">
+                  <button value="500" id="amount500" name="amnt" type="button" class="btn btn-default btn-lg btn-block amnt-btn" title="You get a hoody!">$500</button>
+                </div>
+                <div class="col-xs-6 form-group-lg">
+                  <label class="sr-only" for="exampleInputAmount">1</label>
+                  <div class="input-group">
+                    <div class="input-group-addon">$</div>
+                    <input type="number" min="5" step="1" name="custom_amnt" class="form-control" id="exampleInputAmount" placeholder="other amount">
+                  </div>
                 </div>
               </div>
-            </div>
-            <div style="padding: 0 15px;">
-              <h5 class="error-msg">The minimum donation amount is $5</h5>
-              <button id="donate-btn" class="btn btn-primary btn-lg btn-block donate-button" style="padding:10px;">Donate</button>
-              <h5>via PayPal (doesn't require an account)</h5>
-              <h4><a href="<page donate/donate-options>">Other Ways to Donate</a></h4>
-            </div>
-            
+              <div style="padding: 0 15px;">
+                <h5 class="error-msg">The minimum donation amount is $5</h5>
+                <button id="donate-btn" class="btn btn-primary btn-lg btn-block donate-button" style="padding:10px;">Donate</button>
+                <h5>via PayPal (doesn't require an account)</h5>
+                <h4><a href="<page donate/donate-options>">Other Ways to Donate</a></h4>
+              </div>
+              
+              <!-- PAYPAL ESSENTIAL INPUTS -->
               <input type="hidden" id="amount" name="amount" value="">
               <input type="hidden" id="a3" name="a3" value="0">
               <input type="hidden" id="p3" name="p3" value="1">
@@ -105,15 +108,16 @@
               <input type="hidden" name="return" value="https://www.torproject.org/donate/thankyou">
               <input type="hidden" name="cancel_return" value="https://www.torproject.org/getinvolved/volunteer">
-          </form>
-        </div>
-      </div>
-    </div>
+            </form>
+          </div><!-- donate-section -->
+        </div><!-- row -->
+      </div><!-- container -->
+    </div><!-- paypal-donate -->
-  </div>
+  </div><!-- donation -->
+
-  <!-- PAYPAL -->
   <script type="text/javascript" src="$(DOCROOT)/js/jquery.min.js"></script>
   <script type="text/javascript">
   function displayVals() {
@@ -140,6 +144,8 @@
       $(".error-msg").css("display","none");
     });
+
+    // Perks functionality
     if (23 <= parseInt($("#amount").val()) && parseInt($("#amount").val()) < 100) {
       $("#stickers").css("opacity","1");
       $("#tshirt").css("opacity","0.5");
@@ -164,7 +170,9 @@
     $("#exampleInputAmount").click(displayVals);
     $("#exampleInputAmount").change(displayVals);
     displayVals();
+
+    // Paypal donate validation when changing other amount input 
     $("#exampleInputAmount").change(function(){
       if ($("#amount").val() == "" || parseInt($("#amount").val()) < 5) {
         $(".error-msg").css("display","block");
@@ -173,6 +181,7 @@
       }
     });
+    // Paypal donate validation when clicking on donate button 
     $("#donate-btn").click(function(event){
       if ($("#amount").val() == "" || parseInt($("#amount").val()) < 5) {
         event.preventDefault();
@@ -182,6 +191,8 @@
       }
     });
+
+    // monthly or one-time donate functionality
     $(".left").click(function(){
       $(".left").addClass('active');
       $(".right").removeClass('active');

    