Improvements for responsive design

This commit is contained in:
Hillel Coren 2014-07-17 00:04:56 +03:00
parent eafaa4c8d2
commit daf14c6916
11 changed files with 145 additions and 110 deletions

View File

@ -4,5 +4,6 @@ return array(
//'TAG_MANAGER_KEY' => '', //'TAG_MANAGER_KEY' => '',
//'ANALYTICS_KEY' => '', //'ANALYTICS_KEY' => '',
'NINJA_PROD' => true,
); );

View File

@ -310,7 +310,7 @@ class PaymentController extends \BaseController
} }
} }
if (!Session::get('return_url') || !Session::get('affiliate_id')) if (!Session::get('affiliate_id'))
{ {
return Utils::fatalError(); return Utils::fatalError();
} }
@ -428,7 +428,7 @@ class PaymentController extends \BaseController
public function claim_license() public function claim_license()
{ {
$license = License::where('license_key', '=', Input::get('key')) $license = License::where('license_key', '=', Input::get('license_key'))
->where('is_claimed', '=', false)->first(); ->where('is_claimed', '=', false)->first();
if ($license) if ($license)

View File

@ -325,7 +325,7 @@ Want something changed? We're {{ link_to('https://github.com/hillelcoren/invoice
@if (Auth::check() && !Auth::user()->isPro()) @if (Auth::check() && !Auth::user()->isPro())
<div class="modal fade" id="proPlanModal" tabindex="-1" role="dialog" aria-labelledby="proPlanModalLabel" aria-hidden="true"> <div class="modal fade" id="proPlanModal" tabindex="-1" role="dialog" aria-labelledby="proPlanModalLabel" aria-hidden="true">
<div class="modal-dialog" style="min-width:910px"> <div class="modal-dialog medium-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@ -346,9 +346,8 @@ Want something changed? We're {{ link_to('https://github.com/hillelcoren/invoice
<section class="plans"> <section class="plans">
<div class="container">
<div class="row"> <div class="row">
<div class="col-md-9"> <div class="col-md-12">
<h2>Go Pro to Unlock Premium Invoice Ninja Features</h2> <h2>Go Pro to Unlock Premium Invoice Ninja Features</h2>
<p>We believe that the free version of Invoice Ninja is a truly awesome product loaded <p>We believe that the free version of Invoice Ninja is a truly awesome product loaded
with the key features you need to bill your clients electronically. But for those who with the key features you need to bill your clients electronically. But for those who
@ -356,7 +355,6 @@ Want something changed? We're {{ link_to('https://github.com/hillelcoren/invoice
offers more versatility, power and customization options for just $50 per year. </p> offers more versatility, power and customization options for just $50 per year. </p>
</div> </div>
</div> </div>
</div>
@include('plans') @include('plans')
&nbsp; &nbsp;

View File

@ -111,6 +111,7 @@
{{ Former::hidden('data')->data_bind("value: ko.mapping.toJSON(model)") }} {{ Former::hidden('data')->data_bind("value: ko.mapping.toJSON(model)") }}
<div class="table-responsive">
<table class="table invoice-table" style="margin-bottom: 0px !important"> <table class="table invoice-table" style="margin-bottom: 0px !important">
<thead> <thead>
<tr> <tr>
@ -159,9 +160,9 @@
<td colspan="2" rowspan="5"> <td colspan="2" rowspan="5">
<br/> <br/>
{{ Former::textarea('public_notes')->data_bind("value: wrapped_notes, valueUpdate: 'afterkeydown'") {{ Former::textarea('public_notes')->data_bind("value: wrapped_notes, valueUpdate: 'afterkeydown'")
->label(false)->placeholder(trans('texts.note_to_client'))->style('width: 520px; resize: none') }} ->label(false)->placeholder(trans('texts.note_to_client'))->style('resize: none') }}
{{ Former::textarea('terms')->data_bind("value: wrapped_terms, valueUpdate: 'afterkeydown'") {{ Former::textarea('terms')->data_bind("value: wrapped_terms, valueUpdate: 'afterkeydown'")
->label(false)->placeholder(trans('texts.invoice_terms'))->style('width: 520px; resize: none') ->label(false)->placeholder(trans('texts.invoice_terms'))->style('resize: none')
->addGroupClass('less-space-bottom') }} ->addGroupClass('less-space-bottom') }}
<label class="checkbox" style="width: 200px"> <label class="checkbox" style="width: 200px">
<input type="checkbox" style="width: 24px" data-bind="checked: set_default_terms"/>{{ trans('texts.save_as_default_terms') }} <input type="checkbox" style="width: 24px" data-bind="checked: set_default_terms"/>{{ trans('texts.save_as_default_terms') }}
@ -198,6 +199,7 @@
</tr> </tr>
</tfoot> </tfoot>
</table> </table>
</div>
<p>&nbsp;</p> <p>&nbsp;</p>
<div class="form-actions"> <div class="form-actions">
@ -279,7 +281,7 @@
@endif @endif
<div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="clientModalLabel" aria-hidden="true"> <div class="modal fade" id="clientModal" tabindex="-1" role="dialog" aria-labelledby="clientModalLabel" aria-hidden="true">
<div class="modal-dialog" style="min-width:1000px"> <div class="modal-dialog large-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
@ -368,7 +370,7 @@
</div> </div>
<div class="modal fade" id="taxModal" tabindex="-1" role="dialog" aria-labelledby="taxModalLabel" aria-hidden="true"> <div class="modal fade" id="taxModal" tabindex="-1" role="dialog" aria-labelledby="taxModalLabel" aria-hidden="true">
<div class="modal-dialog" style="min-width:150px"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

View File

@ -1,7 +1,6 @@
<div class="container"> <div class="row">
<div class="row"> <div class="plans-table col-md-12">
<div class="plans-table col-md-9"> <div class="col-md-4 desc hide-phone">
<div class="col-md-4 desc hidden-phone">
<div class="cell"></div> <div class="cell"></div>
<div class="cell">Number of clients per account</div> <div class="cell">Number of clients per account</div>
<div class="cell">Unlimited client invoices</div> <div class="cell">Unlimited client invoices</div>
@ -20,38 +19,37 @@
</div> </div>
<div class="free col-md-4"> <div class="free col-md-4">
<div class="cell">Free</div> <div class="cell">Free</div>
<div class="cell"><div class="hidden-desktop">Number of clients per account</div><span>500</span></div> <div class="cell"><div class="hide-desktop">Number of clients per account</div><span>500</span></div>
<div class="cell"><div class="hidden-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-remove"></div> <div class="cell"><div class="hide-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-remove"></div>
<div class="cell"><div class="hidden-desktop">Custom fields and invoice colors</div><span class="glyphicon glyphicon-remove"></div> <div class="cell"><div class="hide-desktop">Custom fields and invoice colors</div><span class="glyphicon glyphicon-remove"></div>
<div class="cell"><div class="hidden-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-remove"></div> <div class="cell"><div class="hide-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-remove"></div>
<div class="cell"><div class="hidden-desktop">Priority email support</div><span class="glyphicon glyphicon-remove"></div> <div class="cell"><div class="hide-desktop">Priority email support</div><span class="glyphicon glyphicon-remove"></div>
<div class="cell"><div class="hidden-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-remove"></div> <div class="cell"><div class="hide-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-remove"></div>
<div class="cell"><div class="hidden-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-remove"></div> <div class="cell"><div class="hide-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-remove"></div>
<div class="cell price"><div class="hidden-desktop">Pricing</div><p>Free<span> /Always!</span></p></div> <div class="cell price"><div class="hide-desktop">Pricing</div><p>Free<span> /Always!</span></p></div>
</div> </div>
<div class="pro col-md-4"> <div class="pro col-md-4">
<div class="cell">Pro Plan<span class="glyphicon glyphicon-star"></div> <div class="cell">Pro Plan<span class="glyphicon glyphicon-star"></div>
<div class="cell"><div class="hidden-desktop">Number of clients per account</div><span style="color: #2299c0; font-size: 16px;">5,000</span></div> <div class="cell"><div class="hide-desktop">Number of clients per account</div><span style="color: #2299c0; font-size: 16px;">5,000</span></div>
<div class="cell"><div class="hidden-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Add your company logo</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Live .PDF invoice creation</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">4 beatiful invoice templates</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Accept credit card payments</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Custom invoice fields and colors</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Custom invoice fields and colors</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Dynamic chart builder</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Priority email support</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Priority email support</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Remove "Created by Invoice Ninja"</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell"><div class="hidden-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-ok"></div> <div class="cell"><div class="hide-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell price"><div class="hidden-desktop">Pricing</div><p>$50<span> /Year</span></p></div> <div class="cell price"><div class="hide-desktop">Pricing</div><p>$50<span> /Year</span></p></div>
<!-- <div class="cell"><a href="#"><div class="cta"><h2 onclick="return getStarted()">GO PRO <span>+</span></h2></div> </a>--> <!-- <div class="cell"><a href="#"><div class="cta"><h2 onclick="return getStarted()">GO PRO <span>+</span></h2></div> </a>-->
</div> </div>
</div> </div>
</div>
</div> </div>

View File

@ -97,7 +97,7 @@
} }
</script> </script>
@if (!isset($hideHeader) || !$hideHeader) @if (!isset($hideHeader) || !$hideHeader)
<div class="navbar-top navbar hidden-phone" style="margin-bottom:0px"> <div class="navbar-top navbar hide-phone" style="margin-bottom:0px">
<div class="container"> <div class="container">
<div class="navbar-inner"> <div class="navbar-inner">
<ul> <ul>
@ -128,9 +128,9 @@
</button> </div> </button> </div>
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="hidden-desktop">{{ link_to('http://blog.invoiceninja.com', 'Blog' ) }}</li> <li class="hide-desktop">{{ link_to('http://blog.invoiceninja.com', 'Blog' ) }}</li>
<li class="hidden-desktop">{{ link_to('https://www.invoiceninja.com/about', 'About Us' ) }}</li> <li class="hide-desktop">{{ link_to('https://www.invoiceninja.com/about', 'About Us' ) }}</li>
<li class="hidden-desktop">{{ link_to('https://www.invoiceninja.com/contact', 'Contact Us' ) }}</li> <li class="hide-desktop">{{ link_to('https://www.invoiceninja.com/contact', 'Contact Us' ) }}</li>
<li>{{ link_to('https://www.invoiceninja.com/features', 'Features' ) }}</li> <li>{{ link_to('https://www.invoiceninja.com/features', 'Features' ) }}</li>
<li>{{ link_to('https://www.invoiceninja.com/plans', 'Plans' ) }}</li> <li>{{ link_to('https://www.invoiceninja.com/plans', 'Plans' ) }}</li>
<li>{{ link_to('https://www.invoiceninja.com/testimonials', 'Testimonials' ) }}</li> <li>{{ link_to('https://www.invoiceninja.com/testimonials', 'Testimonials' ) }}</li>

View File

@ -23,7 +23,9 @@
</div> </div>
</div> </div>
<div class="container">
@include('plans') @include('plans')
</div>
</div> </div>
</section> </section>

View File

@ -1792,10 +1792,6 @@ color: #333;
border-bottom: 1px solid #dfe0e1; border-bottom: 1px solid #dfe0e1;
} }
.hidden-desktop {
display: none !important;
}
.greenlink a { color:#36c157; } .greenlink a { color:#36c157; }
.greenlink a:hover { color:#2e9e49; } .greenlink a:hover { color:#2e9e49; }
.redlink a { color:#da4830; } .redlink a { color:#da4830; }
@ -2476,11 +2472,28 @@ box-shadow: 0px 0px 15px 0px rgba(0, 5, 5, 0.2);
.plans-table a .cta h2 span {background: #1e84a5;} .plans-table a .cta h2 span {background: #1e84a5;}
@media screen and (min-width: 769px) { @media screen and (min-width: 992px) {
.hide-desktop {display: none;} .hide-desktop {display: none;}
} }
@media (max-width: 992px) {
.hide-phone {
display: none !important;
}
}
@media screen and (min-width: 992px) {
.medium-dialog {
width: 760px;
}
.large-dialog {
width: 960px;
}
}
@media (max-width: 767px) { @media (max-width: 767px) {
.test-class{color:black;}
.navbar-default .navbar-nav .open .dropdown-menu > li > a { .navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1; color: #ecf0f1;
} }

View File

@ -104,12 +104,6 @@ text-align: center;
} }
.form-control.with-icon {padding-left: 50px !important;} .form-control.with-icon {padding-left: 50px !important;}
/* Responsive actions */
.hidden-desktop {
display: none !important;
}
/* Navigation */ /* Navigation */
.navbar { .navbar {
@ -1355,3 +1349,13 @@ div.fb_iframe_widget > span {
.plans-table a .cta h2 span { .plans-table a .cta h2 span {
background: #1e84a5; background: #1e84a5;
} }
@media (min-width: 992px) {
.hide-desktop {display: none !important;}
}
@media (max-width: 992px) {
.hide-phone {
display: none !important;
}
}

View File

@ -86,12 +86,6 @@ text-align: center;
} }
.form-control.with-icon {padding-left: 50px !important;} .form-control.with-icon {padding-left: 50px !important;}
/* Responsive actions */
.hidden-desktop {
display: none !important;
}
/* Navigation */ /* Navigation */
.navbar { .navbar {
@ -1337,3 +1331,13 @@ div.fb_iframe_widget > span {
.plans-table a .cta h2 span { .plans-table a .cta h2 span {
background: #1e84a5; background: #1e84a5;
} }
@media (min-width: 992px) {
.hide-desktop {display: none !important;}
}
@media (max-width: 992px) {
.hide-phone {
display: none !important;
}
}

View File

@ -17,10 +17,6 @@ color: #333;
border-bottom: 1px solid #dfe0e1; border-bottom: 1px solid #dfe0e1;
} }
.hidden-desktop {
display: none !important;
}
.greenlink a { color:#36c157; } .greenlink a { color:#36c157; }
.greenlink a:hover { color:#2e9e49; } .greenlink a:hover { color:#2e9e49; }
.redlink a { color:#da4830; } .redlink a { color:#da4830; }
@ -701,11 +697,28 @@ box-shadow: 0px 0px 15px 0px rgba(0, 5, 5, 0.2);
.plans-table a .cta h2 span {background: #1e84a5;} .plans-table a .cta h2 span {background: #1e84a5;}
@media screen and (min-width: 769px) { @media screen and (min-width: 992px) {
.hide-desktop {display: none;} .hide-desktop {display: none;}
} }
@media (max-width: 992px) {
.hide-phone {
display: none !important;
}
}
@media screen and (min-width: 992px) {
.medium-dialog {
width: 760px;
}
.large-dialog {
width: 960px;
}
}
@media (max-width: 767px) { @media (max-width: 767px) {
.test-class{color:black;}
.navbar-default .navbar-nav .open .dropdown-menu > li > a { .navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1; color: #ecf0f1;
} }