desu/marinesco
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Unify UI

Browse source
This commit is contained in:
Dmitry Isaenko 2023-12-29 21:55:47 +03:00
parent 5b03cf8367
commit bc5a711a60
8 changed files with 279 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/main/resources/static/styles/styles.css
View file

@ -16,16 +16,20 @@ body {
.validationError { .validationError {
color: red; color: red;
} }
.header-container { .header-container {
text-align: left; text-align: left;
position: relative; position: relative;
} }
.header-container .header-bar { .header-container .header-bar {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
table, th, td { table,
th,
td {
border: 1px solid; border: 1px solid;
border-collapse: collapse; border-collapse: collapse;
} }
@ -34,6 +38,7 @@ a {
color: #cfcfcf; color: #cfcfcf;
text-align: center; text-align: center;
} }
a:link { a:link {
color: #cfcfcf; color: #cfcfcf;
} }
@ -53,6 +58,7 @@ ul{
header { header {
display: block; display: block;
} }
.header_wrapper { .header_wrapper {
background: #323833; background: #323833;
color: #a7a691; color: #a7a691;
@ -62,6 +68,7 @@ header{
margin-bottom: 20px; margin-bottom: 20px;
display: inline-block; display: inline-block;
} }
.container { .container {
width: 100%; width: 100%;
max-width: 1280px; max-width: 1280px;
@ -71,6 +78,7 @@ header{
.header_branding { .header_branding {
float: left; float: left;
} }
#header_right_block { #header_right_block {
list-style-type: none; list-style-type: none;
list-style-image: none; list-style-image: none;
@ -82,13 +90,20 @@ header{
padding: 0%; padding: 0%;
font-size: 0.9em; font-size: 0.9em;
} }
.ul_right_block { .ul_right_block {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.li_right_block { .li_right_block {
margin-left: 5px;
margin-right: 5px;
height: 100%; height: 100%;
float: left;
position: relative;
} }
.header_entry { .header_entry {
height: 65px; height: 65px;
line-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; 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; color: #b6a795;
} }
.block { .block {
display: block; display: block;
} }
.block_inner { .block_inner {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
a.entry { a.entry {
text-decoration: none; text-decoration: none;
} }
.header_title { .header_title {
font-size: 1.5em; font-size: 1.5em;
} }
hr { hr {
border: 0; border: 0;
border-bottom: 1px dashed; border-bottom: 1px dashed;
background: none; 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;
}

1
src/main/resources/templates/registration.html
View file

@ -9,6 +9,7 @@
</head> </head>
<body> <body>
<div th:replace="~{fragments/header :: 'header'}"></div>
<h1>Register</h1> <h1>Register</h1>
<img th:src="@{/images/logo.svg}" /> <img th:src="@{/images/logo.svg}" />
<form class="regForm" method="POST" th:action="@{/register}" th:object="${registrationForm}"> <form class="regForm" method="POST" th:action="@{/register}" th:object="${registrationForm}">

59
target/classes/static/styles/styles.css
View file

@ -16,16 +16,20 @@ body {
.validationError { .validationError {
color: red; color: red;
} }
.header-container { .header-container {
text-align: left; text-align: left;
position: relative; position: relative;
} }
.header-container .header-bar { .header-container .header-bar {
position: absolute; position: absolute;
right: 10px; right: 10px;
} }
table, th, td { table,
th,
td {
border: 1px solid; border: 1px solid;
border-collapse: collapse; border-collapse: collapse;
} }
@ -34,6 +38,7 @@ a {
color: #cfcfcf; color: #cfcfcf;
text-align: center; text-align: center;
} }
a:link { a:link {
color: #cfcfcf; color: #cfcfcf;
} }
@ -53,6 +58,7 @@ ul{
header { header {
display: block; display: block;
} }
.header_wrapper { .header_wrapper {
background: #323833; background: #323833;
color: #a7a691; color: #a7a691;
@ -62,6 +68,7 @@ header{
margin-bottom: 20px; margin-bottom: 20px;
display: inline-block; display: inline-block;
} }
.container { .container {
width: 100%; width: 100%;
max-width: 1280px; max-width: 1280px;
@ -71,6 +78,7 @@ header{
.header_branding { .header_branding {
float: left; float: left;
} }
#header_right_block { #header_right_block {
list-style-type: none; list-style-type: none;
list-style-image: none; list-style-image: none;
@ -82,13 +90,20 @@ header{
padding: 0%; padding: 0%;
font-size: 0.9em; font-size: 0.9em;
} }
.ul_right_block { .ul_right_block {
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
} }
.li_right_block { .li_right_block {
margin-left: 5px;
margin-right: 5px;
height: 100%; height: 100%;
float: left;
position: relative;
} }
.header_entry { .header_entry {
height: 65px; height: 65px;
line-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; 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; color: #b6a795;
} }
.block { .block {
display: block; display: block;
} }
.block_inner { .block_inner {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
a.entry { a.entry {
text-decoration: none; text-decoration: none;
} }
.header_title { .header_title {
font-size: 1.5em; font-size: 1.5em;
} }
hr { hr {
border: 0; border: 0;
border-bottom: 1px dashed; border-bottom: 1px dashed;
background: none; 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;
}

18
target/classes/templates/login.html
View file

@ -9,14 +9,13 @@
<body> <body>
<div th:replace="~{fragments/header :: 'header'}"></div> <div th:replace="~{fragments/header :: 'header'}"></div>
<img th:src="@{/images/logo.svg}" /> <div class="center">
</body> <div class="container base">
<div class="container"> <h1>Log in</h1>
<br /> New here? <a href="/register">REGISTER NOW!</a> <a href="/register">Register</a>
<br /><a href="/h2">H2</a>
<form class="form-signin" method="post" action="/login"> <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
<br /><span class="validationError" th:if="${param.error}">Unable to login. Check your username and password.</span> password.</span>
<p> <p>
<label for="username" class="sr-only">Username</label> <label for="username" class="sr-only">Username</label>
<input type="text" id="username" name="login" class="form-control" placeholder="Username" required autofocus> <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> <label for="password" class="sr-only">Password</label>
<input type="password" id="password" name="pwd" class="form-control" placeholder="Password" required> <input type="password" id="password" name="pwd" class="form-control" placeholder="Password" required>
</p> </p>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> <button class="sign" type="submit">Sign in</button>
</form> </form>
</div> </div>
</div>
</body>
</html> </html>

3
target/classes/templates/manage_users.html
View file

@ -9,6 +9,7 @@
<body> <body>
<div th:replace="~{fragments/header :: 'header'}"></div> <div th:replace="~{fragments/header :: 'header'}"></div>
<div class="container base">
<h1 th:text="${header_text}"></h1> <h1 th:text="${header_text}"></h1>
<p> <p>
<div th:each="user : ${USR}"> <div th:each="user : ${USR}">
@ -28,5 +29,7 @@
</form> </form>
<br /> <br />
</div> </div>
</div>
</body> </body>
</html> </html>

27
target/classes/templates/registration.html
View file

@ -9,32 +9,41 @@
</head> </head>
<body> <body>
<div th:replace="~{fragments/header :: 'header'}"></div>
<div class="container base">
<h1>Register</h1> <h1>Register</h1>
<img th:src="@{/images/logo.svg}" />
<form class="regForm" method="POST" th:action="@{/register}" th:object="${registrationForm}"> <form class="regForm" method="POST" th:action="@{/register}" th:object="${registrationForm}">
<span class="validationError" th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Error</span> <span class="validationError" th:if="${#fields.hasErrors('username')}" th:errors="*{username}">Error</span>
<br /> <br />
<label for="username">Username: </label> <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> <span class="validationError" th:if="${#fields.hasErrors('password')}" th:errors="*{password}">Error</span>
<br /> <br />
<label for="password">Password: </label> <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 /> <br />
<label for="confirm">Confirm password: </label> <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 /> <br />
<label for="displayname">Displayed name: </label> <label for="displayname">Displayed name: </label>
<input type="text" name="displayname" id="displayname"/><br /> <br />
<input type="text" name="displayname" id="displayname" size="50%" /><br />
<input type="submit" value="Register" /> <p>
<button class="sign" type="submit" >Register</button>
</p>
</form> </form>
</div>
</body> </body>
</html> </html>

3
target/classes/templates/root.html
View file

@ -9,10 +9,13 @@
<body> <body>
<div th:replace="~{fragments/header :: 'header'}"></div> <div th:replace="~{fragments/header :: 'header'}"></div>
<div class="container base">
<img th:src="@{/images/logo.svg}" /> <img th:src="@{/images/logo.svg}" />
<br /><a href="/login">Login</a> <br /><a href="/login">Login</a>
<br /><a href="/profile">/profile</a> <br /><a href="/profile">/profile</a>
<br /><a href="/manage_users">/manage_users</a> <br /><a href="/manage_users">/manage_users</a>
<br /><a href="/h2">H2</a>
</div>
</body> </body>
</html> </html>

14
target/classes/templates/user_settings.html
View file

@ -9,19 +9,25 @@
<body> <body>
<div th:replace="~{fragments/header :: 'header'}"></div> <div th:replace="~{fragments/header :: 'header'}"></div>
<div class="container base">
<h1 th:text="${header_text}">welcome</h1> <h1 th:text="${header_text}">welcome</h1>
<form method="POST" th:action="@{/profile/settings}" th:object="${userSettingsForm}"> <!-- --> <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 /> <br />
<label for="displayname">Displayed name: </label> <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 /> <br />
<label for="password">New password: </label> <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> </form>
</div>
</body> </body>
</html> </html>