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 { #slider {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 2%; /*margin-top: 2%;*/
padding: 15px;
background: #e8e8e8; background: #e8e8e8;
width: 247px; width: 500px;
height: 370px; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
text-align: left; text-align: left;
} }
#slider-container { #slider-container {
width: 494px; width: 1000px;
height: 370px; height: 100%;
} }
#main { #main {
background: #e8e8e8; background: #e8e8e8;
float: left; float: left;
width: 247px; width: 500px;
height: 370px; height: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.block { .block {
display: inline-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/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen"> <link href="css/style.css" rel="stylesheet" media="screen">
</head> </head>
<body style="padding: 20px"> <body>
<h1><a class="logo" href="#/">YunoHost</a></h1>
<br />
<div id="flash">
</div>
<br />
<div id="slider"> <div id="slider">
<h1><a class="logo" href="#/">YunoHost</a></h1>
<br />
<div id="flash">
</div>
<br />
<div id="slider-container"> <div id="slider-container">
<div id="slideBack" class="block"></div> <div id="slideBack" class="block"></div>
<div id="main" class="block"> <div id="main" class="block">

View file

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

View file

@ -1,5 +1,6 @@
<form action="#/login" id="form" method="post"> <form action="#/login" id="form" method="post">
<input type="text" name="url" placeholder="YunoHost API URL" /><br /> <input type="text" name="url" placeholder="YunoHost API URL" /><br />
<input type="password" name="password" placeholder="Password" /><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> </form>