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 {
/*background: #e8e8e8;*/
float: left;
position: relative;
overflow: hidden;
}
.block {
display: inline-block;
float:left;
height: 100%;
max-width: 750px;
width: 49%;
@ -45,6 +43,14 @@ body h5 {
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 {
padding: 6px;
}

8
index.html
View file

@ -20,16 +20,16 @@
<div id="flash" class="alert" style="display: none">
</div>
<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 class="text-center"><a class="slide" href="#/login"><img src="img/ajax-loader.gif"></a></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>
<script src="http://code.jquery.com/jquery-1.10.2.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/jquery-1.10.1.min.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.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);
function leSwap() {
$('#slideBack').hide().html('');
$('#slideTo').hide().html('');
rendered.swap(function() {
$('.slide').on('click', function() {
$(this).addClass('active');
@ -101,22 +99,20 @@ app = Sammy('#main', function (sam) {
blockSize = $('#slider').innerWidth();
if (store.get('slide') == 'back') {
$('#slideBack').css('display', 'inline-block').css('margin-left', '-'+ 2*blockSize +'px');
rendered.appendTo($('#slideBack'));
$('#main').animate({marginLeft: blockSize +'px'}, 300, function() {
$('#main').html($('#slideBack').html());
$('#main').css('margin-left', '0');
leSwap();
});
if ($('#slideBack').is(':visible')) $('#slideBack').hide();
$('#slider-container').removeClass('move').css('margin-left', '-'+ blockSize +'px');
$('#slideTo').show().html($('#main').html());
leSwap();
$('#slider-container').addClass('move').css('margin-left', '0px');
store.clear('slide');
} else if (store.get('slide') == 'to') {
$('#slideTo').css('display', 'inline-block');
rendered.appendTo($('#slideTo'));
$('#main').animate({marginLeft: '-'+ blockSize +'px'}, 300, function() {
$('#main').html($('#slideTo').html());
$('#main').css('margin-left', '0');
leSwap();
});
if ($('#slideTo').is(':visible')) $('#slideTo').hide();
$('#slider-container').removeClass('move').css('margin-left', '0px');
$('#slideBack').show().html($('#main').html());
leSwap();
$('#slider-container').addClass('move').css('margin-left', '-'+ blockSize +'px');
store.clear('slide');
} else {
leSwap();
@ -341,6 +337,7 @@ $(document).ready(function () {
app.run('#/');
$('#slider-container').width(2*$('#slider').innerWidth() +'px');
$(window).resize(function() {
$('#slideBack').css('margin-left', '-'+ $('#slider').innerWidth() +'px');
$('#slider-container').width(2*$('#slider').innerWidth() +'px');
});
});