YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Use CSS transitions

Browse source
This commit is contained in:
Kload 2013-09-25 02:33:39 +02:00
parent 50a4a604bd
commit 2b6daca854
3 changed files with 26 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
css/style.css
View file

@ -30,14 +30,12 @@ body h5 {
} }
#main { #main {
/*background: #e8e8e8;*/
float: left; float: left;
position: relative;
overflow: hidden; overflow: hidden;
} }
.block { .block {
display: inline-block; float:left;
height: 100%; height: 100%;
max-width: 750px; max-width: 750px;
width: 49%; width: 49%;
@ -45,6 +43,14 @@ body h5 {
padding: 5px; padding: 5px;
} }
.move {
-webkit-transition: margin-left 0.3s ease, margin-right 0.3s ease;
-moz-transition: margin-left 0.3s ease, margin-right 0.3s ease;
-o-transition: margin-left 0.3s ease, margin-right 0.3s ease;
-ms-transition: margin-left 0.3s ease, margin-right 0.3s ease;
transition: margin-left 0.3s ease, margin-right 0.3s ease;
}
body .form-control { body .form-control {
padding: 6px; padding: 6px;
} }

8
index.html
View file

@ -20,16 +20,16 @@
<div id="flash" class="alert" style="display: none"> <div id="flash" class="alert" style="display: none">
</div> </div>
<div id="slider-container"> <div id="slider-container">
<div id="slideBack" class="block"></div> <div id="slideBack" class="block" style="display: none;"></div>
<div id="main" class="block"> <div id="main" class="block">
<div class="text-center"><a class="slide" href="#/login"><img src="img/ajax-loader.gif"></a></div> <div class="text-center"><a class="slide" href="#/login"><img src="img/ajax-loader.gif"></a></div>
</div> </div>
<div id="slideTo" class="block"></div> <div id="slideTo" class="block" style="display: none; z-index: 100;"></div>
<div class="clearfix"></div>
</div> </div>
</div> </div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/vendor/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script>
<script type="text/javascript" src="js/vendor/mustache.js"></script> <script type="text/javascript" src="js/vendor/mustache.js"></script>
<script type="text/javascript" src="js/vendor/sammy.js"></script> <script type="text/javascript" src="js/vendor/sammy.js"></script>
<script type="text/javascript" src="js/vendor/sammy.mustache.js"></script> <script type="text/javascript" src="js/vendor/sammy.mustache.js"></script>

29
js/app.js
View file

@ -84,8 +84,6 @@ app = Sammy('#main', function (sam) {
rendered = this.render('views/'+ view +'.ms', data); rendered = this.render('views/'+ view +'.ms', data);
function leSwap() { function leSwap() {
$('#slideBack').hide().html('');
$('#slideTo').hide().html('');
rendered.swap(function() { rendered.swap(function() {
$('.slide').on('click', function() { $('.slide').on('click', function() {
$(this).addClass('active'); $(this).addClass('active');
@ -101,22 +99,20 @@ app = Sammy('#main', function (sam) {
blockSize = $('#slider').innerWidth(); blockSize = $('#slider').innerWidth();
if (store.get('slide') == 'back') { if (store.get('slide') == 'back') {
$('#slideBack').css('display', 'inline-block').css('margin-left', '-'+ 2*blockSize +'px'); if ($('#slideBack').is(':visible')) $('#slideBack').hide();
rendered.appendTo($('#slideBack')); $('#slider-container').removeClass('move').css('margin-left', '-'+ blockSize +'px');
$('#main').animate({marginLeft: blockSize +'px'}, 300, function() { $('#slideTo').show().html($('#main').html());
$('#main').html($('#slideBack').html()); leSwap();
$('#main').css('margin-left', '0'); $('#slider-container').addClass('move').css('margin-left', '0px');
leSwap();
});
store.clear('slide'); store.clear('slide');
} else if (store.get('slide') == 'to') { } else if (store.get('slide') == 'to') {
$('#slideTo').css('display', 'inline-block'); if ($('#slideTo').is(':visible')) $('#slideTo').hide();
rendered.appendTo($('#slideTo')); $('#slider-container').removeClass('move').css('margin-left', '0px');
$('#main').animate({marginLeft: '-'+ blockSize +'px'}, 300, function() { $('#slideBack').show().html($('#main').html());
$('#main').html($('#slideTo').html()); leSwap();
$('#main').css('margin-left', '0'); $('#slider-container').addClass('move').css('margin-left', '-'+ blockSize +'px');
leSwap();
});
store.clear('slide'); store.clear('slide');
} else { } else {
leSwap(); leSwap();
@ -341,6 +337,7 @@ $(document).ready(function () {
app.run('#/'); app.run('#/');
$('#slider-container').width(2*$('#slider').innerWidth() +'px'); $('#slider-container').width(2*$('#slider').innerWidth() +'px');
$(window).resize(function() { $(window).resize(function() {
$('#slideBack').css('margin-left', '-'+ $('#slider').innerWidth() +'px');
$('#slider-container').width(2*$('#slider').innerWidth() +'px'); $('#slider-container').width(2*$('#slider').innerWidth() +'px');
}); });
}); });