Infra 1818 - changed donation options layout
Change-Id: I564b6ee754a39c24488a22484e6af47c17fa8d92
Signed-off-by: Eric Poirier <eric@eclipse.org>
diff --git a/assets/public/javascript/scripts.min.js b/assets/public/javascript/scripts.min.js
index 7fa5b75..d10689f 100644
--- a/assets/public/javascript/scripts.min.js
+++ b/assets/public/javascript/scripts.min.js
@@ -1 +1 @@
-!function(a,b,c){var d=function(a){$(".total-amount").val($(a).val()),$("#other-amount").val("")};a(c).ready(function(a){a(".btn-square").click(function(){a(this).parent().children(".btn-square").removeClass("active"),a(this).addClass("active"),d(this)}),a("#other-amount").click(function(){a("#other-amount").bind("keyup change",function(b){a(".total-amount").html(a(this).val()),a("input[name=amount]").val(a(this).val()),a(".btn-square").removeClass("active")})}),a(".num-only").keydown(function(b){-1!==a.inArray(b.keyCode,[46,8,9,27,13,110,190])||65==b.keyCode&&(b.ctrlKey===!0||b.metaKey===!0)||b.keyCode>=35&&b.keyCode<=40||(b.shiftKey||b.keyCode<48||b.keyCode>57)&&(b.keyCode<96||b.keyCode>105)&&b.preventDefault()})})}(jQuery,window,document);
\ No newline at end of file
+!function(a,b,c){var d=function(a){$(".total-amount").val($(a).val()),$("#other-amount").val("")};a(c).ready(function(a){a(".btn-square").click(function(){a(".btn-square, .amount-body, .highlight-amount-body").removeClass("active"),a(this).addClass("active"),d(this)}),a("#other-amount").click(function(){a("#other-amount").bind("keyup change",function(b){a(".total-amount").html(a(this).val()),a("input[name=amount]").val(a(this).val()),a(".btn-square").removeClass("active")})}),a(".num-only").keydown(function(b){-1!==a.inArray(b.keyCode,[46,8,9,27,13,110,190])||65==b.keyCode&&(b.ctrlKey===!0||b.metaKey===!0)||b.keyCode>=35&&b.keyCode<=40||(b.shiftKey||b.keyCode<48||b.keyCode>57)&&(b.keyCode<96||b.keyCode>105)&&b.preventDefault()})})}(jQuery,window,document);
\ No newline at end of file
diff --git a/assets/public/stylesheets/improve.min.css b/assets/public/stylesheets/improve.min.css
index d1cfa93..f5972e6 100644
--- a/assets/public/stylesheets/improve.min.css
+++ b/assets/public/stylesheets/improve.min.css
@@ -1 +1 @@
-.jumbotron{background-image:url(../../../images/header.jpg);background-size:cover}@media (min-width:768px){.jumbotron{padding:80px 0}}.jumbotron h1{font-size:32px;color:#fff}@media (min-width:768px){.jumbotron h1{font-size:42px}}.jumbotron p{font-size:16px;color:#fff}@media (min-width:768px){.jumbotron p{font-size:21px}}.jumbotron p strong{color:#f7941e}.content h2{margin-bottom:30px;margin-top:0;font-size:24px}@media (min-width:768px){.content h2{font-size:30px;margin-bottom:60px}}.content input[type=submit],.content input[type=text],.content input[type=email],.content textarea{width:100%;padding:10px}.content input[type=text],.content input[type=email]{margin-bottom:10px}@media (max-width:767px){.content input[type=submit]{margin-bottom:20px}}.content input.total-amount{width:64px;padding:0 4px;margin-bottom:0;margin-left:6px}.content textarea{min-height:110px}.content input#other-amount{margin-bottom:0}@media (max-width:767px){.content input#other-amount{margin-bottom:20px}}@media (max-width:767px){.content #choose-amount-container{border-bottom:1px solid #ccc;margin-bottom:9px}}.total-amount-container{padding:12px 12px 1px;box-shadow:none;border:none;font-size:17px;font-weight:bold;border-radius:0}.total-amount-container li{padding:10px 0 20px 0}@media (min-width:768px){.total-amount-container li{padding:0 0 10px}}@media (min-width:768px){.total-amount-container:before{width:0;height:0;border-top:10px solid transparent;border-left:10px solid #f5f5f5;border-bottom:10px solid transparent;position:absolute;right:5px;top:15px}}.sidebar{box-shadow:none;border:none;border-radius:0;padding:25px 40px;font-size:1.05em}.sidebar h2{margin-top:0;margin-bottom:20px}.sidebar ul{padding-left:15px}.sidebar ul li:before{font-family:'FontAwesome';content:'\f138';margin:0 5px 0 -15px;color:#f7941e}.participate-message{color:#fff}.jumbotron .download-link-msg{font-size:13px}.direct-link a{color:#fff}.direct-link a:hover{color:#ccc}.payment-type{margin-left:10px}.payment-type img{margin-top:-2px}.payment-type input{margin:7px 5px 0 0}.btn-square{width:70px;height:70px;padding:0;font-size:1.6em;font-weight:600;margin:0 6px 6px 0}.btn-square.active{background-color:#574e80}.is_anonymous{color:#333}.download-page h2{text-align:center}
\ No newline at end of file
+.jumbotron{background-image:url(../../../images/header.jpg);background-size:cover}@media (min-width:768px){.jumbotron{padding:80px 0}}.jumbotron h1{font-size:32px;color:#fff}@media (min-width:768px){.jumbotron h1{font-size:42px}}.jumbotron p{font-size:16px;color:#fff}@media (min-width:768px){.jumbotron p{font-size:21px}}.jumbotron p strong{color:#f7941e}.content h2{margin-bottom:30px;margin-top:0;font-size:24px}@media (min-width:768px){.content h2{font-size:30px;margin-bottom:60px}}.content input[type=submit],.content input[type=text],.content input[type=email],.content textarea{width:100%;padding:10px}.content input[type=text],.content input[type=email]{margin-bottom:10px}@media (max-width:767px){.content input[type=submit]{margin-bottom:20px}}.content input.total-amount{width:64px;padding:0 4px;margin-bottom:0;margin-left:6px}.content textarea{min-height:110px}.content input#other-amount{margin-bottom:0}@media (max-width:767px){.content input#other-amount{margin-bottom:20px}}@media (max-width:767px){.content #choose-amount-container{border-bottom:1px solid #ccc;margin-bottom:9px}}.total-amount-container{padding:12px 12px 1px;box-shadow:none;border:none;font-size:17px;font-weight:bold;border-radius:0}.total-amount-container li{padding:10px 0 20px 0}@media (min-width:768px){.total-amount-container li{padding:0 0 10px}}@media (min-width:768px){.total-amount-container:before{width:0;height:0;border-top:10px solid transparent;border-left:10px solid #f5f5f5;border-bottom:10px solid transparent;position:absolute;right:5px;top:15px}}.sidebar{box-shadow:none;border:none;border-radius:0;padding:25px 40px;font-size:1.05em}.sidebar h2{margin-top:0;margin-bottom:20px}.sidebar ul{padding-left:15px}.sidebar ul li:before{font-family:'FontAwesome';content:'\f138';margin:0 5px 0 -15px;color:#f7941e}.participate-message{color:#fff}.jumbotron .download-link-msg{font-size:13px}.direct-link a{color:#fff}.direct-link a:hover{color:#ccc}.payment-type{margin-left:10px}.payment-type img{margin-top:-2px}.payment-type input{margin:7px 5px 0 0}.btn-square{width:50px;height:50px;padding:0;font-size:1em;font-weight:600;margin:0 6px 6px 6px;border:none;background-color:#231b43;border-color:#2c2255;color:#fff}.btn-square.active,.btn-square.active:hover,.btn-square:hover{background-color:#f7941e;color:#fff}.amount-body{margin-top:15px}.amount-body span{font-size:0.8em}.amount-body.two-lines{margin-top:5px}.is_anonymous{color:#333}.download-page h2{text-align:center}
\ No newline at end of file
diff --git a/assets/src/javascript/scripts.js b/assets/src/javascript/scripts.js
index 72672b9..b02a6ef 100644
--- a/assets/src/javascript/scripts.js
+++ b/assets/src/javascript/scripts.js
@@ -19,7 +19,7 @@
jQuery(document).ready(function($) {
$('.btn-square').click(function() {
- $(this).parent().children('.btn-square').removeClass('active');
+ $('.btn-square, .amount-body, .highlight-amount-body').removeClass('active');
$(this).addClass('active');
update_amount(this);
});
diff --git a/assets/src/stylesheets/improve.less b/assets/src/stylesheets/improve.less
index 6b821e0..a2bb68f 100644
--- a/assets/src/stylesheets/improve.less
+++ b/assets/src/stylesheets/improve.less
@@ -154,16 +154,33 @@
/*Donate buttons*/
.btn-square{
- width:70px;
- height:70px;
- padding:0;
- font-size:1.6em;
- font-weight:600;
- margin:0 6px 6px 0;
- &.active{
- background-color:#574e80;
- }
+ width: 50px;
+ height: 50px;
+ padding: 0;
+ font-size: 1em;
+ font-weight: 600;
+ margin: 0 6px 6px 6px;
+ border:none;
+ background-color:#231b43;
+ border-color:#2c2255;
+ color:#fff;
+ &.active, &.active:hover, &:hover{
+ background-color:#f7941e;
+ color:#fff;
+ }
}
+
+.amount-body{
+ margin-top:15px;
+ span{
+ font-size:0.8em;
+ }
+}
+
+.amount-body.two-lines{
+ margin-top:5px;
+}
+
.is_anonymous{
color:#333;
}
diff --git a/content/en_index.php b/content/en_index.php
index b593e28..48ca106 100644
--- a/content/en_index.php
+++ b/content/en_index.php
@@ -56,21 +56,36 @@
<div class="row">
<div class="<?php print $donation_form_class;?>">
<h2><strong>Your donation</strong> will fund Eclipse IDE development.</h2>
- <div class="row">
- <form onsubmit="javascript:validate_amount()" class="choose-amount" action="<?php print $Paypal->get_gateway_process_url();?>" method="POST">
- <div id="choose-amount-col" class="col-md-9 col-sm-11 padding-bottom-10">
+ <form onsubmit="javascript:validate_amount()" class="choose-amount" action="<?php print $Paypal->get_gateway_process_url();?>" method="POST">
+ <div class="row">
+ <div id="choose-amount-col" class="col-md-13 col-sm-11 padding-bottom-10">
<div id="choose-amount-container">
<div id="choose-amount-container-paypal">
- <button type="button" class="btn btn-primary btn-square" value="5">$5</button>
- <button type="button" class="btn btn-primary btn-square" value="10">$10</button>
- <button type="button" class="btn btn-primary btn-square active" value="35">$35</button>
- <button type="button" class="btn btn-primary btn-square" value="100">$100</button>
- <button type="button" class="btn btn-primary btn-square" value="250">$250</button>
+ <div class="row">
+ <div class="col-xs-4"><button type="button" class="btn btn-focus btn-square" value="5">$5</button></div>
+ <div class="col-xs-20 amount-body"><strong>Donor</strong></div>
+ </div>
+ <div class="row">
+ <div class="col-xs-4"><button type="button" class="btn btn-focus btn-square" value="10">$10</button></div>
+ <div class="col-xs-20 amount-body"><strong>Supporter</strong></div>
+ </div>
+ <div class="row">
+ <div class="col-xs-4"><button type="button" class="btn btn-focus btn-square active" value="35">$35</button></div>
+ <div class="col-xs-20 highlight amount-body two-lines active"><strong>Friend of Eclipse</strong><br><span>Mirror site + Friend of Eclipse logo + O'Reilly discount</span></div>
+ </div>
+ <div class="row">
+ <div class="col-xs-4"><button type="button" class="btn btn-focus btn-square" value="100">$100</button></div>
+ <div class="col-xs-20 highlight amount-body two-lines"><strong>Best Friend</strong><br><span>T-shirt + EclipseCon discount + Friend benefits</span></div>
+ </div>
+ <div class="row">
+ <div class="col-xs-4"><button type="button" class="btn btn-focus btn-square" value="250">$250</button></div>
+ <div class="col-xs-20 amount-body two-lines"><strong>Webmaster Idol</strong><br><span>Best Friend benefits + a huge thank you from our webmaster</span></div>
+ </div>
</div>
<input id="other-amount" type="text" class="num-only margin-top-20" placeholder="Or enter amount..." /></li>
</div>
</div>
- <div class="col-sm-offset-1 col-md-14 col-sm-12 optional-form-fields">
+ <div class="col-md-10 col-sm-12 optional-form-fields">
<input type="text" name="first_name" value="<?php print $Paypal->Donation->Donor->get_donor_first_name();?>" placeholder="First Name (Optional)">
<input type="text" name="last_name" value="<?php print $Paypal->Donation->Donor->get_donor_last_name();?>" placeholder="Last Name (Optional)">
<input type="email" name="email" value="<?php print $Paypal->Donation->Donor->get_donor_email();?>" placeholder="Email Address (Optional)">
@@ -80,6 +95,8 @@
</div>
<hr>
</div>
+ </div>
+ <div class="row">
<div class="col-sm-18">
<div class="well total-amount-container clearfix">
<div class="row">
@@ -98,8 +115,8 @@
<div class="col-sm-6 margin-top-5">
<input type="submit" class="btn btn-warning donation-button" value="Donate"/>
</div>
- </form>
- </div>
+ </div>
+ </form>
</div>
<?php if (!isset($download_page)):?>
<?php include('en_sidebar.php');?>
