CSS improvments

This commit is contained in:
Kload 2013-09-21 20:59:47 +02:00
parent 7587991467
commit 2452cc0d06
4 changed files with 26 additions and 18 deletions

View file

@ -1,30 +1,35 @@
html, body {
height: 100%;
}
#slider {
margin-left: auto;
margin-right: auto;
margin-top: 2%;
/*margin-top: 2%;*/
padding: 15px;
background: #e8e8e8;
width: 247px;
height: 370px;
width: 500px;
height: 100%;
position: relative;
overflow: hidden;
text-align: left;
}
#slider-container {
width: 494px;
height: 370px;
width: 1000px;
height: 100%;
}
#main {
background: #e8e8e8;
float: left;
width: 247px;
height: 370px;
width: 500px;
height: 100%;
position: relative;
overflow: hidden;
}
.block {
display: inline-block;
height: 370px;
height: 100%;
}

View file

@ -7,13 +7,13 @@
<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>
<br />
<div id="flash">
</div>
<br />
<body>
<div id="slider">
<h1><a class="logo" href="#/">YunoHost</a></h1>
<br />
<div id="flash">
</div>
<br />
<div id="slider-container">
<div id="slideBack" class="block"></div>
<div id="main" class="block">

View file

@ -79,10 +79,12 @@ app = Sammy('#main', function (sam) {
});
}
blockSize = $('#slider').width();
if (store.get('slide') == 'back') {
$('#slideBack').show().css('display', 'inline-block').css('margin-left', '-247px');
$('#slideBack').show().css('display', 'inline-block').css('margin-left', '-'+ blockSize +'px');
rendered.appendTo($('#slideBack'));
$('#main').animate({marginLeft: '247px'}, 500);
$('#main').animate({marginLeft: blockSize +'px'}, 500);
$('#slideBack').animate({marginLeft: '0'}, 500, function() {
$('#main').html($('#slideBack').html());
$('#main').css('margin-left', '0');
@ -91,7 +93,7 @@ app = Sammy('#main', function (sam) {
} else if (store.get('slide') == 'to') {
$('#slideTo').show().css('display', 'inline-block');
rendered.appendTo($('#slideTo'));
$('#main').animate({marginLeft: '-247px'}, 500, function() {
$('#main').animate({marginLeft: '-'+ blockSize +'px'}, 500, function() {
$('#main').html($('#slideTo').html());
$('#main').css('margin-left', '0');
leSwap();

View file

@ -1,5 +1,6 @@
<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 slide"/>
<input id="submit" type="submit" value="Login" class="btn btn-primary"/>
</form>