admin redesign

This commit is contained in:
themohooks 2024-07-20 22:55:19 +03:00
parent f65b34f777
commit ae98a78f99
4 changed files with 459 additions and 96 deletions

374
static/css/header.admin.css Normal file
View file

@ -0,0 +1,374 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*========== VARIABLES CSS ==========*/
@media screen and (min-width: 1024px) {
:root {
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
}
}
/*========== BASE ==========*/
*, ::before, ::after {
box-sizing: border-box;
}
body {
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: var(--body-color);
color: var(--text-color);
}
h3 {
margin: 0;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
/*========== HEADER ==========*/
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0 1rem;
z-index: 499;
background-color: #0d0d0f;
}
.header__container {
display: flex;
align-items: center;
height: var(--header-height);
justify-content: space-between;
}
.header__img {
width: 35px;
height: 35px;
border-radius: 0%;
}
.header__img-d {
width: 35px;
height: 35px;
border-radius: 0%;
}
.header__logo {
color: var(--title-color);
font-weight: var(--font-medium);
display: none;
}
.header__search {
display: flex;
padding: .40rem .75rem;
background-color: var(--first-color-light);
border-radius: .25rem;
width: 33vh;
}
.header__input {
width: 100%;
border: none;
outline: none;
background-color: var(--first-color-light);
}
.header__input::placeholder {
font-family: var(--body-font);
color: var(--text-color);
}
.header__icon,
.header__toggle {
font-size: 1.5rem;
}
.header__toggle {
color: var(--title-color);
cursor: pointer;
margin-top: 15px;
}
#header-toggle {
z-index: 999999999 !important;
position: relative;
}
/*========== NAV ==========*/
.nav {
position: fixed;
top: 0;
left: -100%;
height: 100vh;
padding: 1rem 1rem 0;
border-radius: 0px;
background-color: #fff;
width: 300px;
z-index: 500;
animation-delay: 1s;
transition: 0.4s;
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.nav__container {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: auto;
scrollbar-width: none; /* For mozilla */
}
/* For Google Chrome and others */
.nav__container::-webkit-scrollbar {
display: none;
}
.nav__logo {
font-weight: var(--font-semi-bold);
margin-bottom: 2rem;
}
.nav__list,
.nav__items {
display: grid;
}
.nav__list {
row-gap: 2.5rem;
}
.nav__items {
row-gap: 1.25rem;
}
.nav__subtitle {
font-size: var(--normal-font-size);
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--text-color-light);
}
.sidebartext {
color: var(--text-color);
}
.nav__link {
display: flex;
align-items: center;
color: var(--text-color);
transition: 0.3s;
}
.nav__link:hover {
color: var(--first-color);
transition: 0.3s;
cursor: pointer;
}
.nav__icon {
font-size: 1.2rem;
margin-right: .5rem;
}
.nav__name {
font-size: 15px;
font-weight: var(--font-medium);
white-space: nowrap;
}
.nav__logout {
margin-top: 5rem;
}
/* Dropdown */
.nav__dropdown {
overflow: hidden;
max-height: 21px;
transition: 0.4s;
transition-timing-function: cubic-bezier(.95,.08,.51,.84);
}
.nav__dropdown-collapse {
background-color: #101010;
border-radius: 15px;
margin-top: 1rem;
transition: 0.4s;
transition-timing-function: cubic-bezier(.95,.08,.51,.84);
}
.nav__dropdown-content {
display: grid;
row-gap: .5rem;
padding: .75rem 2.5rem .75rem 1.8rem;
transition: 0.4s;
transition-timing-function: cubic-bezier(.95,.08,.51,.84);
}
.nav__dropdown-item {
font-size: var(--smaller-font-size);
font-weight: var(--font-medium);
color: var(--text-color);
transition: 0.4s;
transition-timing-function: cubic-bezier(.95,.08,.51,.84);
}
.nav__dropdown-item:hover {
color: var(--first-color);
transition: 0.4s;
transition-timing-function: cubic-bezier(.95,.08,.51,.84);
}
.nav__dropdown-icon {
margin-left: auto;
transition: 0.4s;
transition-timing-function: cubic-bezier(.95,.08,.51,.84);
}
/* Show dropdown collapse */
.nav__dropdown:hover {
max-height: 100rem;
transition: 0.4s;
transition-timing-function: cubic-bezier(.95,.08,.51,.84);
}
/* Rotate icon arrow */
.nav__dropdown:hover .nav__dropdown-icon {
transform: rotate(180deg);
}
/*===== Show menu =====*/
.show-menu {
left: 0;
}
.active-s {
display: block;
}
/*===== Active link =====*/
.active {
color: var(--first-color);
}
/* ========== MEDIA QUERIES ==========*/
/* For small devices reduce search*/
@media screen and (max-width: 320px) {
.header__search {
width: 70%;
}
}
@media screen and (max-width: 768px) {
.mobile_bar-out.active-s {
width: 100%;
height: 100vh;
top: 0;
right: 0;
position: fixed;
background: rgb(0 0 0 / 5%);
backdrop-filter: blur(8px);
z-index: 499;
transition: 0.4s;
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
}
@media screen and (min-width: 768px) {
body {
padding: 1rem 3rem 0 12rem;
}
.header {
padding: 0 3rem 0 6rem;
}
.header__container {
height: calc(var(--header-height) + .5rem);
}
.header__search {
width: 600px;
padding: .55rem .75rem;
}
.header__toggle {
display: none;
}
.header__logo {
display: block;
}
.header__img-d {
width: 40px;
height: 40px;
order: 1;
display: none !important;
}
.header__img {
width: 40px;
height: 40px;
order: 1;
}
.nav {
left: 0;
padding: 1.2rem 1.5rem 0;
width: 68px; /* Reduced navbar */
}
.nav__items {
row-gap: 1.5rem;
}
.nav__icon {
font-size: 1.3rem;
}
/* Element opacity */
.nav__logo-name,
.nav__name,
.nav__subtitle,
.nav__dropdown-icon,
.sidebartext {
opacity: 0;
transition: 0.4s;
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* Navbar expanded */
.nav {
width: 205px;
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* Visible elements */
.nav__logo-name {
opacity: 1;
}
.nav__subtitle {
opacity: 1;
}
.sidebartext {
opacity: 1;
}
.nav__name {
opacity: 1;
}
.nav__dropdown-icon {
opacity: 1;
transition: 0.4s;
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
}

View file

@ -7,33 +7,93 @@ $nonreviewedimgs = DB::query('SELECT COUNT(*) FROM photos WHERE moderated=0')[0]
$nonr = '<span class="mm-notify notify-count">'.$nonreviewedimgs.'</span>';
}
?>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
body {
font-family: Inter !important;
}
<ul class="list-unstyled fw-normal pb-1 small">
<li><a style="font-size: 17.2px; margin-bottom: 15px; color: <?php if (!Page::exists('Admin/' . $_GET['type']) || !isset($_GET['type'])) { ?> #3862eb <?php } else { ?> #aca8a9 <?php } ?> !important; font-weight: 500;" href="/admin" class="d-inline-flex align-items-center rounded active text-black" aria-current="page">
<div style="border-left:3px solid #ffffff00; margin-left: -25px; margin-right: 20px; height:20px; border-radius: 500px;"></div>
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/static/css/header.admin.css">
<div class="layout__left-column layout__sticky">
<header style="background-color: #0d1012;" class="header">
<div class="header__container">
<svg style="margin-right: 10px; margin-left: -12px; margin-bottom: -5px;" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="<?php if (!Page::exists('Admin/' . $_GET['type']) || !isset($_GET['type'])) { ?> #3862eb <?php } else { ?> #aca8a9 <?php } ?>">
<g>
<path d="M0,0h24v24H0V0z" fill="none" />
</g>
<g>
<path d="M10.25,13c0,0.69-0.56,1.25-1.25,1.25S7.75,13.69,7.75,13S8.31,11.75,9,11.75S10.25,12.31,10.25,13z M15,11.75 c-0.69,0-1.25,0.56-1.25,1.25s0.56,1.25,1.25,1.25s1.25-0.56,1.25-1.25S15.69,11.75,15,11.75z M22,12c0,5.52-4.48,10-10,10 S2,17.52,2,12S6.48,2,12,2S22,6.48,22,12z M20,12c0-0.78-0.12-1.53-0.33-2.24C18.97,9.91,18.25,10,17.5,10 c-3.13,0-5.92-1.44-7.76-3.69C8.69,8.87,6.6,10.88,4,11.86C4.01,11.9,4,11.95,4,12c0,4.41,3.59,8,8,8S20,16.41,20,12z" />
</g>
</svg>
Пользователи
</a></li>
<li><a style="font-size: 17.2px; margin-bottom: 15px; color: <?php if ($_GET['type'] === 'Photo') { ?> #3862eb <?php } else { ?> #aca8a9 <?php } ?> !important; font-weight: 500;" href="?type=Photo" class="d-inline-flex align-items-center rounded active text-black" aria-current="page">
<div style="border-left:3px solid #ffffff00; margin-left: -25px; margin-right: 20px; height:20px; border-radius: 500px;"></div>
<div class="header__toggle">
<i class='bx bx-menu' id="header-toggle"></i>
</div>
</div>
</header>
<div class="nav" id="navbar">
<svg style="margin-right: 10px; margin-left: -12px; margin-bottom: -5px;" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="<?php if ($_GET['type'] === 'Photo') { ?> #3862eb <?php } else { ?> #aca8a9 <?php } ?>"><path d="M0 0h24v24H0V0z" fill="none"/><circle cx="12" cy="12" r="3"/><path d="M20 4h-3.17l-1.24-1.35c-.37-.41-.91-.65-1.47-.65H9.88c-.56 0-1.1.24-1.48.65L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>
Фотографии
</a><?=$nonr?></li>
<nav class="nav__container">
<div>
<a href="#" class="nav__link nav__logo">
<h5><b><?=NGALLERY['root']['title']?></b></h5>
</a>
</ul>
<div class="nav__list">
<div class="nav__items">
<h3 class="nav__subtitle"></h3>
<a href="/admin" class="nav__link">
<i class="bx bx-user-pin nav__icon"></i>
<span class="nav__name">Пользователи</span>
</a>
<a href="/admin?type=Photo" class="nav__link">
<i class="bx bx-camera nav__icon"></i>
<span class="nav__name">Фотографии</span>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<script>
/*==================== SHOW NAVBAR ====================*/
const showMenu = (headerToggle, navbarId) =>{
const toggleBtn = document.getElementById(headerToggle),
nav = document.getElementById(navbarId)
// Validate that variables exist
if(headerToggle && navbarId){
toggleBtn.addEventListener('click', ()=>{
// We add the show-menu class to the div tag with the nav__menu class
nav.classList.toggle('show-menu')
// change icon
toggleBtn.classList.toggle('bx-x')
})
}
}
showMenu('header-toggle','navbar')
/*==================== LINK ACTIVE ====================*/
const linkColor = document.querySelectorAll('.nav__link')
function colorLink(){
linkColor.forEach(l => l.classList.remove('active'))
this.classList.add('active')
}
linkColor.forEach(l => l.addEventListener('click', colorLink))
</script>

View file

@ -13,88 +13,17 @@ if (!isset($_GET['type']) || $_GET['type'] != 'Photo') {
<!DOCTYPE html>
<html lang="ru">
<head>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/views/components/LoadHead.php'); ?>
</head>
<body>
<div id="backgr"></div>
<table class="tmain">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/views/components/Navbar.php'); ?>
<div id="backgr"></div>
<tr>
<td class="main">
<style>
.fw-normal {
font-weight: 400 !important;
}
.pb-1 {
padding-bottom: .25rem !important;
}
.list-unstyled {
padding-left: 0;
list-style: none;
}
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1* var(--bs-gutter-y));
margin-right: calc(-.5* var(--bs-gutter-x));
margin-left: calc(-.5* var(--bs-gutter-x));
}
@media (min-width: 768px) {
.col-md-3 {
flex: 0 0 auto;
width: 25%;
}
.col-md-9 {
flex: 0 0 auto;
width: 75%;
}
}
</style>
<div id="container-app">
<div class="container mt-3">
<div class="row mt-3">
<div class="col-md-3">
<div style="top: 1rem; margin-left: 15px;">
<aside style="background-color: #ffffff00 !important;" class="bd-sidebar">
<nav class="bd-links" id="bd-docs-nav" aria-label="Docs navigation">
<ul class="list-unstyled mb-0 py-3 pt-md-1">
<li class="mb-1">
<div class="collapse show" id="getting-started-collapse">
<div class="container">
<?=\App\Controllers\AdminController::loadMenu();?>
<?=\App\Controllers\AdminController::loadContent();?>
</div>
</div>
</li>
</ul>
</nav>
</aside>
</div>
</div>
<div class="col-md-9">
<?=\App\Controllers\AdminController::loadContent();?> </div>
</div>
</div>
</div></td></tr>
</table>
<br><br><br>
<script src="/static/js/ripple.js"></script>
</body>
</html>

View file

@ -176,7 +176,7 @@ $userprofile = new User(explode('/', $_SERVER['REQUEST_URI'])[2]);
if (json_decode($userprofile->i('content'), true)['aboutmemo']['value'] != null) { ?>
<div class="p20">
<h4>О себе</h4>
<?=nl2br(json_decode($userprofile->i('content'), true)['aboutmemo']['value'])?>
<?=nl2br(htmlspecialchars(json_decode($userprofile->i('content'), true)['aboutmemo']['value']))?>
</div>
<?php } ?>
</td>