Unify UI
This commit is contained in:
Dmitry Isaenko
parent
5b03cf8367
commit
bc5a711a60
8 changed files with 279 additions and 141 deletions
|
|
@ -1,39 +1,44 @@
|
|||
@font-face{
|
||||
@font-face {
|
||||
font-family: "Terminus";
|
||||
src: url('/styles/TerminusBold.ttf');
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
font-family: Terminus;
|
||||
font-family: Terminus;
|
||||
background-color: #212121;
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
||||
.validationError {
|
||||
color: red;
|
||||
}
|
||||
.header-container {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.header-container .header-bar {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
.header-container {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-container .header-bar {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #cfcfcf;
|
||||
color: #cfcfcf;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
|
@ -46,32 +51,35 @@ a:visited {
|
|||
color: #949494;
|
||||
}
|
||||
|
||||
ul{
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
header{
|
||||
header {
|
||||
display: block;
|
||||
}
|
||||
.header_wrapper{
|
||||
background:#323833;
|
||||
|
||||
.header_wrapper {
|
||||
background: #323833;
|
||||
color: #a7a691;
|
||||
vertical-align: top;
|
||||
width:100%;
|
||||
padding:0px;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
.container{
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header_branding{
|
||||
.header_branding {
|
||||
float: left;
|
||||
}
|
||||
#header_right_block{
|
||||
|
||||
#header_right_block {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
font-family: sans-serif;
|
||||
|
|
@ -82,14 +90,21 @@ header{
|
|||
padding: 0%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.ul_right_block{
|
||||
|
||||
.ul_right_block {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.li_right_block{
|
||||
|
||||
.li_right_block {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.header_entry{
|
||||
|
||||
.header_entry {
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
display: block;
|
||||
|
|
@ -98,26 +113,68 @@ header{
|
|||
text-decoration: none;
|
||||
font-variant: small-caps;
|
||||
text-shadow: -1px -1px 0 #1e1e1e, 1px -1px 0 #1e1e1e, -1px 1px 0 #1e1e1e, 1px 1px 0 #1e1e1e;
|
||||
color:#74bfbd;
|
||||
color: #74bfbd;
|
||||
}
|
||||
.header_entry_link:hover{
|
||||
|
||||
.header_entry_link:hover {
|
||||
color: #b6a795;
|
||||
}
|
||||
.block{
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.block_inner{
|
||||
|
||||
.block_inner {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
a.entry{
|
||||
|
||||
a.entry {
|
||||
text-decoration: none;
|
||||
}
|
||||
.header_title{
|
||||
|
||||
.header_title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
hr{
|
||||
border: 0;
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px dashed;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1em 0;
|
||||
font-family: sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
font-variant: small-caps !important;
|
||||
background-color: #b0c6af !important;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 5px 25px 5px 25px;
|
||||
color: #4a3c3c;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #c2dac0 !important;
|
||||
}
|
||||
|
||||
.sign {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.base {
|
||||
background: #283338;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 8px -3px #37474e;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.center{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 25em;
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<h1>Register</h1>
|
||||
<img th:src="@{/images/logo.svg}" />
|
||||
<form class="regForm" method="POST" th:action="@{/register}" th:object="${registrationForm}">
|
||||
|
|
|
|||
|
|
@ -1,39 +1,44 @@
|
|||
@font-face{
|
||||
@font-face {
|
||||
font-family: "Terminus";
|
||||
src: url('/styles/TerminusBold.ttf');
|
||||
}
|
||||
|
||||
body {
|
||||
body {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
font-family: Terminus;
|
||||
font-family: Terminus;
|
||||
background-color: #212121;
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
||||
.validationError {
|
||||
color: red;
|
||||
}
|
||||
.header-container {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
.header-container .header-bar {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: red;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
.header-container {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-container .header-bar {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #cfcfcf;
|
||||
color: #cfcfcf;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
|
@ -46,32 +51,35 @@ a:visited {
|
|||
color: #949494;
|
||||
}
|
||||
|
||||
ul{
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
header{
|
||||
header {
|
||||
display: block;
|
||||
}
|
||||
.header_wrapper{
|
||||
background:#323833;
|
||||
|
||||
.header_wrapper {
|
||||
background: #323833;
|
||||
color: #a7a691;
|
||||
vertical-align: top;
|
||||
width:100%;
|
||||
padding:0px;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
.container{
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header_branding{
|
||||
.header_branding {
|
||||
float: left;
|
||||
}
|
||||
#header_right_block{
|
||||
|
||||
#header_right_block {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
font-family: sans-serif;
|
||||
|
|
@ -82,14 +90,21 @@ header{
|
|||
padding: 0%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.ul_right_block{
|
||||
|
||||
.ul_right_block {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.li_right_block{
|
||||
|
||||
.li_right_block {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.header_entry{
|
||||
|
||||
.header_entry {
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
display: block;
|
||||
|
|
@ -98,26 +113,68 @@ header{
|
|||
text-decoration: none;
|
||||
font-variant: small-caps;
|
||||
text-shadow: -1px -1px 0 #1e1e1e, 1px -1px 0 #1e1e1e, -1px 1px 0 #1e1e1e, 1px 1px 0 #1e1e1e;
|
||||
color:#74bfbd;
|
||||
color: #74bfbd;
|
||||
}
|
||||
.header_entry_link:hover{
|
||||
|
||||
.header_entry_link:hover {
|
||||
color: #b6a795;
|
||||
}
|
||||
.block{
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.block_inner{
|
||||
|
||||
.block_inner {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
a.entry{
|
||||
|
||||
a.entry {
|
||||
text-decoration: none;
|
||||
}
|
||||
.header_title{
|
||||
|
||||
.header_title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
hr{
|
||||
border: 0;
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
border-bottom: 1px dashed;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 1em 0;
|
||||
font-family: sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
font-variant: small-caps !important;
|
||||
background-color: #b0c6af !important;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 5px 25px 5px 25px;
|
||||
color: #4a3c3c;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #c2dac0 !important;
|
||||
}
|
||||
|
||||
.sign {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.base {
|
||||
background: #283338;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 8px -3px #37474e;
|
||||
border-radius: 3px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.center{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 25em;
|
||||
}
|
||||
|
|
@ -2,30 +2,32 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<head>
|
||||
<title>Marinesco</title>
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" th:href="@{/styles/styles.css}" />
|
||||
<title>Marinesco</title>
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" th:href="@{/styles/styles.css}" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<img th:src="@{/images/logo.svg}" />
|
||||
<div class="center">
|
||||
<div class="container base">
|
||||
<h1>Log in</h1>
|
||||
<a href="/register">Register</a>
|
||||
<form class="form-signin" method="post" action="/login">
|
||||
<br /><span class="validationError" th:if="${param.error}">Unable to login. Check your username and
|
||||
password.</span>
|
||||
<p>
|
||||
<label for="username" class="sr-only">Username</label>
|
||||
<input type="text" id="username" name="login" class="form-control" placeholder="Username" required autofocus>
|
||||
</p>
|
||||
<p>
|
||||
<label for="password" class="sr-only">Password</label>
|
||||
<input type="password" id="password" name="pwd" class="form-control" placeholder="Password" required>
|
||||
</p>
|
||||
<button class="sign" type="submit">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<div class="container">
|
||||
<br /> New here? <a href="/register">REGISTER NOW!</a>
|
||||
<br /><a href="/h2">H2</a>
|
||||
<form class="form-signin" method="post" action="/login">
|
||||
<h2 class="form-signin-heading">Please sign in</h2>
|
||||
<br /><span class="validationError" th:if="${param.error}">Unable to login. Check your username and password.</span>
|
||||
<p>
|
||||
<label for="username" class="sr-only">Username</label>
|
||||
<input type="text" id="username" name="login" class="form-control" placeholder="Username" required autofocus>
|
||||
</p>
|
||||
<p>
|
||||
<label for="password" class="sr-only">Password</label>
|
||||
<input type="password" id="password" name="pwd" class="form-control" placeholder="Password" required>
|
||||
</p>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</html>
|
||||
|
|
@ -9,24 +9,27 @@
|
|||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<h1 th:text="${header_text}"></h1>
|
||||
<p>
|
||||
<div th:each="user : ${USR}">
|
||||
<span th:text="${user.id+' '+user.name+' '+user.displayName}+' ROLES: '">user</span>
|
||||
<span th:each="role : ${user.role}">
|
||||
<span th:text="'[ '+${role.id+' '+role.name+' '+role.type}+' ]'">user</span>
|
||||
</span>
|
||||
<form method="POST" th:action="@{/manage_users/delete}" th:object="${userGenerified}">
|
||||
<input type="hidden" th:value="${user.id}" name="id" />
|
||||
<input type="hidden" th:value="${user.name}" name="name" />
|
||||
<input type="hidden" th:value="${user.displayName}" name="displayName" />
|
||||
<div class="container base">
|
||||
<h1 th:text="${header_text}"></h1>
|
||||
<p>
|
||||
<div th:each="user : ${USR}">
|
||||
<span th:text="${user.id+' '+user.name+' '+user.displayName}+' ROLES: '">user</span>
|
||||
<span th:each="role : ${user.role}">
|
||||
<input type="hidden" th:value="${role.id}" th:attr="name='role'" />
|
||||
<span th:text="'[ '+${role.id+' '+role.name+' '+role.type}+' ]'">user</span>
|
||||
</span>
|
||||
|
||||
<button>DELETE</button>
|
||||
</form>
|
||||
<br />
|
||||
<form method="POST" th:action="@{/manage_users/delete}" th:object="${userGenerified}">
|
||||
<input type="hidden" th:value="${user.id}" name="id" />
|
||||
<input type="hidden" th:value="${user.name}" name="name" />
|
||||
<input type="hidden" th:value="${user.displayName}" name="displayName" />
|
||||
<span th:each="role : ${user.role}">
|
||||
<input type="hidden" th:value="${role.id}" th:attr="name='role'" />
|
||||
</span>
|
||||
|
||||
<button>DELETE</button>
|
||||
</form>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -9,32 +9,41 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Register</h1>
|
||||
<img th:src="@{/images/logo.svg}" />
|
||||
<form class="regForm" method="POST" th:action="@{/register}" th:object="${registrationForm}">
|
||||
|
||||
<span class="validationError" th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Error</span>
|
||||
<br />
|
||||
<label for="username">Username: </label>
|
||||
<input type="text" name="username" id="username"/><br />
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<div class="container base">
|
||||
<h1>Register</h1>
|
||||
<form class="regForm" method="POST" th:action="@{/register}" th:object="${registrationForm}">
|
||||
|
||||
<span class="validationError" th:if="${#fields.hasErrors('password')}" th:errors="*{password}">Error</span>
|
||||
<br />
|
||||
<label for="password">Password: </label>
|
||||
<input type="password" name="password" id="password"/><br />
|
||||
<span class="validationError" th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Error</span>
|
||||
<br />
|
||||
<label for="username">Username: </label>
|
||||
<br />
|
||||
<input type="text" name="username" id="username" size="50%" /><br />
|
||||
|
||||
<span class="validationError" th:if="${passwordsMismatch} != null" th:text="${passwordsMismatch}">false</span>
|
||||
<br />
|
||||
<label for="confirm">Confirm password: </label>
|
||||
<input type="password" name="passwordConfirm" id="passwordConfirm" /><br />
|
||||
<span class="validationError" th:if="${#fields.hasErrors('password')}" th:errors="*{password}">Error</span>
|
||||
<br />
|
||||
<label for="password">Password: </label>
|
||||
<br />
|
||||
<input type="password" name="password" id="password" size="50%" /><br />
|
||||
|
||||
<span class="validationError" th:if="${#fields.hasErrors('displayname')}" th:errors="*{displayname}">Error</span>
|
||||
<br />
|
||||
<label for="displayname">Displayed name: </label>
|
||||
<input type="text" name="displayname" id="displayname"/><br />
|
||||
|
||||
<input type="submit" value="Register" />
|
||||
</form>
|
||||
<span class="validationError" th:if="${passwordsMismatch} != null"
|
||||
th:text="${passwordsMismatch}">false</span>
|
||||
<br />
|
||||
<label for="confirm">Confirm password: </label>
|
||||
<br />
|
||||
<input type="password" name="passwordConfirm" id="passwordConfirm" size="50%" /><br />
|
||||
|
||||
<span class="validationError" th:if="${#fields.hasErrors('displayname')}"
|
||||
th:errors="*{displayname}">Error</span>
|
||||
<br />
|
||||
<label for="displayname">Displayed name: </label>
|
||||
<br />
|
||||
<input type="text" name="displayname" id="displayname" size="50%" /><br />
|
||||
<p>
|
||||
<button class="sign" type="submit" >Register</button>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -9,10 +9,13 @@
|
|||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<img th:src="@{/images/logo.svg}" />
|
||||
<br /><a href="/login">Login</a>
|
||||
<br /><a href="/profile">/profile</a>
|
||||
<br /><a href="/manage_users">/manage_users</a>
|
||||
<div class="container base">
|
||||
<img th:src="@{/images/logo.svg}" />
|
||||
<br /><a href="/login">Login</a>
|
||||
<br /><a href="/profile">/profile</a>
|
||||
<br /><a href="/manage_users">/manage_users</a>
|
||||
<br /><a href="/h2">H2</a>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -9,19 +9,25 @@
|
|||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<div class="container base">
|
||||
<h1 th:text="${header_text}">welcome</h1>
|
||||
<form method="POST" th:action="@{/profile/settings}" th:object="${userSettingsForm}"> <!-- -->
|
||||
<span class="validationError" th:if="${#fields.hasErrors('displayname')}" th:errors="*{displayname}">Error</span>
|
||||
<span class="validationError" th:if="${#fields.hasErrors('displayname')}"
|
||||
th:errors="*{displayname}">Error</span>
|
||||
<br />
|
||||
<label for="displayname">Displayed name: </label>
|
||||
<input type="text" name="displayname" id="displayname" th:value="${userSettingsForm.displayname}" /><br />
|
||||
<br />
|
||||
<input type="text" name="displayname" id="displayname" th:value="${userSettingsForm.displayname}" size="50%" /><br />
|
||||
|
||||
<span class="validationError" th:if="${password_incorrect} != null" th:text="${password_incorrect}">false</span>
|
||||
<span class="validationError" th:if="${password_incorrect} != null" th:text="${password_incorrect}">false</span>
|
||||
<br />
|
||||
<label for="password">New password: </label>
|
||||
<input type="password" name="newPassword" id="newPassword" /><br />
|
||||
<br />
|
||||
<input type="password" name="newPassword" id="newPassword" size="50%" /><br />
|
||||
|
||||
<input type="submit" value="Save Changes" />
|
||||
<button class="sign" type="submit">Save Changes</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue