mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2024-11-08 12:12:48 +01:00
Lazy load images
This commit is contained in:
Hillel Coren
parent
0e3b78097c
commit
689efc3e3e
@ -107,7 +107,6 @@ module.exports = function(grunt) {
|
||||
//'public/vendor/pdfmake/build/pdfmake.min.js',
|
||||
//'public/vendor/pdfmake/build/vfs_fonts.js',
|
||||
//'public/js/vfs_fonts.js',
|
||||
'public/js/lightbox.min.js',
|
||||
'public/js/bootstrap-combobox.js',
|
||||
'public/js/script.js',
|
||||
'public/js/pdf.pdfmake.js',
|
||||
@ -140,7 +139,6 @@ module.exports = function(grunt) {
|
||||
'public/vendor/spectrum/spectrum.css',
|
||||
'public/css/bootstrap-combobox.css',
|
||||
'public/css/typeahead.js-bootstrap.css',
|
||||
'public/css/lightbox.css',
|
||||
//'public/vendor/handsontable/dist/jquery.handsontable.full.css',
|
||||
'public/css/style.css',
|
||||
],
|
||||
|
||||
@ -528,6 +528,8 @@ if (!defined('CONTACT_EMAIL')) {
|
||||
define('EMAIL_MARKUP_URL', 'https://developers.google.com/gmail/markup');
|
||||
define('OFX_HOME_URL', 'http://www.ofxhome.com/index.php/home/directory/all');
|
||||
|
||||
define('BLANK_IMAGE', 'data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=');
|
||||
|
||||
define('COUNT_FREE_DESIGNS', 4);
|
||||
define('COUNT_FREE_DESIGNS_SELF_HOST', 5); // include the custom design
|
||||
define('PRODUCT_ONE_CLICK_INSTALL', 1);
|
||||
|
||||
File diff suppressed because one or more lines are too long
211
public/css/built.css
vendored
211
public/css/built.css
vendored
@ -2138,217 +2138,6 @@ See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||
border-radius: 6px;
|
||||
line-height: 1.33;
|
||||
}
|
||||
/* Preload images */
|
||||
body:after {
|
||||
content: url(../images/lightbox/close.png) url(../images/lightbox/loading.gif) url(../images/lightbox/prev.png) url(../images/lightbox/next.png);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightboxOverlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background-color: black;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
opacity: 0.8;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10000;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.lightbox .lb-image {
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: inherit;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.lightbox a img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.lb-outerContainer {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
*zoom: 1;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-outerContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-container {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.lb-loader {
|
||||
position: absolute;
|
||||
top: 43%;
|
||||
left: 0;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.lb-cancel {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
background: url(../images/lightbox/loading.gif) no-repeat;
|
||||
}
|
||||
|
||||
.lb-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.lb-container > .nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.lb-nav a {
|
||||
outline: none;
|
||||
background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
|
||||
}
|
||||
|
||||
.lb-prev, .lb-next {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev {
|
||||
width: 34%;
|
||||
left: 0;
|
||||
float: left;
|
||||
background: url(../images/lightbox/prev.png) left 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-prev:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next {
|
||||
width: 64%;
|
||||
right: 0;
|
||||
float: right;
|
||||
background: url(../images/lightbox/next.png) right 48% no-repeat;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.6s;
|
||||
-moz-transition: opacity 0.6s;
|
||||
-o-transition: opacity 0.6s;
|
||||
transition: opacity 0.6s;
|
||||
}
|
||||
|
||||
.lb-nav a.lb-next:hover {
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.lb-dataContainer {
|
||||
margin: 0 auto;
|
||||
padding-top: 5px;
|
||||
*zoom: 1;
|
||||
width: 100%;
|
||||
-moz-border-radius-bottomleft: 4px;
|
||||
-webkit-border-bottom-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
-moz-border-radius-bottomright: 4px;
|
||||
-webkit-border-bottom-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.lb-dataContainer:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lb-data {
|
||||
padding: 0 4px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.lb-data .lb-details {
|
||||
width: 85%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-caption {
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.lb-data .lb-number {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1em;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.lb-data .lb-close {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(../images/lightbox/close.png) top right no-repeat;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
|
||||
opacity: 0.7;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
-moz-transition: opacity 0.2s;
|
||||
-o-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.lb-data .lb-close:hover {
|
||||
cursor: pointer;
|
||||
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
body { background: #f8f8f8 !important;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-size: 15px;
|
||||
|
||||
@ -1025,3 +1025,11 @@ function actionListHandler() {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loadImages(selector) {
|
||||
$(selector + ' img').each(function(index, item) {
|
||||
var src = $(item).attr('data-src');
|
||||
$(item).attr('src', src);
|
||||
$(item).attr('data-src', src);
|
||||
});
|
||||
}
|
||||
|
||||
@ -7,7 +7,9 @@
|
||||
@foreach ($account->getFontFolders() as $font)
|
||||
<script src="{{ asset('js/vfs_fonts/'.$font.'.js') }}" type="text/javascript"></script>
|
||||
@endforeach
|
||||
<script src="{{ asset('pdf.built.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('pdf.built.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('js/lightbox.min.js') }}" type="text/javascript"></script>
|
||||
<link href="{{ asset('css/lightbox.css') }}" rel="stylesheet" type="text/css"/>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@ -736,7 +736,7 @@
|
||||
@if (Auth::user()->account->isWhiteLabel())
|
||||
{{ trans('texts.white_labeled') }}
|
||||
@else
|
||||
<a href="#" onclick="$('#whiteLabelModal').modal('show');">{{ trans('texts.white_label_link') }}</a>
|
||||
<a href="#" onclick="loadImages('#whiteLabelModal');$('#whiteLabelModal').modal('show');">{{ trans('texts.white_label_link') }}</a>
|
||||
|
||||
<div class="modal fade" id="whiteLabelModal" tabindex="-1" role="dialog" aria-labelledby="whiteLabelModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
@ -751,11 +751,11 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>{{ trans('texts.before') }}</h4>
|
||||
{!! HTML::image('images/pro_plan/white_label_before.png', 'before', ['width' => '100%']) !!}
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="http://ninja.dev/images/pro_plan/white_label_before.png" width="100%" alt="before">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h4>{{ trans('texts.after') }}</h4>
|
||||
{!! HTML::image('images/pro_plan/white_label_after.png', 'after', ['width' => '100%']) !!}
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="http://ninja.dev/images/pro_plan/white_label_after.png" width="100%" alt="after">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,17 +4,19 @@
|
||||
@parent
|
||||
|
||||
@include('money_script')
|
||||
|
||||
@foreach ($account->getFontFolders() as $font)
|
||||
<script src="{{ asset('js/vfs_fonts/'.$font.'.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('js/vfs_fonts/'.$font.'.js') }}" type="text/javascript"></script>
|
||||
@endforeach
|
||||
<script src="{{ asset('pdf.built.js') }}" type="text/javascript"></script>
|
||||
<script src="{{ asset('js/lightbox.min.js') }}" type="text/javascript"></script>
|
||||
<link href="{{ asset('css/lightbox.css') }}" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
/* the value is auto set so we're removing the bold formatting */
|
||||
label.control-label[for=invoice_number] {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
/* the value is auto set so we're removing the bold formatting */
|
||||
label.control-label[for=invoice_number] {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
</style>
|
||||
@stop
|
||||
|
||||
|
||||
@ -22,13 +22,25 @@
|
||||
|
||||
<center id="designThumbs">
|
||||
<p> </p>
|
||||
<a href="{{ asset('/images/designs/business.png') }}" data-lightbox="more-designs" data-title="Business"><img src="{{ asset('/images/designs/business_thumb.png') }}"/></a>
|
||||
<a href="{{ asset('/images/designs/creative.png') }}" data-lightbox="more-designs" data-title="Creative"><img src="{{ asset('/images/designs/creative_thumb.png') }}"/></a>
|
||||
<a href="{{ asset('/images/designs/elegant.png') }}" data-lightbox="more-designs" data-title="Elegant"><img src="{{ asset('/images/designs/elegant_thumb.png') }}"/></a>
|
||||
<a href="{{ asset('/images/designs/business.png') }}" data-lightbox="more-designs" data-title="Business">
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="{{ asset('/images/designs/business_thumb.png') }}"/>
|
||||
</a>
|
||||
<a href="{{ asset('/images/designs/creative.png') }}" data-lightbox="more-designs" data-title="Creative">
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="{{ asset('/images/designs/creative_thumb.png') }}"/>
|
||||
</a>
|
||||
<a href="{{ asset('/images/designs/elegant.png') }}" data-lightbox="more-designs" data-title="Elegant">
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="{{ asset('/images/designs/elegant_thumb.png') }}"/>
|
||||
</a>
|
||||
<p> </p>
|
||||
<a href="{{ asset('/images/designs/hipster.png') }}" data-lightbox="more-designs" data-title="Hipster"><img src="{{ asset('/images/designs/hipster_thumb.png') }}"/></a>
|
||||
<a href="{{ asset('/images/designs/playful.png') }}" data-lightbox="more-designs" data-title="Playful"><img src="{{ asset('/images/designs/playful_thumb.png') }}"/></a>
|
||||
<a href="{{ asset('/images/designs/photo.png') }}" data-lightbox="more-designs" data-title="Photo"><img src="{{ asset('/images/designs/photo_thumb.png') }}"/></a>
|
||||
<a href="{{ asset('/images/designs/hipster.png') }}" data-lightbox="more-designs" data-title="Hipster">
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="{{ asset('/images/designs/hipster_thumb.png') }}"/>
|
||||
</a>
|
||||
<a href="{{ asset('/images/designs/playful.png') }}" data-lightbox="more-designs" data-title="Playful">
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="{{ asset('/images/designs/playful_thumb.png') }}"/>
|
||||
</a>
|
||||
<a href="{{ asset('/images/designs/photo.png') }}" data-lightbox="more-designs" data-title="Photo">
|
||||
<img src="{{ BLANK_IMAGE }}" data-src="{{ asset('/images/designs/photo_thumb.png') }}"/>
|
||||
</a>
|
||||
<p> </p>
|
||||
</center>
|
||||
|
||||
@ -133,6 +145,7 @@
|
||||
}
|
||||
|
||||
function showMoreDesigns() {
|
||||
loadImages('#designThumbs');
|
||||
trackEvent('/account', '/view_more_designs');
|
||||
$('#moreDesignsModal').modal('show');
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user