Unify UI
This commit is contained in:
Dmitry Isaenko
parent
5b03cf8367
commit
bc5a711a60
8 changed files with 279 additions and 141 deletions
|
|
@ -16,16 +16,20 @@ body {
|
|||
.validationError {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-container .header-bar {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
|
@ -34,6 +38,7 @@ a {
|
|||
color: #cfcfcf;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
|
@ -53,6 +58,7 @@ ul{
|
|||
header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header_wrapper {
|
||||
background: #323833;
|
||||
color: #a7a691;
|
||||
|
|
@ -62,6 +68,7 @@ header{
|
|||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
|
|
@ -71,6 +78,7 @@ header{
|
|||
.header_branding {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header_right_block {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
|
|
@ -82,13 +90,20 @@ header{
|
|||
padding: 0%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.ul_right_block {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.li_right_block {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header_entry {
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
|
|
@ -100,24 +115,66 @@ header{
|
|||
text-shadow: -1px -1px 0 #1e1e1e, 1px -1px 0 #1e1e1e, -1px 1px 0 #1e1e1e, 1px 1px 0 #1e1e1e;
|
||||
color: #74bfbd;
|
||||
}
|
||||
|
||||
.header_entry_link:hover {
|
||||
color: #b6a795;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block_inner {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a.entry {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header_title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
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}">
|
||||
|
|
|
|||
|
|
@ -16,16 +16,20 @@ body {
|
|||
.validationError {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
text-align: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-container .header-bar {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
table, th, td {
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px solid;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
|
@ -34,6 +38,7 @@ a {
|
|||
color: #cfcfcf;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
|
@ -53,6 +58,7 @@ ul{
|
|||
header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.header_wrapper {
|
||||
background: #323833;
|
||||
color: #a7a691;
|
||||
|
|
@ -62,6 +68,7 @@ header{
|
|||
margin-bottom: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
|
|
@ -71,6 +78,7 @@ header{
|
|||
.header_branding {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#header_right_block {
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
|
|
@ -82,13 +90,20 @@ header{
|
|||
padding: 0%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.ul_right_block {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.li_right_block {
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header_entry {
|
||||
height: 65px;
|
||||
line-height: 65px;
|
||||
|
|
@ -100,24 +115,66 @@ header{
|
|||
text-shadow: -1px -1px 0 #1e1e1e, 1px -1px 0 #1e1e1e, -1px 1px 0 #1e1e1e, 1px 1px 0 #1e1e1e;
|
||||
color: #74bfbd;
|
||||
}
|
||||
|
||||
.header_entry_link:hover {
|
||||
color: #b6a795;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.block_inner {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a.entry {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header_title {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
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,14 +9,13 @@
|
|||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<img th:src="@{/images/logo.svg}" />
|
||||
</body>
|
||||
<div class="container">
|
||||
<br /> New here? <a href="/register">REGISTER NOW!</a>
|
||||
<br /><a href="/h2">H2</a>
|
||||
<div class="center">
|
||||
<div class="container base">
|
||||
<h1>Log in</h1>
|
||||
<a href="/register">Register</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>
|
||||
<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>
|
||||
|
|
@ -25,7 +24,10 @@
|
|||
<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>
|
||||
<button class="sign" type="submit">Sign in</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<div class="container base">
|
||||
<h1 th:text="${header_text}"></h1>
|
||||
<p>
|
||||
<div th:each="user : ${USR}">
|
||||
|
|
@ -28,5 +29,7 @@
|
|||
</form>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -9,32 +9,41 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div th:replace="~{fragments/header :: 'header'}"></div>
|
||||
<div class="container base">
|
||||
<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 />
|
||||
<br />
|
||||
<input type="text" name="username" id="username" size="50%" /><br />
|
||||
|
||||
<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 />
|
||||
<br />
|
||||
<input type="password" name="password" id="password" size="50%" /><br />
|
||||
|
||||
<span class="validationError" th:if="${passwordsMismatch} != null" th:text="${passwordsMismatch}">false</span>
|
||||
<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 />
|
||||
<br />
|
||||
<input type="password" name="passwordConfirm" id="passwordConfirm" size="50%" /><br />
|
||||
|
||||
<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"/><br />
|
||||
|
||||
<input type="submit" value="Register" />
|
||||
<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>
|
||||
<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>
|
||||
<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