Skip to content

D
daaexample
Commit 9ef1c405 authored by Administrator's avatar Administrator
1 Browse files
Options

Improves application appearance 

The application appearance has been improved applying Bootstrap formats.
parent 587a343e
Hide whitespace changes
Inline Side-by-side
Showing with 132 additions and 57 deletions
src/main/java/es/uvigo/esei/daa/LoginFilter.java
View file @ 9ef1c405
......@@ -35,7 +35,7 @@ public class LoginFilter implements Filter {
private static final String LOGOUT_PATH = "/logout";
private static final String REST_PATH = "/rest";
private static final String[] PUBLIC_PATHS = new String[] {
"/index.html" // Add the paths that can be publicly accessed (e.g. /js, /css...)
"/index.html", "/js", "/css" // Add the paths that can be publicly accessed (e.g. /images...)
};
@Override
......
src/main/webapp/css/login.css 0 → 100644
View file @ 9ef1c405
html, body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: red;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
#login {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
#password {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
\ No newline at end of file
src/main/webapp/index.html
View file @ 9ef1c405
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DAA Example - Login</title>
</head>
<body>
<form action="main.html" method="POST">
<div>
Login: <input name="login" type="text" />
</div>
<div>
Password: <input name="password" type="password" />
</div>
<div>
<input type="submit" value="Login" />
</div>
</form>
</body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>DAA Example - Login</title>
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body class="text-center">
<form class="form-singin" action="main.html" method="POST">
<h1 class="h1 mb-3 font-weight-normal">DAA Example</h1>
<label for="login" class="sr-only">Login</label>
<input id="login" name="login" type="text" class="form-control" placeholder="Login" required autofocus />
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" class="form-control" placeholder="Password" required />
<button type="submit" class="btn btn-lg btn-primary btn-block mt-3">Login</button>
</form>
</body>
</html>
\ No newline at end of file
src/main/webapp/js/view/people.js
View file @ 9ef1c405
......@@ -124,12 +124,11 @@ var PeopleView = (function() {
var insertPeopleList = function(parent) {
parent.append(
'<table id="' + listId + '">\
<tr>\
<th>Nombre</th>\
<th>Apellido</th>\
<th></th>\
<th></th>\
'<table id="' + listId + '" class="table">\
<tr class="row">\
<th class="col-sm-4">Nombre</th>\
<th class="col-sm-5">Apellido</th>\
<th class="col-sm-3">&nbsp;</th>\
</tr>\
</table>'
);
......@@ -137,25 +136,31 @@ var PeopleView = (function() {
var insertPeopleForm = function(parent) {
parent.append(
'<form id="' + formId + '">\
'<form id="' + formId + '" class="mb-5 mb-10">\
<input name="id" type="hidden" value=""/>\
<input name="name" type="text" value="" />\
<input name="surname" type="text" value=""/>\
<input id="btnSubmit" type="submit" value="Create"/>\
<input id="btnClear" type="reset" value="Limpiar"/>\
<div class="row">\
<div class="col-sm-4">\
<input name="name" type="text" value="" placeholder="Nombre" class="form-control" required/>\
</div>\
<div class="col-sm-5">\
<input name="surname" type="text" value="" placeholder="Apellido" class="form-control" required/>\
</div>\
<div class="col-sm-3">\
<input id="btnSubmit" type="submit" value="Crear" class="btn btn-primary" />\
<input id="btnClear" type="reset" value="Limpiar" class="btn" />\
</div>\
</div>\
</form>'
);
};
var createPersonRow = function(person) {
return '<tr id="person-'+ person.id +'">\
<td class="name">' + person.name + '</td>\
<td class="surname">' + person.surname + '</td>\
<td>\
<a class="edit" href="#">Edit</a>\
</td>\
<td>\
<a class="delete" href="#">Delete</a>\
return '<tr id="person-'+ person.id +'" class="row">\
<td class="name col-sm-4">' + person.name + '</td>\
<td class="surname col-sm-5">' + person.surname + '</td>\
<td class="col-sm-3">\
<a class="edit btn btn-primary" href="#">Editar</a>\
<a class="delete btn btn-warning" href="#">Eliminar</a>\
</td>\
</tr>';
};
......
src/main/webapp/main.html
View file @ 9ef1c405
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DAA Example</title>
</head>
<body>
<div id="people-container">
<h1>People</h1>
<a id="#logout" href="logout">Logout</a>
</div>
<head>
<meta charset="UTF-8">
<title>DAA Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>DAA Example</strong>
</a>
<a id="#logout" href="logout" class="btn btn-dark" role="button">Logout</a>
</div>
</div>
</header>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/dao/people.js"></script>
<script type="text/javascript" src="js/view/people.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
view.init();
});
</script>
</body>
<div class="container">
<div id="people-container">
<h1 class="display-5 mt-3 mb-3">People</h1>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/dao/people.js"></script>
<script type="text/javascript" src="js/view/people.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var view = new PeopleView(new PeopleDAO(), 'people-container', 'people-container');
view.init();
});
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment