mirror of
https://github.com/WerySkok/nativegallery.git
synced 2024-11-14 19:19:15 +03:00
admin redesign
This commit is contained in:
themohooks
parent
f65b34f777
commit
ae98a78f99
4 changed files with 459 additions and 96 deletions
374
static/css/header.admin.css
Normal file
374
static/css/header.admin.css
Normal 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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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">
|
||||
</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">
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<div class="header__toggle">
|
||||
<i class='bx bx-menu' id="header-toggle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav" id="navbar">
|
||||
|
||||
<nav class="nav__container">
|
||||
<div>
|
||||
<a href="#" class="nav__link nav__logo">
|
||||
<h5><b><?=NGALLERY['root']['title']?></b></h5>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<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="nav__list">
|
||||
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
</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>
|
||||
|
|
@ -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="container">
|
||||
<?=\App\Controllers\AdminController::loadMenu();?>
|
||||
<?=\App\Controllers\AdminController::loadContent();?>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="collapse show" id="getting-started-collapse">
|
||||
<?=\App\Controllers\AdminController::loadMenu();?>
|
||||
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue