diff --git a/static/css/header.admin.css b/static/css/header.admin.css new file mode 100644 index 0000000..609305b --- /dev/null +++ b/static/css/header.admin.css @@ -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); + } +} \ No newline at end of file diff --git a/views/components/AdminSidebar.php b/views/components/AdminSidebar.php index 9f43b2b..8201f38 100644 --- a/views/components/AdminSidebar.php +++ b/views/components/AdminSidebar.php @@ -7,33 +7,93 @@ $nonreviewedimgs = DB::query('SELECT COUNT(*) FROM photos WHERE moderated=0')[0] $nonr = ''.$nonreviewedimgs.''; } ?> + + + + + + + +
+
+
-
  • -
    + + + +
    + +
    +
    • +
    + + + + +
    + + \ No newline at end of file diff --git a/views/pages/Admin/Index.php b/views/pages/Admin/Index.php index f8f2c83..ea5ea77 100644 --- a/views/pages/Admin/Index.php +++ b/views/pages/Admin/Index.php @@ -13,88 +13,17 @@ if (!isset($_GET['type']) || $_GET['type'] != 'Photo') { - - - - -
    - - -
    - - -
    - - -
    -
    - -
    - -
    - -
    - - -
    -
    -
    -
    -
    -
    -
    -


    - \ No newline at end of file diff --git a/views/pages/Profile/Index.php b/views/pages/Profile/Index.php index 656d669..ed1de46 100644 --- a/views/pages/Profile/Index.php +++ b/views/pages/Profile/Index.php @@ -176,7 +176,7 @@ $userprofile = new User(explode('/', $_SERVER['REQUEST_URI'])[2]); if (json_decode($userprofile->i('content'), true)['aboutmemo']['value'] != null) { ?>

    О себе

    -i('content'), true)['aboutmemo']['value'])?> +i('content'), true)['aboutmemo']['value']))?>