Mobile friendly :)

This commit is contained in:
Kload 2013-09-24 19:02:12 +02:00
parent 03483498a8
commit ddeec8f26e
9 changed files with 60 additions and 48 deletions

View file

@ -1,5 +1,6 @@
html, body {
height: 100%;
width: 100%;
font-family: 'Source Sans Pro';
}
@ -17,7 +18,8 @@ body h5 {
/*margin-top: 2%;*/
padding: 5px;
/*background: #e8e8e8;*/
width: 500px;
max-width: 750px;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
@ -25,7 +27,8 @@ body h5 {
}
#slider-container {
width: 1000px;
max-width: 1500px;
width: 1500px;
height: 100%;
}
@ -39,7 +42,8 @@ body h5 {
.block {
display: inline-block;
height: 100%;
width: 500px;
max-width: 750px;
width: 49%;
height: 100%;
padding: 5px;
}
@ -53,11 +57,12 @@ body .form-control {
max-width: 240px;
font-size: 25px;
/*font-weight: bold;*/
margin: -41px auto 0 auto;
margin: -35px auto 0 auto;
}
body .page-header {
margin-top: 5px;
margin-top: 0px;
padding: 0 10px;
}
div.br {

View file

@ -3,6 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, user-scalable=false;">
<title>YunoHost admin</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
@ -12,13 +13,12 @@
<div id="slider">
<div class="page-header">
<h1 class="pull-left">YunoHost <small>Administration</small></h1>
<a id="logout-button" href="#/logout" class="pull-right" style="padding-top: 29px; padding-right: 5px; font-size: 24px;"><span class="glyphicon glyphicon-log-out"></span></a>
<a id="logout-button" href="#/logout" class="hidden-xs pull-right" style="padding-top: 29px; padding-right: 5px; font-size: 24px;"><span class="glyphicon glyphicon-log-out"></span></a>
<div class="clearfix"></div>
</div>
<br />
<div id="flash" class="alert" style="display: none">
</div>
<br />
<div id="slider-container">
<div id="slideBack" class="block"></div>
<div id="main" class="block">

View file

@ -306,4 +306,8 @@ app = Sammy('#main', function (sam) {
*/
$(document).ready(function () {
app.run('#/');
$('#slider-container').width(2*$('#slider').innerWidth() +'px');
$(window).resize(function() {
$('#slider-container').width(2*$('#slider').innerWidth() +'px');
});
});

View file

@ -1,5 +1,5 @@
<div class="pull-left">
<a class="btn btn-lg btn-default slide back" href="#/domains"><span class="glyphicon glyphicon-chevron-left"></span> Domain list</a>
<a href="#/domains" class="btn btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Domain list</a>
</div>
<div class="clearfix"></div>
<div class="view-title">Add domain</div>
@ -22,8 +22,8 @@
<small>... and I have <a href="http://doc.yunohost.org">set my DNS correctly</a>.</small>
<hr>
<div class="form-group">
<label for="domain" class="col-sm-4 control-label">Domain name</label>
<div class="col-sm-8">
<label for="domain" class="col-sm-3 control-label">Domain name</label>
<div class="col-sm-9">
<input type="text" name="domain" class="form-control" placeholder="myserver.org">
</div>
</div>
@ -43,11 +43,11 @@
<small>... and I want a dynamic DNS service.</small>
<hr>
<div class="form-group">
<label for="ddomain" class="col-sm-4 control-label">Domain name</label>
<div class="col-sm-3" style="padding-right: 3px">
<label for="ddomain" class="col-sm-3 control-label">Domain name</label>
<div class="col-sm-4">
<input type="text" name="ddomain" class="form-control" placeholder="myserver">
</div>
<div class="col-sm-5" style="padding-left: 0">
<div class="col-sm-5">
<select class="form-control" name="ddomain-ext">
{{#DDomains}}
<option>{{.}}</option>
@ -63,7 +63,7 @@
<div class="br"></div>
<div class="text-center">
<input type="submit" class="btn btn-lg btn-success slide back" value="Save">
<input type="submit" class="btn btn-success slide back" value="Save">
</div>
</form>

View file

@ -1,8 +1,8 @@
<div class="pull-left">
<a href="#/" class="btn btn-lg btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Menu</a>
<a href="#/" class="btn btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Menu</a>
</div>
<div class="pull-right">
<a href="#/domains/add" class="btn btn-lg btn-success slide"><span class="glyphicon glyphicon-plus"></span> Add domain</a>
<a href="#/domains/add" class="btn btn-success slide"><span class="glyphicon glyphicon-plus"></span> Add domain</a>
</div>
<div class="clearfix"></div>
<div class="view-title">Domains</div>

View file

@ -1,5 +1,5 @@
<div class="pull-left">
<a class="btn btn-lg btn-default slide back" href="#/users"><span class="glyphicon glyphicon-chevron-left"></span> User list</a>
<a href="#/users" class="btn btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> User list</a>
</div>
<div class="clearfix"></div>
<div class="view-title">New user</div>
@ -11,27 +11,27 @@
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="username" class="col-sm-4 control-label">Username</label>
<div class="col-sm-8">
<label for="username" class="col-sm-3 control-label">Username</label>
<div class="col-sm-9">
<input type="text" name="username" class="form-control" placeholder="johndoe" required>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-4 control-label">Fullname</label>
<label for="firstname" class="col-sm-3 control-label">Fullname</label>
<div class="col-sm-4">
<input type="text" name="firstname" class="form-control" placeholder="John" required>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<input type="text" name="lastname" class="form-control" placeholder="Doe" required>
</div>
</div>
<hr>
<div class="form-group">
<label for="mail" class="col-sm-4 control-label">Mail</label>
<div class="col-sm-3" style="padding-right: 3px">
<label for="mail" class="col-sm-3 control-label">Mail</label>
<div class="col-sm-4">
<input type="text" name="email" class="form-control" placeholder="johndoe" required>
</div>
<div class="col-sm-5" style="padding-left: 0">
<div class="col-sm-5">
<select class="form-control" name="domain">
{{#Domains}}
<option>@{{.}}</option>
@ -41,14 +41,14 @@
</div>
<hr>
<div class="form-group">
<label for="password" class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<label for="password" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="password" name="password" class="form-control" placeholder="•••••" required>
</div>
</div>
<div class="form-group">
<label for="confirmation" class="col-sm-4 control-label">Confirmation</label>
<div class="col-sm-8">
<label for="confirmation" class="col-sm-3 control-label">Confirmation</label>
<div class="col-sm-9">
<input type="password" name="confirmation" class="form-control" placeholder="•••••" required>
</div>
</div>
@ -56,7 +56,7 @@
</div>
<div class="text-center">
<input type="submit" class="btn btn-lg btn-success slide back" value="Save">
<input type="submit" class="btn btn-success slide back" value="Save">
</div>
</form>

View file

@ -1,5 +1,5 @@
<div class="pull-left">
<a class="btn btn-lg btn-default slide back" href="#/users/{{Username}}"><span class="glyphicon glyphicon-chevron-left"></span> Info</a>
<a href="#/users/{{Username}}" class="btn btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Info</a>
</div>
<div class="clearfix"></div>
<div class="view-title">Edit {{Username}}</div>
@ -11,23 +11,23 @@
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<label for="username" class="col-sm-4 control-label">Username</label>
<div class="col-sm-8">
<label for="username" class="col-sm-3 control-label">Username</label>
<div class="col-sm-9">
<input type="text" name="username" class="form-control" placeholder="{{Username}}" disabled>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-4 control-label">Fullname</label>
<label for="firstname" class="col-sm-3 control-label">Fullname</label>
<div class="col-sm-4">
<input type="text" name="firstname" class="form-control" placeholder="{{Firstname}}">
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<input type="text" name="lastname" class="form-control" placeholder="{{Lastname}}">
</div>
</div>
<div class="form-group">
<label for="mail" class="col-sm-4 control-label">Mail</label>
<div class="col-sm-8">
<label for="mail" class="col-sm-3 control-label">Mail</label>
<div class="col-sm-9">
<input type="email" name="mail" class="form-control" placeholder="{{Mail}}">
</div>
</div>
@ -35,7 +35,7 @@
</div>
<div class="text-center">
<input type="submit" class="btn btn-lg btn-success slide back" value="Save">
<input type="submit" class="btn btn-success slide back" value="Save">
</div>
</form>

View file

@ -1,8 +1,8 @@
<div class="pull-left">
<a class="btn btn-lg btn-default slide back" href="#/users"><span class="glyphicon glyphicon-chevron-left"></span> User list</a>
<a href="#/users" class="btn btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> User list</a>
</div>
<div class="pull-right">
<a href="#/users/{{Username}}/edit" class="btn btn-lg btn-info slide"><span class="glyphicon glyphicon-edit"></span> Edit</a>
<a href="#/users/{{Username}}/edit" class="btn btn-info slide"><span class="glyphicon glyphicon-edit"></span> Edit</a>
</div>
<div class="clearfix"></div>
<div class="view-title">{{Username}}</div>
@ -12,24 +12,27 @@
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 text-right"><strong>Username</strong></div>
<div class="col-sm-8"> {{Username}}</div>
<div class="col-sm-3 text-right hidden-xs"><strong>Username</strong></div>
<div class="col-sm-3 visible-xs"><strong>Username</strong></div>
<div class="col-sm-9"> {{Username}}</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 text-right"><strong>Fullname</strong></div>
<div class="col-sm-8"> {{Fullname}}</div>
<div class="col-sm-3 text-right hidden-xs"><strong>Fullname</strong></div>
<div class="col-sm-3 visible-xs"><strong>Fullname</strong></div>
<div class="col-sm-9"> {{Fullname}}</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-sm-4 text-right"><strong>Mail</strong></div>
<div class="col-sm-8"> {{Mail}}</div>
<div class="col-sm-3 text-right hidden-xs"><strong>Mail</strong></div>
<div class="col-sm-3 visible-xs"><strong>Mail</strong></div>
<div class="col-sm-9"> {{Mail}}</div>
</div>
</li>
</ul>
<div class="text-center">
<a href="#/users/{{Username}}/delete" class="btn btn-lg btn-danger slide back"><span class="glyphicon glyphicon-trash"></span> Delete</a>
<a href="#/users/{{Username}}/delete" class="btn btn-danger slide back"><span class="glyphicon glyphicon-trash"></span> Delete</a>
</div>

View file

@ -1,8 +1,8 @@
<div class="pull-left">
<a href="#/" class="btn btn-lg btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Menu</a>
<a href="#/" class="btn btn-default slide back"><span class="glyphicon glyphicon-chevron-left"></span> Menu</a>
</div>
<div class="pull-right">
<a href="#/users/create" class="btn btn-lg btn-success slide"><span class="glyphicon glyphicon-plus"></span> New user</a>
<a href="#/users/create" class="btn btn-success slide"><span class="glyphicon glyphicon-plus"></span> New user</a>
</div>
<div class="clearfix"></div>
<div class="view-title">Users</div>