vlad/salvagedb_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: обновление стилей и адаптивности шаблона head.html - добавлен скрипт для Bootstrap, улучшены стили навигации и таблиц, оптимизированы отступы и цвета для лучшей читаемости и взаимодействия на мобильных устройствах

Browse Source
This commit is contained in:
Vlad 2025-04-20 02:16:29 +03:00
parent 9673a839c9
commit 640a411bdd
1 changed files with 35 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
templates/head.html
View File

@ -22,11 +22,9 @@
<link href="/static/bootstrap-responsive.min.css" rel="stylesheet"> <link href="/static/bootstrap-responsive.min.css" rel="stylesheet">
<link href="/static/plus.css" rel="stylesheet"> <link href="/static/plus.css" rel="stylesheet">
<link href="/static/plus2.css" rel="stylesheet"> <link href="/static/plus2.css" rel="stylesheet">
<script src="/static/bootstrap.bundle.min.js"></script>
<style type="text/css"> <style type="text/css">
@media (max-width: 768px) { @media (max-width: 768px) {
.navbar-inner {
padding: 0 10px;
}
.search_box { .search_box {
width: 100%; width: 100%;
max-width: 300px; max-width: 300px;
@ -66,9 +64,6 @@
max-width: 100%; max-width: 100%;
height: auto; height: auto;
} }
.navbar .nav > li > a {
padding: 10px 8px;
}
} }
.search-title { .search-title {
text-align: center; text-align: center;
@ -279,8 +274,8 @@
} }
.navbar { .navbar {
background: #fff; background: #333;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 2px 4px rgba(0,0,0,0.2);
position: relative; position: relative;
min-height: 50px; min-height: 50px;
margin-bottom: 20px; margin-bottom: 20px;
@ -301,7 +296,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: #333; color: #fff;
font-weight: 600; font-weight: 600;
} }
@ -324,36 +319,34 @@
.navbar .nav > li > a { .navbar .nav > li > a {
display: block; display: block;
padding: 15px 20px; padding: 15px 20px;
color: #333; color: #fff;
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 500;
transition: all 0.3s; transition: all 0.3s;
background: #fff;
} }
.navbar .nav > li > a:hover { .navbar .nav > li > a:hover {
color: #fff; background: rgba(255,255,255,0.1);
background: #007bff;
} }
.navbar .nav > li.active > a { .navbar .nav > li.active > a {
color: #fff; background: rgba(255,255,255,0.15);
background: #007bff;
} }
.navbar .btn-navbar { .navbar .btn-navbar {
display: none; display: none;
background: none; background: transparent;
border: none; border: none;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
margin-left: 15px;
} }
.navbar .btn-navbar .icon-bar { .navbar .btn-navbar .icon-bar {
display: block; display: block;
width: 22px; width: 22px;
height: 2px; height: 2px;
background-color: #333; background-color: #fff;
margin: 4px 0; margin: 4px 0;
transition: all 0.3s; transition: all 0.3s;
} }
@ -363,15 +356,18 @@
padding: 0 15px; padding: 0 15px;
} }
.navbar .nav { .navbar .btn-navbar {
display: block;
}
.navbar .nav-collapse {
position: fixed; position: fixed;
top: 50px; top: 50px;
left: 0; left: 0;
right: 0; right: 0;
background: #fff; background: #333;
flex-direction: column;
padding: 10px 0; padding: 10px 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.15); box-shadow: 0 2px 10px rgba(0,0,0,0.3);
transform: translateY(-100%); transform: translateY(-100%);
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
@ -379,36 +375,23 @@
z-index: 1000; z-index: 1000;
} }
.navbar .nav.active { .navbar .nav-collapse.in {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.navbar .nav {
flex-direction: column;
}
.navbar .nav > li {
width: 100%;
}
.navbar .nav > li > a { .navbar .nav > li > a {
padding: 15px 20px; padding: 12px 20px;
border-bottom: 1px solid #eee; border-bottom: 1px solid rgba(255,255,255,0.1);
font-size: 16px;
font-weight: 600;
}
.navbar .nav > li > a:hover {
color: #fff;
background: #007bff;
}
.navbar .nav > li.active > a {
color: #fff;
background: #007bff;
}
.navbar .btn-navbar {
background: #007bff;
border-radius: 4px;
}
.navbar .btn-navbar .icon-bar {
background-color: #fff;
} }
} }
</style> </style>
@ -433,22 +416,23 @@
<!-- End Matomo Code --> <!-- End Matomo Code -->
<script src="https://www.google.com/recaptcha/api.js"></script> <script src="https://www.google.com/recaptcha/api.js"></script>
<script src="/static/bootstrap.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
var btnNavbar = document.querySelector('.btn-navbar'); var btnNavbar = document.querySelector('.btn-navbar');
var nav = document.querySelector('.navbar .nav'); var navCollapse = document.querySelector('.nav-collapse');
if (btnNavbar && nav) { if (btnNavbar && navCollapse) {
btnNavbar.addEventListener('click', function() { btnNavbar.addEventListener('click', function() {
this.classList.toggle('active'); this.classList.toggle('active');
nav.classList.toggle('active'); navCollapse.classList.toggle('active');
}); });
// Закрытие меню при клике вне его // Закрытие меню при клике вне его
document.addEventListener('click', function(e) { document.addEventListener('click', function(e) {
if (!nav.contains(e.target) && !btnNavbar.contains(e.target)) { if (!navCollapse.contains(e.target) && !btnNavbar.contains(e.target)) {
btnNavbar.classList.remove('active'); btnNavbar.classList.remove('active');
nav.classList.remove('active'); navCollapse.classList.remove('active');
} }
}); });
} }