Modified admin interfaces, factored common css out
This commit is contained in:
Tom Bloor
parent
208e45082f
commit
36e8cfe1d0
6 changed files with 106 additions and 128 deletions
|
|
@ -15,6 +15,16 @@ sub under {
|
||||||
|
|
||||||
sub home {
|
sub home {
|
||||||
my $c = shift;
|
my $c = shift;
|
||||||
|
|
||||||
|
my $user_rs = $c->schema->resultset('User');
|
||||||
|
my $token_rs = $c->schema->resultset('AccountToken');
|
||||||
|
$c->stash(
|
||||||
|
user_count => $user_rs->count,
|
||||||
|
tokens => {
|
||||||
|
total => $token_rs->count,
|
||||||
|
unused => $token_rs->search({used => 0 })->count,
|
||||||
|
},
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
1;
|
1;
|
||||||
|
|
|
||||||
10
public/static/admin/css/main.css
Normal file
10
public/static/admin/css/main.css
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
body {
|
||||||
|
background: whitesmoke;
|
||||||
|
padding-top: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
||||||
|
-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
||||||
|
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
@ -1,25 +1,26 @@
|
||||||
% layout 'admin';
|
% layout 'admin';
|
||||||
% title 'Home';
|
% title 'Home';
|
||||||
% content_for css => begin
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: whitesmoke;
|
|
||||||
padding-top: 54px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background: white;
|
|
||||||
padding: 16px;
|
|
||||||
-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
margin-top: 20%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
% end
|
|
||||||
% content_for javascript => begin
|
% content_for javascript => begin
|
||||||
% end
|
% end
|
||||||
<div>Admin Pages</div>
|
<div class="card-deck">
|
||||||
|
<div class="card text-center">
|
||||||
|
<div class="card-header card-inverse card-primary">
|
||||||
|
User Count
|
||||||
|
</div>
|
||||||
|
<div class="card-block">
|
||||||
|
<h2 class="card-title">
|
||||||
|
%= $user_count
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card text-center">
|
||||||
|
<div class="card-header card-inverse card-success">
|
||||||
|
Unused Tokens
|
||||||
|
</div>
|
||||||
|
<div class="card-block">
|
||||||
|
<h2 class="card-title">
|
||||||
|
<%= $tokens->{unused} %> / <%= $tokens->{total} %>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,57 +1,35 @@
|
||||||
% layout 'admin';
|
% layout 'admin';
|
||||||
% title 'Tokens';
|
% title 'Tokens';
|
||||||
% content_for css => begin
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: whitesmoke;
|
|
||||||
padding-top: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background: white;
|
|
||||||
padding: 16px;
|
|
||||||
-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
margin-top: 20%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
% end
|
|
||||||
% content_for javascript => begin
|
% content_for javascript => begin
|
||||||
% end
|
% end
|
||||||
<div class="container">
|
% if ( my $error = flash 'error' ) {
|
||||||
% if ( my $error = flash 'error' ) {
|
<div class="alert alert-danger" role="alert">
|
||||||
<div class="alert alert-danger" role="alert">
|
<strong>Error!</strong> <%= $error %>
|
||||||
<strong>Error!</strong> <%= $error %>
|
|
||||||
</div>
|
|
||||||
% } elsif ( my $success = flash 'success' ) {
|
|
||||||
<div class="alert alert-success" role="alert">
|
|
||||||
<strong>Success!</strong> <%= $success %>
|
|
||||||
</div>
|
|
||||||
% }
|
|
||||||
<form action="<%= url_for %>" method="post">
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="input-group">
|
|
||||||
<input type="text" class="form-control" placeholder="Token Text" name="token-name">
|
|
||||||
<span class="input-group-btn">
|
|
||||||
<button class="btn btn-primary" type="submit">Add</button>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="list-group">
|
|
||||||
% for my $token (@$tokens) {
|
|
||||||
<a href="<%= url_for . '/' . $token->{accounttokenid} %>" class="list-group-item list-group-item-action">
|
|
||||||
<div>
|
|
||||||
%= $token->{accounttokenname}
|
|
||||||
</div>
|
|
||||||
<div class="ml-auto">
|
|
||||||
<%= $token->{used} == 1 ? 'Used' : 'Available' %>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
% }
|
|
||||||
</div>
|
</div>
|
||||||
|
% } elsif ( my $success = flash 'success' ) {
|
||||||
|
<div class="alert alert-success" role="alert">
|
||||||
|
<strong>Success!</strong> <%= $success %>
|
||||||
|
</div>
|
||||||
|
% }
|
||||||
|
<form action="<%= url_for %>" method="post">
|
||||||
|
<div class="form-group">
|
||||||
|
<div class="input-group">
|
||||||
|
<input type="text" class="form-control" placeholder="Token Text" name="token-name">
|
||||||
|
<span class="input-group-btn">
|
||||||
|
<button class="btn btn-primary" type="submit">Add</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="list-group">
|
||||||
|
% for my $token (@$tokens) {
|
||||||
|
<a href="<%= url_for . '/' . $token->{accounttokenid} %>" class="list-group-item list-group-item-action">
|
||||||
|
<div>
|
||||||
|
%= $token->{accounttokenname}
|
||||||
|
</div>
|
||||||
|
<div class="ml-auto">
|
||||||
|
<%= $token->{used} == 1 ? 'Used' : 'Available' %>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
% }
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,56 +1,34 @@
|
||||||
% layout 'admin';
|
% layout 'admin';
|
||||||
% title 'Tokens';
|
% title 'Tokens';
|
||||||
% content_for css => begin
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background: whitesmoke;
|
|
||||||
padding-top: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel {
|
|
||||||
background: white;
|
|
||||||
padding: 16px;
|
|
||||||
-webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
-moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-form {
|
|
||||||
margin-top: 20%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
% end
|
|
||||||
% content_for javascript => begin
|
% content_for javascript => begin
|
||||||
% end
|
% end
|
||||||
<div class="container">
|
% if ( my $error = flash 'error' ) {
|
||||||
% if ( my $error = flash 'error' ) {
|
<div class="alert alert-danger" role="alert">
|
||||||
<div class="alert alert-danger" role="alert">
|
<strong>Error!</strong> <%= $error %>
|
||||||
<strong>Error!</strong> <%= $error %>
|
</div>
|
||||||
</div>
|
% } elsif ( my $success = flash 'success' ) {
|
||||||
% } elsif ( my $success = flash 'success' ) {
|
<div class="alert alert-success" role="alert">
|
||||||
<div class="alert alert-success" role="alert">
|
<strong>Success!</strong> <%= $success %>
|
||||||
<strong>Success!</strong> <%= $success %>
|
</div>
|
||||||
</div>
|
% }
|
||||||
% }
|
<form action="<%= url_for %>" method="post">
|
||||||
<form action="<%= url_for %>" method="post">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="token-name">Token Name</label>
|
||||||
<label for="token-name">Token Name</label>
|
<input id="token-name" type="text" class="form-control" placeholder="Token Text" name="token-name" value="<%= $token->accounttokenname %>">
|
||||||
<input id="token-name" type="text" class="form-control" placeholder="Token Text" name="token-name" value="<%= $token->accounttokenname %>">
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<label for="token-used">Token Used?</label>
|
||||||
<label for="token-used">Token Used?</label>
|
<select id="token-used" class="form-control" name="token-used">
|
||||||
<select id="token-used" class="form-control" name="token-used">
|
<option value="0"<%= $token->used == 0 ? ' selected' : '' %>>Available</option>
|
||||||
<option value="0"<%= $token->used == 0 ? ' selected' : '' %>>Available</option>
|
<option value="1"<%= $token->used == 1 ? ' selected' : '' %>>Used</option>
|
||||||
<option value="1"<%= $token->used == 1 ? ' selected' : '' %>>Used</option>
|
</select>
|
||||||
</select>
|
</div>
|
||||||
</div>
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<button class="btn btn-primary form-control" type="submit">Update</button>
|
||||||
<button class="btn btn-primary form-control" type="submit">Update</button>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</form>
|
<form action="<%= url_for . '/delete' %>" method="post">
|
||||||
<form action="<%= url_for . '/delete' %>" method="post">
|
<div class="form-group">
|
||||||
<div class="form-group">
|
<button class="btn btn-danger form-control" type="submit">Delete</button>
|
||||||
<button class="btn btn-danger form-control" type="submit">Delete</button>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
|
||||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
|
||||||
|
|
||||||
%= content_for 'css';
|
%= stylesheet '/static/admin/css/main.css';
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-danger">
|
<nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-danger">
|
||||||
|
|
@ -30,13 +30,14 @@
|
||||||
<div class="navbar-nav ml-auto">
|
<div class="navbar-nav ml-auto">
|
||||||
<a class="nav-item nav-link" href="<%= url_for '/home' %>">User Section</a>
|
<a class="nav-item nav-link" href="<%= url_for '/home' %>">User Section</a>
|
||||||
<a class="nav-item nav-link<%= title eq 'Tokens' ? ' active' : '' %>" href="<%= url_for '/admin/tokens' %>">Tokens</a>
|
<a class="nav-item nav-link<%= title eq 'Tokens' ? ' active' : '' %>" href="<%= url_for '/admin/tokens' %>">Tokens</a>
|
||||||
<a class="nav-item nav-link<%= title eq 'Users' ? ' active' : '' %>" href="#">Users</a>
|
<a class="nav-item nav-link<%= title eq 'Users' ? ' active' : '' %>" href="<%= url_for '/admin/users' %>">Users</a>
|
||||||
<a class="nav-item nav-link" href="<%= url_for '/logout' %>">Logout</a>
|
<a class="nav-item nav-link" href="<%= url_for '/logout' %>">Logout</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
<div class="container">
|
||||||
<%= content %>
|
<%= content %>
|
||||||
|
</div>
|
||||||
%= content_for 'javascript';
|
%= content_for 'javascript';
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Reference in a new issue