Mirrors/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2024-11-08 20:22:42 +01:00
Code Issues Releases Activity

Responsive fixes for homepage

Browse Source
This commit is contained in:
Razi KAntorp 2014-06-14 14:29:37 +02:00
parent 080800d646
commit 5a4f625d31
6 changed files with 310 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/views/plans.blade.php
View File

@ -1,7 +1,7 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="plans-table col-md-9"> <div class="plans-table col-md-9">
<div class="col-md-4 desc hide-mobile"> <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,36 +20,36 @@
</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="hide-desktop">Number of clients per account</div><span>500</span></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">Unlimited client invoices</div><span class="glyphicon glyphicon-ok"></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">Add your company logo</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">Live .PDF invoice creation</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">4 beatiful invoice templates</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">Accept credit card payments</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">Quotes/pro-forma invoices</div><span class="glyphicon glyphicon-remove"></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">Custom fields and invoice colors</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">Dynamic chart builder</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">Priority email support</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">Remove "Created by Invoice Ninja"</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">Latest and greatest features</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 price"><div class="hide-desktop">Pricing</div><p>Free<span> /Always!</span></p></div> <div class="cell price"><div class="hidden-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="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">Number of clients per account</div><span style="color: #2299c0; font-size: 16px;">5,000</span></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">Unlimited client invoices</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">Add your company logo</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">Live .PDF invoice creation</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">4 beatiful invoice templates</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">Accept credit card payments</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">Quotes/pro-forma invoices</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">Custom invoice fields and colors</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">Dynamic chart builder</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">Priority email support</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">Remove "Created by Invoice Ninja"</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"><div class="hidden-desktop">Latest and greatest features</div><span class="glyphicon glyphicon-ok"></div>
<div class="cell price"><div class="hide-desktop">Pricing</div><p>$50<span> /Year</span></p></div> <div class="cell price"><div class="hidden-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>

9
app/views/public/contact_us.blade.php
View File

@ -67,9 +67,10 @@ var contactForm = {
<div class="row"> <div class="row">
<div class="col-md-7"> <div class="col-md-7">
<h2>Questions, special requests, or just want to say hi?</h2> <div class="headline">
<p>Fill in the form below and we'll get back to you as soon as possible. Hope to hear from you!</p> <h2>Questions, special requests, or just want to say hi?</h2>
<p>Fill in the form below and we'll get back to you as soon as possible. Hope to hear from you!</p>
</div>
{{ Form::open(['url' => 'contact_submit', 'class' => 'feedbackForm']) }} {{ Form::open(['url' => 'contact_submit', 'class' => 'feedbackForm']) }}
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Name"> <input type="text" class="form-control" id="name" name="name" placeholder="Name">
@ -96,7 +97,7 @@ var contactForm = {
<h2>Other ways to reach us</h2> <h2>Other ways to reach us</h2>
<p><span class="glyphicon glyphicon-send"></span><a href="mailto:contact@invoiceninja.com">contact@invoiceninja.com</a></p> <p><span class="glyphicon glyphicon-send"></span><a href="mailto:contact@invoiceninja.com">contact@invoiceninja.com</a></p>
<p><span class="glyphicon glyphicon-comment"></span><a href="http://www.invoiceninja.org" target="_blank">Google Group</a></p> <p><span class="glyphicon glyphicon-comment"></span><a href="http://www.invoiceninja.org" target="_blank">Google Group</a></p>
<p><span class="github"></span><div style="padding-top:10px"> &nbsp;&nbsp;<a href="https://github.com/hillelcoren/invoice-ninja" target="_blank">GitHub Project</a></div></p> <p><span class="socicon">Q</span><a href="https://github.com/hillelcoren/invoice-ninja" target="_blank">GitHub Project</a></div></p>
</div> </div>
</div> </div>

1
app/views/public/header.blade.php
View File

@ -9,7 +9,6 @@
<link href="{{ asset('css/bootstrap.splash.css') }}" rel="stylesheet" type="text/css"/> <link href="{{ asset('css/bootstrap.splash.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/splash.css') }}" rel="stylesheet" type="text/css"/> <link href="{{ asset('css/splash.css') }}" rel="stylesheet" type="text/css"/>
--> -->
<!-- <!--
<link href="{{ asset('images/apple-touch-icon-114x114-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="114x114"> <link href="{{ asset('images/apple-touch-icon-114x114-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="114x114">
<link href="{{ asset('images/apple-touch-icon-72x72-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="72x72"> <link href="{{ asset('images/apple-touch-icon-72x72-precomposed.png') }}" rel="apple-touch-icon-precomposed" sizes="72x72">

198
public/built.public.css
View File

File diff suppressed because one or more lines are too long

188
public/css/splash.css
View File

@ -335,6 +335,10 @@ float: right;
section.features1 .col-md-7 img, section.features3 .col-md-7 img { section.features1 .col-md-7 img, section.features3 .col-md-7 img {
margin-left: 40px; margin-left: 40px;
} }
.upper-footer {
background-color: #f8f8f8;
border-top: 1px solid #e6e6e6;
}
section.upper-footer.white-bg { section.upper-footer.white-bg {
margin: 0; margin: 0;
@ -486,10 +490,6 @@ section.team .col-md-3 h2 {
section.about .screendump { section.about .screendump {
height: 220px; height: 220px;
} }
section.about .col-md-5 {
padding-right: 15px;
padding-left: 43px;
}
section.about.white-bg .col-md-5 { section.about.white-bg .col-md-5 {
padding-right: 43px; padding-right: 43px;
padding-left: 15px; padding-left: 15px;
@ -536,7 +536,7 @@ section.team .img-team {
z-index: 1000; position: relative; z-index: 1000; position: relative;
} }
section.team .img-team img {} section.team .img-team img {}
section.contact .address .glyphicon { section.contact .address .glyphicon, section.contact .address .socicon {
background: #edd71e; background: #edd71e;
height: 40px; height: 40px;
width: 40px; width: 40px;
@ -545,14 +545,17 @@ section.contact .address .glyphicon {
border-radius: 50px; border-radius: 50px;
color: #1a1818; color: #1a1818;
margin-right: 15px; margin-right: 15px;
display: inline-block;
} }
section.contact .address p { section.contact .address p {
margin-bottom: 20px; margin-top: 20px;
} }
section.contact .address span.push { section.contact .address span.push {
margin-left: 55px; margin-left: 55px;
line-height: 25px; line-height: 25px;
} }
section.contact .form-control, section.secure .form-control, footer.footer .form-control { section.contact .form-control, section.secure .form-control, footer.footer .form-control {
display: block; display: block;
width: 100%; width: 100%;
@ -574,6 +577,9 @@ section.contact .form-control, section.secure .form-control, footer.footer .form
section.contact textarea.form-control { section.contact textarea.form-control {
height: auto; height: auto;
} }
section.contact form {
margin-top: 30px;
}
section.secure label { text-transform: uppercase; font-size: 12px; font-weight: 800; margin-bottom: 10px; display: block;} section.secure label { text-transform: uppercase; font-size: 12px; font-weight: 800; margin-bottom: 10px; display: block;}
@ -819,6 +825,18 @@ footer.footer form#mad_mimi_signup_form input {
h2 { h2 {
font-size: 20px; font-size: 20px;
} }
.headline h2 {
margin-top: 0;
}
.headline {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 15px;
}
section.team h2, section.plans h2 {
font-size: 20px;
margin: 0 0 15px;
}
/* Mobile navigation */ /* Mobile navigation */
.navbar { .navbar {
@ -888,13 +906,34 @@ footer.footer form#mad_mimi_signup_form input {
} }
/* Sections */ /* Sections */
section.features, section.blue, section, section.secure, section.about, section.team, section.contact, section.faq, section.testi, section.plans {
padding: 40px 0;
margin: 0 !important;
}
section.features-splash .icon {
width: 50px;
height: 50px;
border: 4px solid #1d8db3;
}
section.features-splash .icon img {
width: 30px;
}
section.about .col-md-5 { section.about .col-md-5 {
padding-left: 15px !important; padding-left: 15px !important;
} }
section.faq .question {
padding-bottom: 10px;
margin-bottom: 20px;
}
section.faq a.expander {
font-size: 14px;
}
section.faq .contact-box { section.faq .contact-box {
margin-top: 20px; margin-top: 20px;
padding: 25px; padding: 25px;
text-align: center; text-align: center;
} }
section.faq .contact-box h2 { section.faq .contact-box h2 {
float: none; float: none;
@ -902,7 +941,7 @@ footer.footer form#mad_mimi_signup_form input {
margin: 10px 0; margin: 10px 0;
} }
section.faq .contact-box img { section.faq .contact-box img {
float: none; float: none;
display: inline-block; display: inline-block;
margin-right: 0; margin-right: 0;
margin-left: 0; margin-left: 0;
@ -917,6 +956,70 @@ footer.footer form#mad_mimi_signup_form input {
section.faq .contact-box p { section.faq .contact-box p {
margin: 0; margin: 0;
} }
section.plans .plans-table {
margin-top: 30px;
font-size: 12px;
}
.plans-table .free .cell {
border-left: 1px solid #dfe0e1;
border-right: 1px solid #dfe0e1;
}
.plans-table .free .cell:first-child {
border-left: 1px solid #9b9b9b;
border-right: 1px solid #9b9b9b;
}
section.plans .plans-table .cell {
display: block;
width: 100%;
}
section.plans .plans-table span {
display: inline-block !important;
}
section.plans .plans-table .hidden-desktop {
display: inline-block !important;
margin-bottom: 0;
margin-right: 10px;
}
section.plans .plans-table .cell {
height: auto;
padding: 14px 0;
}
section.plans .plans-table .free .cell {
padding-right: 0;
}
section.plans .plans-table .free .cell:first-child {
margin-right: 0;
}
section.plans .plans-table .cell .cta {
margin-bottom: 0 !important;
}
section.plans .plans-table .pro {
margin-top: 30px;
}
.plans-table .pro .cell:last-child, .plans-table .free .cell:last-child {
padding: 14px 0 0 0 !important;
}
.plans-table .pro .cell:last-child p {
margin: 0;
padding: 0;
}
section.about img {
margin-top: 20px;
}
section.team .img-team {
width: 60%;
min-width: 60%;
margin: 0 auto;
}
section.team .col-md-3:last-child p:last-child {
margin-bottom: 0;
}
/* Heros */
.hero1.background {
min-height: 100px;
}
.hero .caption { .hero .caption {
width: 100%; width: 100%;
background: #fff; background: #fff;
@ -952,28 +1055,24 @@ footer.footer form#mad_mimi_signup_form input {
} }
section.features, section.blue, section, section.secure, section.about, section.team, section.contact, section.faq, section.testi {
padding: 40px 0;
margin: 0 !important;
}
section.secure .info { section.secure .info {
padding-top: 0; padding-top: 0;
} }
section.secure .card { section.secure .card {
padding: 15px; padding: 15px;
margin-bottom: 40px; margin-bottom: 40px;
} }
section.secure .card p { section.secure .card p {
padding-top: 0; padding-top: 0;
padding-right: 15px; padding-right: 15px;
line-height: 1; line-height: 1;
} }
section.blue h1 { section.blue h1 {
line-height: 1.2; line-height: 1.2;
margin-bottom: 20px; margin-bottom: 20px;
margin-top: 0; margin-top: 0;
font-size: 30px; font-size: 30px;
} }
section.blue h1 span { section.blue h1 span {
font-size: 20px; font-size: 20px;
} }
@ -1023,11 +1122,12 @@ float: none;
} }
section.contact .address { section.contact .address {
margin: 0; margin: 0;
text-align: center;
} }
section.contact .address p { section.contact .address p {
text-align: center; text-align: center;
} }
section.contact .address .glyphicon { section.contact .address .glyphicon, section.contact .address .socicon {
display: block; display: block;
margin: 0 auto 7px; margin: 0 auto 7px;
float: none; float: none;
@ -1056,6 +1156,8 @@ float: none;
#feedbackForm { #feedbackForm {
margin-top: 15px; margin-top: 15px;
} }
/* Footer */
footer .navbar-inner { footer .navbar-inner {
float: none; float: none;
} }
@ -1225,26 +1327,4 @@ div.fb_iframe_widget > span {
} }
.plans-table a .cta h2 span { .plans-table a .cta h2 span {
background: #1e84a5; background: #1e84a5;
}
@media screen and (max-width: 769px) {
.plans-table .cell {
height: auto;
padding: 14px 0;
}
.plans-table .free .cell {
padding-right: 0;
}
.plans-table .free .cell:first-child {
margin-right: 0;
}
.plans-table .cell div:first-child {
margin-bottom: 5px;
}
.plans-table .cell .cta {
margin-bottom: 0 !important;
}
.plans-table .pro {
margin-top: 40px;
}
} }

BIN
public/images/devices.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 88 KiB