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

Add sliding effect

Browse source
This commit is contained in:
Kload 2013-09-21 19:46:26 +02:00
parent e1c4ac3ae1
commit 7587991467
5 changed files with 81 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
css/style.css Normal file
View file

@ -0,0 +1,30 @@
#slider {
margin-left: auto;
margin-right: auto;
margin-top: 2%;
background: #e8e8e8;
width: 247px;
height: 370px;
position: relative;
overflow: hidden;
text-align: left;
}
#slider-container {
width: 494px;
height: 370px;
}
#main {
background: #e8e8e8;
float: left;
width: 247px;
height: 370px;
position: relative;
overflow: hidden;
}
.block {
display: inline-block;
height: 370px;
}

11
index.html
View file

@ -5,6 +5,7 @@
<meta http-equiv="cache-control" content="no-cache" />
<title>YunoHost admin</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body style="padding: 20px">
<h1><a class="logo" href="#/">YunoHost</a></h1>
@ -12,8 +13,14 @@
<div id="flash">
</div>
<br />
<div id="main">
<a href="#/login">Grset</a>
<div id="slider">
<div id="slider-container">
<div id="slideBack" class="block"></div>
<div id="main" class="block">
<a class="slide" href="#/login">Meh</a>
</div>
<div id="slideTo" class="block"></div>
</div>
</div>
<script type="text/javascript" src="js/vendor/jquery-1.10.1.min.js"></script>

42
js/app.js
View file

@ -10,7 +10,6 @@ app = Sammy('#main', function (sam) {
// Initialize storage
var store = new Sammy.Store({name: 'storage', type: 'session'});
/**
* Helpers
*
@ -64,7 +63,44 @@ app = Sammy('#main', function (sam) {
// Render view (cross-browser)
view: function (view, data) {
this.render('views/'+ view +'.ms', data).swap();
rendered = this.render('views/'+ view +'.ms', data);
function leSwap() {
$('#slideBack').hide().html('');
$('#slideTo').hide().html('');
rendered.swap(function() {
$('.slide').on('click', function() {
if ($(this).hasClass('back')) {
store.set('slide', 'back');
} else {
store.set('slide', 'to');
}
});
});
}
if (store.get('slide') == 'back') {
$('#slideBack').show().css('display', 'inline-block').css('margin-left', '-247px');
rendered.appendTo($('#slideBack'));
$('#main').animate({marginLeft: '247px'}, 500);
$('#slideBack').animate({marginLeft: '0'}, 500, function() {
$('#main').html($('#slideBack').html());
$('#main').css('margin-left', '0');
leSwap();
});
} else if (store.get('slide') == 'to') {
$('#slideTo').show().css('display', 'inline-block');
rendered.appendTo($('#slideTo'));
$('#main').animate({marginLeft: '-247px'}, 500, function() {
$('#main').html($('#slideTo').html());
$('#main').css('margin-left', '0');
leSwap();
});
} else {
leSwap();
}
//this.render('views/'+ view +'.ms', data).swap();
}
});
@ -94,6 +130,8 @@ app = Sammy('#main', function (sam) {
// Clear flash notifications
store.clear('flash');
// Clear sliding preference
store.clear('slide');
});

1
js/vendor/jquery-1.10.1.min.map vendored Normal file
View file

File diff suppressed because one or more lines are too long

2
views/login.ms
View file

@ -1,5 +1,5 @@
<form action="#/login" id="form" method="post">
<input type="text" name="url" placeholder="YunoHost API URL" /><br />
<input type="password" name="password" placeholder="Password" /><br />
<input id="submit" type="submit" value="Login" class="btn btn-primary"/>
<input id="submit" type="submit" value="Login" class="btn btn-primary slide"/>
</form>