SAAS-1021: Billing page restyle
This commit is contained in:
drigato
parent
afa3b47e42
commit
6ecb208962
6 changed files with 63 additions and 37 deletions
|
|
@ -162,7 +162,7 @@ class Application_Form_BillingClient extends Zend_Form
|
|||
$subscribe->setLabel(_('Subscribe to Sourcefabric newsletter'))
|
||||
->setValue($subscribevalue)
|
||||
->setBelongsTo('customfields')
|
||||
->setAttrib('class', 'input_text')
|
||||
->setAttrib('class', 'billing-details-checkbox')
|
||||
->setRequired(true)
|
||||
->addValidator($notEmptyValidator)
|
||||
->addFilter('StringTrim');
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<?php
|
||||
$this->form->getElement("submit")->setAttrib("class", "right-align");
|
||||
$this->form->getElement("submit")->setAttrib("class", "btn right-floated");
|
||||
$this->form->getElement("country")->setAttrib("class", "right-align");
|
||||
$this->form->getElement("securityqid")->setAttrib("class", "right-align");
|
||||
?>
|
||||
<div class="ui-widget ui-widget-content block-shadow clearfix padded-strong billing-panel">
|
||||
<div class="ui-widget prefpanel simple-formblock clearfix padded-strong">
|
||||
<H2>Billing Account Details</H2>
|
||||
<?php if (isset($this->errorMessage)) {?>
|
||||
<div class="errors"><?php echo $this->errorMessage ?></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="ui-widget ui-widget-content block-shadow clearfix padded-strong billing-panel">
|
||||
<div class="ui-widget prefpanel clearfix padded-strong billing-panel">
|
||||
<H2>Invoices</H2>
|
||||
<?php
|
||||
$topTextClass = "";
|
||||
|
|
@ -8,11 +8,11 @@ if (array_key_exists("planupdated", $_GET))
|
|||
$topTextClass = "status-good";
|
||||
}
|
||||
else {
|
||||
$topText = _pro("Tip: To pay an invoice, click \"View Invoice\"<br> and look for the \"Checkout\" button.");
|
||||
$topText = _pro("Tip: To pay an invoice, click \"View Invoice\" and look for the \"Checkout\" button.");
|
||||
}
|
||||
|
||||
?>
|
||||
<p style="text-align: center; padding-left: 20px;" class="<?=$topTextClass?>"><?=$topText?></p>
|
||||
<p class="<?=$topTextClass?>"><?=$topText?></p>
|
||||
<table id="invoices_table">
|
||||
<tr class="header">
|
||||
<th>Date Issued</th>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ $(document).ready(function() {
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="ui-widget ui-widget-content block-shadow clearfix padded-strong billing-panel">
|
||||
<div class="ui-widget prefpanel clearfix padded-strong billing-panel">
|
||||
<H2><?=_("Account Plans")?></H2>
|
||||
<H4><?=_("Upgrade today to get more listeners and storage space!")?></H4>
|
||||
<div>
|
||||
|
|
@ -215,7 +215,7 @@ $(document).ready(function() {
|
|||
</td>
|
||||
<td>2 Streams
|
||||
</td>
|
||||
<td>3 Streams
|
||||
<td class="last-column">3 Streams
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -225,7 +225,7 @@ $(document).ready(function() {
|
|||
</td>
|
||||
<td>64kbps and 196kbps Stream Quality
|
||||
</td>
|
||||
<td>64kbps, 128kbps, and 196kbps Stream Quality
|
||||
<td class="last-column">64kbps, 128kbps, and 196kbps Stream Quality
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="august-promo">
|
||||
|
|
@ -241,7 +241,7 @@ $(document).ready(function() {
|
|||
<span>100 Listeners per stream</span><br>
|
||||
<div>200 Listeners per stream</div>
|
||||
</td>
|
||||
<td>
|
||||
<td class="last-column">
|
||||
<span>500 Listeners per stream</span><br>
|
||||
<div>1000 Listeners per stream</div>
|
||||
</td>
|
||||
|
|
@ -259,7 +259,7 @@ $(document).ready(function() {
|
|||
<span>30GB Storage</span><br>
|
||||
<div>60GB Storage</div>
|
||||
</td>
|
||||
<td>
|
||||
<td class="last-column">
|
||||
<span>150GB Storage</span><br>
|
||||
<div>300GB Storage</div>
|
||||
</td>
|
||||
|
|
@ -271,7 +271,7 @@ $(document).ready(function() {
|
|||
</td>
|
||||
<td>Live Chat, Ticket, Email, Forum Support
|
||||
</td>
|
||||
<td>Live Chat, Ticket, Email, Forum Support
|
||||
<td class="last-column">Live Chat, Ticket, Email, Forum Support
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -281,17 +281,17 @@ $(document).ready(function() {
|
|||
</td>
|
||||
<td>Save 15% if paid annually
|
||||
</td>
|
||||
<td>Save 15% if paid annually
|
||||
<td class="last-column">Save 15% if paid annually
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="price">
|
||||
<tr class="price last-row">
|
||||
<td id="hobbyist_grid_price">
|
||||
</td>
|
||||
<td id="starter_grid_price">
|
||||
</td>
|
||||
<td id="plus_grid_price">
|
||||
</td>
|
||||
<td id="premium_grid_price">
|
||||
<td class="last-column" id="premium_grid_price">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -416,7 +416,7 @@ echo($currentProduct["name"]);
|
|||
<b>Total:</b> <span id="total"></span>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Submit Order" id="atpro_submitorder"></input>
|
||||
<input type="submit" class="btn right-floated" value="Submit Order" id="atpro_submitorder"></input>
|
||||
<div class="clearfix"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -2,21 +2,20 @@
|
|||
|
||||
.billing-panel
|
||||
{
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
width: 500px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.billing-panel h3
|
||||
{
|
||||
color: #222;
|
||||
/*color: #222;*/
|
||||
}
|
||||
|
||||
.billing-panel h4
|
||||
{
|
||||
font-size: 1.25em;
|
||||
margin: 0px;
|
||||
color: #333;
|
||||
/*color: #333;*/
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
|
|
@ -24,16 +23,16 @@
|
|||
{
|
||||
border: 0px solid #000;
|
||||
margin: 0 auto;
|
||||
color: #000;
|
||||
/*color: #000;*/
|
||||
}
|
||||
|
||||
#upgrade-downgrade label
|
||||
{
|
||||
color: rgb(28,28,28);
|
||||
/*color: rgb(28,28,28);*/
|
||||
}
|
||||
#upgrade-downgrade label.disabled
|
||||
{
|
||||
color: rgb(108,108,108);
|
||||
/*color: rgb(108,108,108);*/
|
||||
}
|
||||
|
||||
#upgrade-downgrade dl
|
||||
|
|
@ -55,14 +54,14 @@
|
|||
{
|
||||
border-spacing: 0px;
|
||||
border-collapse: separate;
|
||||
border: 1px solid #777;
|
||||
width: 680px;
|
||||
margin-left: -140px;
|
||||
/*border: 1px solid #777;*/
|
||||
/*background-color: #555;*/
|
||||
table-layout: fixed;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0px 5px 5px rgba(0,0,0,0.5);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.pricing-grid .august-promo div {
|
||||
|
|
@ -80,17 +79,33 @@
|
|||
|
||||
.pricing-grid td, .pricing-grid th
|
||||
{
|
||||
border-bottom: 1px solid #999;
|
||||
border-right: 1px solid #bbb;
|
||||
background-color: #ccc;
|
||||
border-bottom: 1px solid #5b5b5b;
|
||||
border-right: 1px solid #5b5b5b;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pricing-grid td {
|
||||
background: #2f2f2f;
|
||||
color: #cdcdcd;
|
||||
}
|
||||
|
||||
.pricing-grid .last-column {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.pricing-grid .last-row td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.pricing-grid th
|
||||
{
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border: 0px;
|
||||
color: #CDCDCD;
|
||||
background-color:#ff5d1a;
|
||||
background: -moz-linear-gradient(top, #dd4202 0, #ff5d1a 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dd4202), color-stop(100%, #ff5d1a));
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -99,11 +114,8 @@
|
|||
text-align: right;
|
||||
background-color: #ddd;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#current_plan
|
||||
{
|
||||
text-align: center;
|
||||
background-color: #2f2f2f;
|
||||
color: #cdcdcd;
|
||||
}
|
||||
|
||||
#plantype
|
||||
|
|
@ -146,6 +158,7 @@
|
|||
border: 1px solid #777;
|
||||
background: #ccc;
|
||||
padding: 5px;
|
||||
color: #000;
|
||||
}
|
||||
#total_box
|
||||
{
|
||||
|
|
@ -189,7 +202,6 @@
|
|||
|
||||
#invoices_table
|
||||
{
|
||||
margin: 0 auto;
|
||||
border-spacing: 0px;
|
||||
border-collapse: separate;
|
||||
border: 1px solid #777;
|
||||
|
|
@ -197,12 +209,17 @@
|
|||
table-layout: fixed;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 35px;
|
||||
background: #ccc;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#invoices_table tbody tr th
|
||||
{
|
||||
border: 0px;
|
||||
color: #efefef;
|
||||
background: #5E5E5E;
|
||||
background-color: #5E5E5E;
|
||||
border-top: 1px solid #9d9d9d;
|
||||
|
||||
}
|
||||
|
||||
#invoices_table .header
|
||||
|
|
@ -210,6 +227,7 @@
|
|||
box-shadow: 0px 2px 2px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
|
||||
#invoices_table tr
|
||||
{
|
||||
border: 1px solid #555;
|
||||
|
|
@ -221,11 +239,15 @@
|
|||
}
|
||||
|
||||
/** This form is the separate one on the Billing Account Details page (BillingClient.php) */
|
||||
#clientdetails_form {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#clientdetails_form dt {
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
/*margin-bottom: 10px;*/
|
||||
}
|
||||
#clientdetails_form dd {
|
||||
float: left;
|
||||
|
|
@ -251,3 +273,7 @@
|
|||
margin-top:10px;
|
||||
background: url('images/august_aweomse_promo_banner.png') no-repeat;
|
||||
}
|
||||
|
||||
.billing-details-checkbox {
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1203,7 +1203,7 @@ input[type="checkbox"] {
|
|||
}
|
||||
|
||||
#pref_form dt, #pref_form dd,
|
||||
#pref_form textarea {
|
||||
#pref_form textarea, #clientdetails_form dd {
|
||||
display:block;
|
||||
float:none;
|
||||
margin-left:0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue