LabWork04-05 / Change styles
This commit is contained in:
parent
1c5ec72d08
commit
c4d148f611
BIN
demo/data.mv.db
BIN
demo/data.mv.db
Binary file not shown.
@ -5,12 +5,22 @@ body {
|
||||
background-color: #363434;
|
||||
}
|
||||
|
||||
._container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: 1680px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
margin: 20px auto;
|
||||
font-size: 25px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -23,6 +33,31 @@ td form {
|
||||
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 {
|
||||
width: 150px;
|
||||
}
|
||||
@ -39,24 +74,78 @@ td form {
|
||||
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 {
|
||||
background-color: #2c2a2a !important;
|
||||
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;
|
||||
}
|
||||
|
||||
.my-navbar .logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.my-footer {
|
||||
.footer {
|
||||
background-color: #2c2a2a;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
padding: 30px 0px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cart-image {
|
||||
|
||||
@ -16,56 +16,63 @@
|
||||
</head>
|
||||
|
||||
<body class="h-100 d-flex flex-column">
|
||||
<nav class="navbar navbar-expand-md my-navbar" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<img src="/logo.png" alt="Bookshelf" class="d-inline-block align-top me-1 logo">
|
||||
Bookshelf
|
||||
</a>
|
||||
<th:block sec:authorize="isAuthenticated()" th:with="userName=${#authentication.name}">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar"
|
||||
aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="main-navbar">
|
||||
<ul class="navbar-nav 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
|
||||
<div class="header">
|
||||
<nav class="navbar navbar-expand-md my-navbar _container" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand d-flex align-center" href="/">
|
||||
<img src="/logo.png" alt="Bookshelf" class="d-inline-block align-top me-1 logo">
|
||||
<div class="logo__nametag">
|
||||
<div class="nametag__title">Bookshelf</div>
|
||||
<div class="nametag__subtitle">Online-library</div>
|
||||
</div>
|
||||
</a>
|
||||
<th:block sec:authorize="isAuthenticated()" th:with="userName=${#authentication.name}">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-navbar"
|
||||
aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="main-navbar">
|
||||
<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)}]] ₽
|
||||
</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-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)}]] ₽
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</th:block>
|
||||
</div>
|
||||
</nav>
|
||||
</ul>
|
||||
</div>
|
||||
</th:block>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main class="container-fluid p-2" layout:fragment="content">
|
||||
<main class="container-fluid p-2 _container" layout:fragment="content">
|
||||
</main>
|
||||
|
||||
<footer class="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
made by Factorino, [[${#dates.year(#dates.createNow())}]]
|
||||
<footer class="footer mt-auto">
|
||||
<div class="d-flex flex-shrink-0 justify-content-center align-items-center _container">
|
||||
made by Factorino, [[${#dates.year(#dates.createNow())}]]
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main layout:fragment="content">
|
||||
<main layout:fragment="content" >
|
||||
<th:block th:switch="${messageItems.size()}">
|
||||
<h2 th:case="0">No data available</h2>
|
||||
<th:block th:case="*">
|
||||
@ -36,14 +36,14 @@
|
||||
<td>
|
||||
<form th:action="@{/admin/message/publish/{id}(id=${message.id})}" method="post">
|
||||
<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>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<form th:action="@{/admin/message/delete/{id}(id=${message.id})}" method="post">
|
||||
<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>
|
||||
</form>
|
||||
</td>
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
<form th:action="@{/delete/{id}(id=${order.id})}" method="post">
|
||||
<input type="hidden" th:name="page" th:value="${page}">
|
||||
<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>
|
||||
</form>
|
||||
</td>
|
||||
|
||||
@ -30,12 +30,12 @@
|
||||
<td th:text="${type.name}"></td>
|
||||
<td>
|
||||
<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>
|
||||
</td>
|
||||
<td>
|
||||
<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>
|
||||
</form>
|
||||
</td>
|
||||
|
||||
@ -33,13 +33,13 @@
|
||||
<td>
|
||||
<form th:action="@{/admin/user/edit/{id}(id=${user.id})}" method="get">
|
||||
<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>
|
||||
</td>
|
||||
<td>
|
||||
<form th:action="@{/admin/user/delete/{id}(id=${user.id})}" method="post">
|
||||
<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>
|
||||
</form>
|
||||
</td>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user