Factorino73/PIbd-21_MasenkinMS_WebDev_Backend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

LabWork04-05 / Change styles

Browse Source
This commit is contained in:
ПИбд-31 || Масенькин Максим 2024-05-11 21:44:36 +04:00
parent 1c5ec72d08
commit c4d148f611
7 changed files with 159 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo/data.mv.db
View File

Binary file not shown.

107
demo/src/main/resources/public/css/style.css
View File

@ -5,12 +5,22 @@ body {
background-color: #363434; background-color: #363434;
} }
._container {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
max-width: 1680px;
}
h1 { h1 {
font-size: 1.5em; font-size: 1.5em;
} }
h2 { h2 {
font-size: 1.25em; margin: 20px auto;
font-size: 25px;
font-weight: 600;
} }
h3 { h3 {
@ -23,6 +33,31 @@ td form {
margin-top: -.25em; margin-top: -.25em;
} }
.btn {
display: flex;
justify-content: center;
align-items: center;
background-color: #a721fa;
font-size: 20px;
font-weight: 700;
border-radius: 30px;
}
.btn-primary,
.btn-secondary {
margin-bottom: 30px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
}
.btn:active {
transform: translateY(-1px);
box-shadow: 10px 10px rgba(0, 0, 0, 0.2);
}
.button-fixed-width { .button-fixed-width {
width: 150px; width: 150px;
} }
@ -39,24 +74,78 @@ td form {
width: 10% !important; width: 10% !important;
} }
.table {
padding: 3%;
border: solid 5px #a721fa;
color: #fff;
background-color: #2c2a2a;
}
.table tbody tr {
background-color: #363434;
}
.table tbody tr:not(:last-child) {
margin: 5px 0px;
}
/* Шапка */
/* Обертка шапки */
.header {
background-color: #2c2a2a;
padding: 15px 0;
}
.my-navbar { .my-navbar {
background-color: #2c2a2a !important; background-color: #2c2a2a !important;
color: white; color: white;
} }
.my-navbar .link a:hover { .my-navbar .logo {
width: 75px;
height: 75px;
}
.logo__nametag {
margin-left: 20px;
}
/* Название логотипа */
.nametag__title {
font-size: 35px;
font-weight: bold;
color: #a721fa;
}
.nametag__subtitle {
font-size: 16px;
color: #fff;
}
.nav-list {
margin: 0px 10px;
display: flex;
justify-content: center;
text-align: center;
gap: 30px;
}
.nav-link {
text-decoration: none;
color: #fff;
font-size: 20px;
font-weight: 600;
}
.nav-link:hover {
color: #a721fa; color: #a721fa;
} }
.my-navbar .logo { .footer {
width: 26px;
height: 26px;
}
.my-footer {
background-color: #2c2a2a; background-color: #2c2a2a;
height: 32px; width: 100%;
padding: 30px 0px;
color: white; color: white;
font-size: 20px;
font-weight: 600;
} }
.cart-image { .cart-image {

99
demo/src/main/resources/templates/default.html
View File

@ -16,56 +16,63 @@
</head> </head>
<body class="h-100 d-flex flex-column"> <body class="h-100 d-flex flex-column">
<nav class="navbar navbar-expand-md my-navbar" data-bs-theme="dark"> <div class="header">
<div class="container-fluid"> <nav class="navbar navbar-expand-md my-navbar _container" data-bs-theme="dark">
<a class="navbar-brand" href="/"> <div class="container-fluid">
<img src="/logo.png" alt="Bookshelf" class="d-inline-block align-top me-1 logo"> <a class="navbar-brand d-flex align-center" href="/">
Bookshelf <img src="/logo.png" alt="Bookshelf" class="d-inline-block align-top me-1 logo">
</a> <div class="logo__nametag">
<th:block sec:authorize="isAuthenticated()" th:with="userName=${#authentication.name}"> <div class="nametag__title">Bookshelf</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar" <div class="nametag__subtitle">Online-library</div>
aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation"> </div>
<span class="navbar-toggler-icon"></span> </a>
</button> <th:block sec:authorize="isAuthenticated()" th:with="userName=${#authentication.name}">
<div class="collapse navbar-collapse" id="main-navbar"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar"
<ul class="navbar-nav me-auto link" th:with="activeLink=${#objects.nullSafe(servletPath, '')}"> aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<th:block sec:authorize="hasRole('ADMIN')"> <span class="navbar-toggler-icon"></span>
<a class="nav-link" href="/admin/user" </button>
th:classappend="${activeLink.startsWith('/admin/user') ? 'active' : ''}"> <div class="collapse navbar-collapse" id="main-navbar">
Users <ul class="navbar nav-list me-auto link" th:with="activeLink=${#objects.nullSafe(servletPath, '')}">
<th:block sec:authorize="hasRole('ADMIN')">
<a class="nav-link" href="/admin/user"
th:classappend="${activeLink.startsWith('/admin/user') ? 'active' : ''}">
Users
</a>
<a class="nav-link" href="/admin/type"
th:classappend="${activeLink.startsWith('/admin/type') ? 'active' : ''}">
Types
</a>
<a class="nav-link" href="/admin/message"
th:classappend="${activeLink.startsWith('/admin/message') ? 'active' : ''}">
Messages
</a>
<a class="nav-link" href="/h2-console/" target="_blank">Console H2</a>
</th:block>
</ul>
<ul class="navbar d-flex align-center" th:if="${not #strings.isEmpty(userName)}">
<form th:action="@{/logout}" method="post">
<button type="submit" class="navbar-brand nav-link" onclick="return confirm('Are you sure?')">
Logout ([[${userName}]])
</button>
</form>
<a class="navbar-brand d-flex align-center" href="/cart">
<i class="bi bi-cart2 me-1"></i>
[[${#numbers.formatDecimal(totalCart, 1, 2)}]] &#8381;
</a> </a>
<a class="nav-link" href="/admin/type" </ul>
th:classappend="${activeLink.startsWith('/admin/type') ? 'active' : ''}"> </div>
Types </th:block>
</a> </div>
<a class="nav-link" href="/admin/message" </nav>
th:classappend="${activeLink.startsWith('/admin/message') ? 'active' : ''}"> </div>
Messages
</a>
<a class="nav-link" href="/h2-console/" target="_blank">Console H2</a>
</th:block>
</ul>
<ul class="navbar-nav" th:if="${not #strings.isEmpty(userName)}">
<form th:action="@{/logout}" method="post">
<button type="submit" class="navbar-brand nav-link" onclick="return confirm('Are you sure?')">
Logout ([[${userName}]])
</button>
</form>
<a class="navbar-brand" href="/cart">
<i class="bi bi-cart2 d-inline-block align-top me-1 logo"></i>
[[${#numbers.formatDecimal(totalCart, 1, 2)}]] &#8381;
</a>
</ul>
</div>
</th:block>
</div>
</nav>
<main class="container-fluid p-2" layout:fragment="content"> <main class="container-fluid p-2 _container" layout:fragment="content">
</main> </main>
<footer class="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center"> <footer class="footer mt-auto">
made by Factorino, [[${#dates.year(#dates.createNow())}]] <div class="d-flex flex-shrink-0 justify-content-center align-items-center _container">
made by Factorino, [[${#dates.year(#dates.createNow())}]]
</div>
</footer> </footer>
</body> </body>

6
demo/src/main/resources/templates/messages.html
View File

@ -6,7 +6,7 @@
</head> </head>
<body> <body>
<main layout:fragment="content"> <main layout:fragment="content" >
<th:block th:switch="${messageItems.size()}"> <th:block th:switch="${messageItems.size()}">
<h2 th:case="0">No data available</h2> <h2 th:case="0">No data available</h2>
<th:block th:case="*"> <th:block th:case="*">
@ -36,14 +36,14 @@
<td> <td>
<form th:action="@{/admin/message/publish/{id}(id=${message.id})}" method="post"> <form th:action="@{/admin/message/publish/{id}(id=${message.id})}" method="post">
<input type="hidden" th:name="page" th:value="${page}"> <input type="hidden" th:name="page" th:value="${page}">
<button type="submit" class="btn btn-link button-link" <button type="submit" class="btn"
onclick="return confirm('Are you sure?')">Publish</button> onclick="return confirm('Are you sure?')">Publish</button>
</form> </form>
</td> </td>
<td> <td>
<form th:action="@{/admin/message/delete/{id}(id=${message.id})}" method="post"> <form th:action="@{/admin/message/delete/{id}(id=${message.id})}" method="post">
<input type="hidden" th:name="page" th:value="${page}"> <input type="hidden" th:name="page" th:value="${page}">
<button type="submit" class="btn btn-link button-link" <button type="submit" class="btn"
onclick="return confirm('Are you sure?')">Delete</button> onclick="return confirm('Are you sure?')">Delete</button>
</form> </form>
</td> </td>

2
demo/src/main/resources/templates/orders.html
View File

@ -41,7 +41,7 @@
<form th:action="@{/delete/{id}(id=${order.id})}" method="post"> <form th:action="@{/delete/{id}(id=${order.id})}" method="post">
<input type="hidden" th:name="page" th:value="${page}"> <input type="hidden" th:name="page" th:value="${page}">
<input type="hidden" th:name="typeId" th:value="${typeId}"> <input type="hidden" th:name="typeId" th:value="${typeId}">
<button type="submit" class="btn btn-link button-link" <button type="submit" class="btn"
onclick="return confirm('Are you sure?')">Delete</button> onclick="return confirm('Are you sure?')">Delete</button>
</form> </form>
</td> </td>

4
demo/src/main/resources/templates/type.html
View File

@ -30,12 +30,12 @@
<td th:text="${type.name}"></td> <td th:text="${type.name}"></td>
<td> <td>
<form th:action="@{/admin/type/edit/{id}(id=${type.id})}" method="get"> <form th:action="@{/admin/type/edit/{id}(id=${type.id})}" method="get">
<button type="submit" class="btn btn-link button-link">Edit</button> <button type="submit" class="btn">Edit</button>
</form> </form>
</td> </td>
<td> <td>
<form th:action="@{/admin/type/delete/{id}(id=${type.id})}" method="post"> <form th:action="@{/admin/type/delete/{id}(id=${type.id})}" method="post">
<button type="submit" class="btn btn-link button-link" <button type="submit" class="btn"
onclick="return confirm('Are you sure?')">Delete</button> onclick="return confirm('Are you sure?')">Delete</button>
</form> </form>
</td> </td>

4
demo/src/main/resources/templates/user.html
View File

@ -33,13 +33,13 @@
<td> <td>
<form th:action="@{/admin/user/edit/{id}(id=${user.id})}" method="get"> <form th:action="@{/admin/user/edit/{id}(id=${user.id})}" method="get">
<input type="hidden" th:name="page" th:value="${page}"> <input type="hidden" th:name="page" th:value="${page}">
<button type="submit" class="btn btn-link button-link">Edit</button> <button type="submit" class="btn">Edit</button>
</form> </form>
</td> </td>
<td> <td>
<form th:action="@{/admin/user/delete/{id}(id=${user.id})}" method="post"> <form th:action="@{/admin/user/delete/{id}(id=${user.id})}" method="post">
<input type="hidden" th:name="page" th:value="${page}"> <input type="hidden" th:name="page" th:value="${page}">
<button type="submit" class="btn btn-link button-link" <button type="submit" class="btn"
onclick="return confirm('Are you sure?')">Delete</button> onclick="return confirm('Are you sure?')">Delete</button>
</form> </form>
</td> </td>