mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-09 12:42:36 +01:00
New dashboard styling
This commit is contained in:
Joshua Dwire
parent
770e3090af
commit
0d078d27af
100
public/css/built.public.css
vendored
100
public/css/built.public.css
vendored
@ -9445,17 +9445,28 @@ div.DTFC_LeftFootWrapper table {
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: #f8f8f8;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.container {
|
||||
width: 1370px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: 62px;
|
||||
padding: 21px 15px;
|
||||
}
|
||||
|
||||
.navbar li a {
|
||||
padding-top: 18px;
|
||||
font-weight: 500;
|
||||
@ -9469,8 +9480,56 @@ html {
|
||||
x-moz-box-shadow: 0 0 10px 2px rgba(0,0,0,.05);
|
||||
x-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,.05);
|
||||
box-shadow: 0 0 10px 2px rgba(0,0,0,.05);
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
border-top: 2px solid transparent;
|
||||
letter-spacing: 2px;
|
||||
font-size: 14px;
|
||||
color: #838181;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus {
|
||||
background: none;
|
||||
border-top-color: #42d165;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-nav > li > a {
|
||||
padding: 24px 0 26px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.navbar-nav > li > a {
|
||||
margin: 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1220px) and (max-width: 1399px) {
|
||||
.navbar .container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1420px) {
|
||||
.navbar .container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
#footer {
|
||||
text-align: center
|
||||
}
|
||||
@ -9640,6 +9699,45 @@ table td {
|
||||
/* hide table sorting indicators */
|
||||
table.data-table thead .sorting { background: url('') no-repeat center right; }
|
||||
|
||||
/* Make Success color match the Dashboard's green */
|
||||
.label-success,
|
||||
.progress-bar-success,
|
||||
.btn-success,
|
||||
.btn-success.disabled,
|
||||
.btn-success[disabled],
|
||||
fieldset[disabled] .btn-success,
|
||||
.btn-success.disabled:hover,
|
||||
.btn-success[disabled]:hover,
|
||||
fieldset[disabled] .btn-success:hover,
|
||||
.btn-success.disabled:focus,
|
||||
.btn-success[disabled]:focus,
|
||||
fieldset[disabled] .btn-success:focus,
|
||||
.btn-success.disabled.focus,
|
||||
.btn-success[disabled].focus,
|
||||
fieldset[disabled] .btn-success.focus,
|
||||
.btn-success.disabled:active,
|
||||
.btn-success[disabled]:active,
|
||||
fieldset[disabled] .btn-success:active,
|
||||
.btn-success.disabled.active,
|
||||
.btn-success[disabled].active,
|
||||
fieldset[disabled] .btn-success.active {
|
||||
background: #42d165;
|
||||
}
|
||||
|
||||
.btn-success .badge {
|
||||
color: #42d165;
|
||||
}
|
||||
|
||||
.btn-success:hover,
|
||||
.btn-success:focus,
|
||||
.btn-success.focus,
|
||||
.btn-success:active,
|
||||
.btn-success.active,
|
||||
.open > .dropdown-toggle.btn-success,
|
||||
.label-success[href]:hover,
|
||||
.label-success[href]:focus{
|
||||
background-color: #38b254;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 100;
|
||||
|
||||
File diff suppressed because one or more lines are too long
1
public/images/icon-balance.svg
Normal file
1
public/images/icon-balance.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.3 KiB |
1
public/images/icon-paidtodate.svg
Normal file
1
public/images/icon-paidtodate.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
public/images/icon-total-invoiced.svg
Normal file
1
public/images/icon-total-invoiced.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="39.25" height="50.493" viewBox="28.925 23.771 39.25 50.493"><g fill="#FFF"><path d="M65.928 63.838h-7.156c-.564 0-1.022.457-1.022 1.021v7.157H31.174V26.019h34.754v37.819zm-6.133 6.731v-4.686h4.687l-4.687 4.686zm7.154-46.594H30.153c-.565 0-1.023.457-1.023 1.022v48.04c0 .564.458 1.022 1.023 1.022H58.77c.267 0 .528-.104.723-.3l8.178-8.176c.195-.196.297-.457.297-.724h.002V24.997c0-.565-.457-1.022-1.022-1.022"/><path d="M59.998 66.086v3.99l3.99-3.99h-3.99zm-.408 4.977v-5.385h5.385l-5.385 5.385zm-28.21.748h26.166v-6.952c0-.675.55-1.226 1.226-1.226h6.95v-37.41H31.38v45.588zm26.574.408H30.97V25.815h35.16v38.227h-7.357a.82.82 0 0 0-.819.817v7.36zm-27.801-48.04a.819.819 0 0 0-.818.818v48.04c0 .451.367.817.818.817H58.77a.815.815 0 0 0 .58-.239l8.176-8.178a.816.816 0 0 0 .238-.578l.003-.203V24.997a.819.819 0 0 0-.819-.818H30.153zM58.77 74.264H30.153c-.677 0-1.228-.551-1.228-1.227v-48.04c0-.677.551-1.226 1.228-1.226h36.796c.676 0 1.227.55 1.227 1.226v40.067h-.02c-.04.25-.158.482-.34.663l-8.176 8.177a1.22 1.22 0 0 1-.869.36"/><path d="M34.752 29.085h8.177v2.045h-8.177v-2.045"/><path d="M34.956 30.925h7.769V29.29h-7.769v1.635zm8.177.409h-8.586v-2.453h8.586v2.453M34.752 32.151H48.04v2.045H34.752V32.15"/><path d="M34.956 33.992h12.88v-1.635h-12.88v1.635zm13.288.408H34.547v-2.453h13.697V34.4M36.796 44.417h5.623v21.466h-5.623V44.417zm0-5.621h5.623v3.577h-5.623v-3.577zm7.666 11.754h15.843v4.089H44.462v-4.09zm0-6.133h15.843v4.089H44.462v-4.09zm0-5.621h15.843v3.577H44.462v-3.577zm-8.688 29.13h18.398v-2.043h-9.71v-9.2h15.843v4.089h2.045V37.774c0-.565-.457-1.022-1.022-1.022H35.774c-.565 0-1.022.457-1.022 1.022v29.13c0 .565.457 1.023 1.022 1.023"/><path d="M37 42.169h5.213V39H37v3.169zm5.623.409h-6.031V38.59h6.03v3.987zm2.044-.41h15.435V39H44.667v3.169zm15.843.41H44.258V38.59H60.51v3.987zm-15.843 5.724h15.435v-3.68H44.667v3.68zm15.843.409H44.258v-4.498H60.51v4.498zm-15.843 5.724h15.435v-3.68H44.667v3.68zm15.843.409H44.258v-4.498H60.51v4.498zM37 65.678h5.213V44.622H37v21.056zm5.623.408h-6.031V44.213h6.03v21.873zm-6.85-29.13a.819.819 0 0 0-.817.817v29.131c0 .451.367.818.818.818h18.195v-1.636h-9.711v-9.608H60.51v4.09h1.635V37.773a.818.818 0 0 0-.817-.818H35.774zM54.378 68.13H35.774c-.676 0-1.227-.551-1.227-1.227v-29.13c0-.677.55-1.227 1.227-1.227h25.554c.676 0 1.227.55 1.227 1.226v23.204h-2.453v-4.09H44.667v8.79h9.71v2.454"/><path d="M38.33 45.95h2.555v2.045H38.33V45.95"/><path d="M38.534 47.79h2.146v-1.635h-2.146v1.636zm2.555.409h-2.964v-2.452h2.964v2.452M38.33 52.084h2.555v2.043H38.33v-2.043"/><path d="M38.534 53.924h2.146v-1.637h-2.146v1.637zm2.555.408h-2.964v-2.453h2.964v2.453M38.33 58.217h2.555v2.043H38.33v-2.043"/><path d="M38.534 60.057h2.146V58.42h-2.146v1.637zm2.555.408h-2.964v-2.453h2.964v2.453M38.33 62.305h2.555v2.045H38.33v-2.045"/><path d="M38.534 64.145h2.146v-1.636h-2.146v1.636zm2.555.408h-2.964V62.1h2.964v2.452"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
101
resources/assets/css/public.style.css
vendored
101
resources/assets/css/public.style.css
vendored
@ -1,17 +1,28 @@
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 14px;
|
||||
background-color: #f8f8f8;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
@media (min-width: 1400px) {
|
||||
.container {
|
||||
width: 1370px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: 62px;
|
||||
padding: 21px 15px;
|
||||
}
|
||||
|
||||
.navbar li a {
|
||||
padding-top: 18px;
|
||||
font-weight: 500;
|
||||
@ -25,8 +36,56 @@ html {
|
||||
x-moz-box-shadow: 0 0 10px 2px rgba(0,0,0,.05);
|
||||
x-webkit-box-shadow: 0 0 10px 2px rgba(0,0,0,.05);
|
||||
box-shadow: 0 0 10px 2px rgba(0,0,0,.05);
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
border-top: 2px solid transparent;
|
||||
letter-spacing: 2px;
|
||||
font-size: 14px;
|
||||
color: #838181;
|
||||
}
|
||||
|
||||
.navbar-inverse .navbar-nav > .active > a,
|
||||
.navbar-inverse .navbar-nav > .active > a:hover,
|
||||
.navbar-inverse .navbar-nav > .active > a:focus {
|
||||
background: none;
|
||||
border-top-color: #42d165;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-nav > li > a {
|
||||
padding: 24px 0 26px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.navbar-nav > li > a {
|
||||
margin: 0 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1220px) and (max-width: 1399px) {
|
||||
.navbar .container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1420px) {
|
||||
.navbar .container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav > li > a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
#footer {
|
||||
text-align: center
|
||||
}
|
||||
@ -195,3 +254,43 @@ table td {
|
||||
|
||||
/* hide table sorting indicators */
|
||||
table.data-table thead .sorting { background: url('') no-repeat center right; }
|
||||
|
||||
/* Make Success color match the Dashboard's green */
|
||||
.label-success,
|
||||
.progress-bar-success,
|
||||
.btn-success,
|
||||
.btn-success.disabled,
|
||||
.btn-success[disabled],
|
||||
fieldset[disabled] .btn-success,
|
||||
.btn-success.disabled:hover,
|
||||
.btn-success[disabled]:hover,
|
||||
fieldset[disabled] .btn-success:hover,
|
||||
.btn-success.disabled:focus,
|
||||
.btn-success[disabled]:focus,
|
||||
fieldset[disabled] .btn-success:focus,
|
||||
.btn-success.disabled.focus,
|
||||
.btn-success[disabled].focus,
|
||||
fieldset[disabled] .btn-success.focus,
|
||||
.btn-success.disabled:active,
|
||||
.btn-success[disabled]:active,
|
||||
fieldset[disabled] .btn-success:active,
|
||||
.btn-success.disabled.active,
|
||||
.btn-success[disabled].active,
|
||||
fieldset[disabled] .btn-success.active {
|
||||
background: #42d165;
|
||||
}
|
||||
|
||||
.btn-success .badge {
|
||||
color: #42d165;
|
||||
}
|
||||
|
||||
.btn-success:hover,
|
||||
.btn-success:focus,
|
||||
.btn-success.focus,
|
||||
.btn-success:active,
|
||||
.btn-success.active,
|
||||
.open > .dropdown-toggle.btn-success,
|
||||
.label-success[href]:hover,
|
||||
.label-success[href]:focus{
|
||||
background-color: #38b254;
|
||||
}
|
||||
@ -2366,6 +2366,9 @@ $LANG = array(
|
||||
'not_a_member_yet' => 'Not a member yet?',
|
||||
'login_create_an_account' => 'Create an Account!',
|
||||
'client_login' => 'Client Login',
|
||||
|
||||
// New Client Portal styling
|
||||
'invoice_from' => 'Invoices From:',
|
||||
);
|
||||
|
||||
return $LANG;
|
||||
|
||||
@ -12,58 +12,246 @@
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
div.row {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
#main-row {
|
||||
background: #fff;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
#main-row > div {
|
||||
padding: 25px;
|
||||
position: static;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
#contact-details {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
#main-row,
|
||||
#account-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#main-row {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
#main-row h3 {
|
||||
font-weight: 700;
|
||||
color: #424343;
|
||||
margin-top: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#main-row,
|
||||
#main-row a,
|
||||
#account-row,
|
||||
#account-row a {
|
||||
color: #838181;
|
||||
}
|
||||
|
||||
#main-row .amount-label {
|
||||
color: #868787;
|
||||
font-size: 21px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#main-row .amount {
|
||||
color: #222;
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
#main-row .amount-col {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
#main-row .amount {
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
#main-row > div {
|
||||
padding: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
#main-row .amount,
|
||||
#main-row .amount-label {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.amount-col .inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#main-row i {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background-color: #42d165;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
margin-left: -28px;
|
||||
text-align: center;
|
||||
padding: 13px;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#main-row i img {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#total-invoiced-col:before,
|
||||
#paidtodate-col:before,
|
||||
#balance-col:before {
|
||||
content: '';
|
||||
background: #dbd9d9;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
#total-invoiced-col:before {
|
||||
width: 67px;
|
||||
background: transparent;
|
||||
background: -webkit-linear-gradient(0deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: -moz-linear-gradient(0deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: -o-linear-gradient(0deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: -ms-linear-gradient(0deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: linear-gradient(90deg, #f8f8f8 0%, #ffffff 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
#main-row .amount-col {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#total-invoiced-col:before,
|
||||
#paidtodate-col:before,
|
||||
#balance-col:before {
|
||||
width: 100%;
|
||||
top: auto;
|
||||
height: 1px;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
#main-row i {
|
||||
left: -20px;
|
||||
top: 50%;
|
||||
margin-top: -28px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#total-invoiced-col:before {
|
||||
background: -webkit-linear-gradient(270deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: -moz-linear-gradient(270deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: -o-linear-gradient(270deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: -ms-linear-gradient(270deg, #f8f8f8 0%, #ffffff 100%);
|
||||
background: linear-gradient(180deg, #f8f8f8 0%, #ffffff 100%);
|
||||
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 815px) {
|
||||
#main-row i {
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
#main-row i {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.invoices-from {
|
||||
color: #424343;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
div.logo img {
|
||||
max-width:300px;
|
||||
max-height:200px;
|
||||
max-width: 100%;
|
||||
max-height: 75px;
|
||||
}
|
||||
|
||||
div.address-details {
|
||||
color: #666666;
|
||||
font-size: 15px;
|
||||
line-height: 1.8em;
|
||||
#account-row > div {
|
||||
padding: 20px 50px 20px 110px;
|
||||
}
|
||||
|
||||
div.col-md-4-left {
|
||||
padding-left: 15px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
div.col-md-4-center {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
div.col-md-4-right {
|
||||
padding-left: 6px;
|
||||
padding-right: 15px;
|
||||
#account-row .invoices-from {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
div.well {
|
||||
background-color: white;
|
||||
color: #0b4d78;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
#account-row .phone-web-details {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
div.well .fa {
|
||||
color: green;
|
||||
font-size: 18px;
|
||||
margin-bottom: 6px;
|
||||
#account-row .phone-web-details .inner {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.well .amount {
|
||||
margin-top: 10px;
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
color: black;
|
||||
#account-row > div:before {
|
||||
content: '';
|
||||
border-left: 1px solid #dbd9d9;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
margin-left: -80px;
|
||||
}
|
||||
|
||||
#account-row .logo {
|
||||
padding-left: 70px;
|
||||
}
|
||||
|
||||
#account-row .invoices-from:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
#account-row .logo,
|
||||
#account-row > div {
|
||||
padding-left: 40px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#account-row > div:before {
|
||||
margin-left: -25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
#account-row,
|
||||
#account-row .phone-web-details .inner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#account-row > div {
|
||||
padding: 15px 30px !important;
|
||||
}
|
||||
|
||||
#account-row > div:before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
table.dataTable thead > tr > th, table.invoice-table thead > tr > th {
|
||||
background-color: {{ $color }} !important;
|
||||
}
|
||||
@ -92,8 +280,98 @@
|
||||
|
||||
<div class="container main-container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 logo">
|
||||
|
||||
<div class="row" id="main-row">
|
||||
<div class="col-md-3" id="contact-details">
|
||||
<h3>{{$client->name}}</h3>
|
||||
@if ($contact->first_name || $contact->last_name)
|
||||
{{ $contact->first_name.' '.$contact->last_name }}<br>
|
||||
@endif
|
||||
@if ($client->address1)
|
||||
{{ $client->address1 }}<br/>
|
||||
@endif
|
||||
@if ($client->address2)
|
||||
{{ $client->address2 }}<br/>
|
||||
@endif
|
||||
@if ($client->getCityState())
|
||||
{{ $client->getCityState() }}<br/>
|
||||
@endif
|
||||
@if ($client->country)
|
||||
{{ $client->country->name }}<br/>
|
||||
@endif
|
||||
<br>
|
||||
@if ($contact->email)
|
||||
{!! HTML::mailto($contact->email, $contact->email) !!}<br>
|
||||
@endif
|
||||
@if ($client->website)
|
||||
{!! HTML::link($client->website, $client->website) !!}<br>
|
||||
@endif
|
||||
@if ($contact->phone)
|
||||
{{ $contact->phone }}<br>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-3 amount-col" id="total-invoiced-col">
|
||||
<div class="inner">
|
||||
<i><img src="{{asset('images/icon-total-invoiced.svg')}}"></i>
|
||||
<div class="amount-label">
|
||||
{{ trans('texts.total_invoiced') }}
|
||||
</div>
|
||||
<div class="amount">
|
||||
{{ Utils::formatMoney($client->paid_to_date + $client->balance, $client->currency_id ?: $account->currency_id) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 amount-col" id="paidtodate-col">
|
||||
<div class="inner">
|
||||
<i><img src="{{asset('images/icon-paidtodate.svg')}}"></i>
|
||||
<div class="amount-label">
|
||||
{{ trans('texts.paid_to_date') }}
|
||||
</div>
|
||||
<div class="amount">
|
||||
{{ Utils::formatMoney($client->paid_to_date, $client->currency_id ?: $account->currency_id) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 amount-col" id="balance-col">
|
||||
<div class="inner">
|
||||
<i><img src="{{asset('images/icon-balance.svg')}}"></i>
|
||||
<div class="amount-label">
|
||||
{{ trans('texts.open_balance') }}
|
||||
</div>
|
||||
<div class="amount">
|
||||
{{ Utils::formatMoney($client->balance, $client->currency_id ?: $account->currency_id) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!empty($account->getTokenGatewayId()))
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
@include('payments.paymentmethods_list')
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div style="min-height: 550px" class="hide">
|
||||
{!! Datatable::table()
|
||||
->addColumn(
|
||||
trans('texts.date'),
|
||||
trans('texts.message'),
|
||||
trans('texts.balance'),
|
||||
trans('texts.adjustment'))
|
||||
->setUrl(route('api.client.activity'))
|
||||
->setOptions('bFilter', false)
|
||||
->setOptions('aaSorting', [['0', 'desc']])
|
||||
->setOptions('sPaginationType', 'bootstrap')
|
||||
->render('datatable') !!}
|
||||
</div>
|
||||
|
||||
<div class="row" id="account-row">
|
||||
<div class="col-md-2 invoices-from">
|
||||
{{trans('texts.invoice_from')}}
|
||||
</div>
|
||||
<div class="col-md-4 logo">
|
||||
@if ($account->hasLogo())
|
||||
{!! HTML::image($account->getLogoURL()) !!}
|
||||
@else
|
||||
@ -114,74 +392,20 @@
|
||||
{{ $account->country->name }}
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-md-3 address-details">
|
||||
@if ($account->website)
|
||||
<i class="fa fa-globe" style="width: 20px"></i><a href="{{ Utils::addHttp($account->website) }}" target="_blank">{{ $account->website }}</a><br/>
|
||||
@endif
|
||||
@if ($account->work_phone)
|
||||
<i class="fa fa-phone" style="width: 20px"></i>{{ $account->work_phone }}<br/>
|
||||
@endif
|
||||
@if ($account->work_email)
|
||||
<i class="fa fa-envelope" style="width: 20px"></i>{!! HTML::mailto($account->work_email, $account->work_email) !!}<br/>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-md-4-left">
|
||||
<div class="well">
|
||||
<div class="fa fa-file-text-o"></div>
|
||||
<div>
|
||||
{{ trans('texts.total_invoiced') }}
|
||||
</div>
|
||||
<div class="amount">
|
||||
{{ Utils::formatMoney($client->paid_to_date + $client->balance, $client->currency_id ?: $account->currency_id) }}
|
||||
</div>
|
||||
<div class="col-md-3 phone-web-details">
|
||||
<div class="inner">
|
||||
@if ($account->work_phone)
|
||||
{{ $account->work_phone }}<br/>
|
||||
@endif
|
||||
@if ($account->website)
|
||||
<a href="{{ Utils::addHttp($account->website) }}" target="_blank">{{ $account->website }}</a>
|
||||
<br/>
|
||||
@endif
|
||||
@if ($account->work_email)
|
||||
{!! HTML::mailto($account->work_email, $account->work_email) !!}<br/>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-4-center">
|
||||
<div class="well">
|
||||
<div class="fa fa-credit-card"></div>
|
||||
<div>
|
||||
{{ trans('texts.paid_to_date') }}
|
||||
</div>
|
||||
<div class="amount">
|
||||
{{ Utils::formatMoney($client->paid_to_date, $client->currency_id ?: $account->currency_id) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-4-right">
|
||||
<div class="well">
|
||||
<div class="fa fa-server"></div>
|
||||
<div>
|
||||
{{ trans('texts.open_balance') }}
|
||||
</div>
|
||||
<div class="amount">
|
||||
{{ Utils::formatMoney($client->balance, $client->currency_id ?: $account->currency_id) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!empty($account->getTokenGatewayId()))
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
@include('payments.paymentmethods_list')
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div style="min-height: 550px">
|
||||
{!! Datatable::table()
|
||||
->addColumn(
|
||||
trans('texts.date'),
|
||||
trans('texts.message'),
|
||||
trans('texts.balance'),
|
||||
trans('texts.adjustment'))
|
||||
->setUrl(route('api.client.activity'))
|
||||
->setOptions('bFilter', false)
|
||||
->setOptions('aaSorting', [['0', 'desc']])
|
||||
->setOptions('sPaginationType', 'bootstrap')
|
||||
->render('datatable') !!}
|
||||
</div>
|
||||
|
||||
<p> </p>
|
||||
|
||||
@ -125,7 +125,7 @@ header h3 em {
|
||||
}
|
||||
|
||||
.secure h3 {
|
||||
color: #36b855;
|
||||
color: #42d165;
|
||||
font-size: 30px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 0px;
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<link href="{!! $clientFontUrl !!}" rel="stylesheet" type="text/css">
|
||||
@endif
|
||||
<link href="{{ asset('css/built.public.css') }}?no_cache={{ NINJA_VERSION }}" rel="stylesheet" type="text/css"/>
|
||||
<style type="text/css">{!! Utils::clientViewCSS() !!}</style>
|
||||
<style type="text/css">{!! isset($account)?$account->clientViewCSS():'' !!}</style>
|
||||
@stop
|
||||
|
||||
@section('body')
|
||||
@ -43,11 +43,16 @@
|
||||
}
|
||||
|
||||
$(function() {
|
||||
// check that the footer appears at the bottom of the screen
|
||||
var height = $(window).height() - ($('#header').height() + $('#footer').height());
|
||||
if ($('#mainContent').height() < height) {
|
||||
$('#mainContent').height(height);
|
||||
function positionFooter() {
|
||||
// check that the footer appears at the bottom of the screen
|
||||
var height = $(window).height() - ($('#header').height() + $('#footer').height());
|
||||
if ($('#mainContent').height() < height) {
|
||||
$('#mainContent').css('min-height', height);
|
||||
}
|
||||
}
|
||||
|
||||
positionFooter();
|
||||
$(window).resize(positionFooter);
|
||||
})
|
||||
|
||||
</script>
|
||||
@ -65,7 +70,8 @@
|
||||
</button>
|
||||
@if (!isset($account) || !$account->hasFeature(FEATURE_WHITE_LABEL))
|
||||
{{-- Per our license, please do not remove or modify this link. --}}
|
||||
<a class="navbar-brand" href="{{ URL::to(NINJA_WEB_URL) }}" target="_blank"><img src="{{ asset('images/invoiceninja-logo.png') }}" style="height:20px"></a>
|
||||
<a class="navbar-brand" href="{{ URL::to(NINJA_WEB_URL) }}" target="_blank"><img
|
||||
src="{{ asset('images/invoiceninja-logo.png') }}" style="height:27px"></a>
|
||||
@endif
|
||||
</div>
|
||||
<div id="navbar" class="collapse navbar-collapse">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user