Merge pull request 'TIST-14: admin panel frontend' (#7) from TIST-14 into develop
Reviewed-on: #7 Reviewed-by: steve_dekart <stevedekart2020@gmail.com>
This commit is contained in:
commit
32c0529a4e
@ -36,7 +36,7 @@ $sidebar_links = [
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?php echo get_title_website($title); ?></title>
|
||||
<link rel="shortcut icon" type="image/png" href="<?php echo ASSETS_PATH . '/favicon.png' ?>">
|
||||
<link rel="shortcut icon" type="image/x-icon" href="<?php echo ASSETS_PATH . '/images/favicon.ico' ?>">
|
||||
|
||||
<!-- Google fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
@ -56,7 +56,7 @@ $sidebar_links = [
|
||||
</head>
|
||||
<body>
|
||||
<header class="header-admin">
|
||||
<div class="logo">
|
||||
<div class="logo-admin">
|
||||
FridgeBites Admin
|
||||
</div>
|
||||
<div class="header-admin__control">
|
||||
@ -64,9 +64,9 @@ $sidebar_links = [
|
||||
Hello, <span><?php echo CURRENT_USER->field_username ?></span>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a href="<?php the_permalink('index:home') ?>">View site</a>
|
||||
<a href="<?php the_permalink('index:home') ?>" class="hover-anim">View site</a>
|
||||
|
|
||||
<a href="<?php the_permalink('users:logout') ?>">Log Out</a>
|
||||
<a href="<?php the_permalink('users:logout') ?>" class="hover-anim">Log Out</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
<div class="admin-container">
|
||||
<section>
|
||||
<h2>Stats per month</h2>
|
||||
<h2 class="title">Stats per month</h2>
|
||||
|
||||
<div id="dashboard-stats">
|
||||
<div class="dashboard-stats__item top-sales">
|
||||
@ -48,23 +48,23 @@
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>Quick tools</h2>
|
||||
<h2 class="title">Quick tools</h2>
|
||||
|
||||
<div id="quicktools">
|
||||
<a href="<?php the_permalink('admin:product-new') ?>" class="btn">
|
||||
<a href="<?php the_permalink('admin:product-new') ?>" class="btn btn-secondary hover-anim">
|
||||
<i class="fa-solid fa-plus"></i> New Product
|
||||
</a>
|
||||
<form action="<?php the_permalink('admin:product-list') ?>" method="get">
|
||||
<div class="input">
|
||||
<div class="input-admin">
|
||||
<input type="text" name="s" placeholder="Search for products">
|
||||
<button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
|
||||
<button class="hover-anim" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Latest orders</h2>
|
||||
<h2 class="title">Latest orders</h2>
|
||||
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<?php the_admin_header(ucfirst($context['verbose_name_multiply'])) ?>
|
||||
|
||||
<div class="admin-container">
|
||||
<h1 class="p-title"><?php echo ucfirst($context['verbose_name_multiply']) ?></h1>
|
||||
<h1 class="title"><?php echo ucfirst($context['verbose_name_multiply']) ?></h1>
|
||||
|
||||
<section>
|
||||
<div id="quicktools">
|
||||
<?php if(isset($context['create_router_name'])): ?>
|
||||
<a href="<?php the_permalink($context['create_router_name']) ?>" class="btn">
|
||||
<a href="<?php the_permalink($context['create_router_name']) ?>" class="btn btn-secondary hover-anim">
|
||||
<i class="fa-solid fa-plus"></i> New <?php echo ucfirst($context['verbose_name']) ?>
|
||||
</a>
|
||||
<?php else: ?>
|
||||
<span></span>
|
||||
<?php endif; ?>
|
||||
<form method="get">
|
||||
<div class="input">
|
||||
<div class="input-admin">
|
||||
<input type="text" name="s" placeholder="Search for <?php echo $context['verbose_name_multiply'] ?>" value="<?php echo isset($_GET['s']) ? $_GET['s'] : '' ?>">
|
||||
<button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
|
||||
<button type="submit" class="hover-anim"><i class="fa-solid fa-magnifying-glass"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@ $disabled_attr = $context['can_save'] ? '' : 'disabled';
|
||||
?>
|
||||
|
||||
<div class="admin-container">
|
||||
<h1 class="p-title">
|
||||
<h1 class="title">
|
||||
<?php if($context['object']->is_saved()): ?>
|
||||
<?php the_safe($context['edit_title']) ?>
|
||||
<?php else: ?>
|
||||
@ -112,12 +112,12 @@ $disabled_attr = $context['can_save'] ? '' : 'disabled';
|
||||
<div class="admin-block__content">
|
||||
<div class="btn-control">
|
||||
<?php if($context['object']->is_saved()): ?>
|
||||
<a href="<?php the_permalink('admin:delete', [str_replace('_', '-', $context['object']->get_table_name()), $context['object']->get_id()]) ?>" class="btn btn-danger" type="submit">Delete</a>
|
||||
<a href="<?php the_permalink('admin:delete', [str_replace('_', '-', $context['object']->get_table_name()), $context['object']->get_id()]) ?>" class="btn btn-secondary hover-anim" type="submit">Delete</a>
|
||||
<?php else: ?>
|
||||
<span></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<button class="btn btn-primary" type="submit" <?php echo $disabled_attr ?>>Save</button>
|
||||
<button class="btn btn-primary hover-anim" type="submit" <?php echo $disabled_attr ?>>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
<?php endif ?>
|
||||
</div>
|
||||
<div class="btn-control">
|
||||
<a href="<?php the_permalink('admin:banlist', [$user->get_id()]) ?>" class="btn">Show all</a>
|
||||
<a href="<?php the_permalink('admin:ban-new', [$user->get_id()]) ?>" class="btn btn-primary">New ban</a>
|
||||
<a href="<?php the_permalink('admin:banlist', [$user->get_id()]) ?>" class="btn btn-secondary hover-anim">Show all</a>
|
||||
<a href="<?php the_permalink('admin:ban-new', [$user->get_id()]) ?>" class="btn btn-primary hover-anim">New ban</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,3 +1,22 @@
|
||||
:root {
|
||||
--panel-text: #008b70;
|
||||
--input-background: #f7f7f7;
|
||||
--input-border: #b3b3b3;
|
||||
--input-placeholder: #b3b3b3;
|
||||
--panel-background: #eaf8eb;
|
||||
--input-text-color: #000;
|
||||
--title-color: #015847;
|
||||
--meta-color: #727272;
|
||||
--common-text: #000;
|
||||
--panel-title-color: #000;
|
||||
--button-primary: #0DBB99;
|
||||
--button-secondary: #ECECEC;
|
||||
|
||||
|
||||
--title-font: 'Roboto Slab', sans-serif;
|
||||
--common-font: 'Roboto Condensed', serif;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@ -13,8 +32,8 @@ body {
|
||||
width: 100%;
|
||||
}
|
||||
.header-admin {
|
||||
background: var(--dark-block-background);
|
||||
height: 64px;
|
||||
|
||||
height: 80px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -26,22 +45,28 @@ body {
|
||||
display: flex;
|
||||
}
|
||||
.header-admin__control .username {
|
||||
color: var(--h-color);
|
||||
font-family: var(--font-family-header);
|
||||
color: var(--common-text);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: var(--common-font);
|
||||
margin-right: 10px;
|
||||
}
|
||||
.header-admin__control .username span {
|
||||
color: var(--link-color);
|
||||
color: var(--title-color);
|
||||
}
|
||||
.header-admin__control .links a {
|
||||
color: var(--h-color);
|
||||
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
font-family: var(--common-font);
|
||||
color: var(--common-text);
|
||||
}
|
||||
.admin-sidebar {
|
||||
width: 100%;
|
||||
max-width: 314px;
|
||||
flex-shrink: 0;
|
||||
background: var(--block-background);
|
||||
background: var(--panel-background);
|
||||
}
|
||||
.admin-sidebar .btn {
|
||||
display: block;
|
||||
@ -53,13 +78,13 @@ body {
|
||||
.admin-sidebar__list a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
color: var(--h-color);
|
||||
color: var(--panel-text);
|
||||
font-size: 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.admin-sidebar__list a:hover,
|
||||
.admin-sidebar__list a.active {
|
||||
background: #ffffff2e;
|
||||
color: #000;
|
||||
}
|
||||
.admin-sidebar__list a i {
|
||||
width: 34px;
|
||||
@ -92,8 +117,8 @@ body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
color: var(--h-color);
|
||||
background: var(--block-background);
|
||||
color: var(--common-text);
|
||||
background: var(--panel-background);
|
||||
border-radius: 5px;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
@ -125,11 +150,11 @@ body {
|
||||
justify-content: space-between;
|
||||
|
||||
padding: 14px 22px;
|
||||
background: var(--block-background);
|
||||
border-radius: 5px;
|
||||
background: var(--panel-background);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.admin-table {
|
||||
color: var(--h-color);
|
||||
color: var(--common-text);
|
||||
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
@ -139,12 +164,17 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.admin-table thead {
|
||||
background: var(--block-background);
|
||||
background: #0DBB99;
|
||||
color: #eaf8eb;
|
||||
}
|
||||
.admin-table td,
|
||||
.admin-table th {
|
||||
padding: 15px 10px;
|
||||
}
|
||||
|
||||
.admin-table a{
|
||||
color: var(--title-color);
|
||||
}
|
||||
.admin-block__content .admin-block__table {
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
@ -152,14 +182,14 @@ body {
|
||||
}
|
||||
.admin-table tbody tr:nth-child(odd),
|
||||
.admin-block__table .row:nth-child(odd) {
|
||||
background: #9f9f9f;
|
||||
background: #eaf8eb;
|
||||
}
|
||||
.admin-table tbody tr:nth-child(even),
|
||||
.admin-block__table .row:nth-child(even) {
|
||||
background: #767676;
|
||||
background: #b6f1ba;
|
||||
}
|
||||
.admin-block__table {
|
||||
color: var(--h-color);
|
||||
color: var(--common-text);
|
||||
}
|
||||
.admin-block__table .row {
|
||||
display: flex;
|
||||
@ -173,18 +203,19 @@ body {
|
||||
.admin-block {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--block-background);
|
||||
border: 1px solid #015847;
|
||||
margin-bottom: 20px;
|
||||
background: #f1fff2
|
||||
}
|
||||
.admin-block__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.admin-block__title {
|
||||
font-size: 18px;
|
||||
font-family: var(--font-family-header);
|
||||
background: var(--block-background);
|
||||
font-family: var(--common-font);
|
||||
background-color: #015847;
|
||||
padding: 10px 10px;
|
||||
color: var(--h-color);
|
||||
color: #eaf8eb;
|
||||
}
|
||||
.admin-block__table .row {
|
||||
padding: 10px;
|
||||
@ -210,10 +241,55 @@ body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.order-stat span:first-child {
|
||||
color: var(--text-color);
|
||||
color: var(--common-text);
|
||||
font-weight: 400;
|
||||
font-family: var(--font-family-header);
|
||||
font-family: var(--common-font);
|
||||
}
|
||||
.order-stat span:last-child {
|
||||
color: var(--h-color);
|
||||
color: var(--title-color);
|
||||
}
|
||||
.header-admin{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background-color: var(--panel-background);
|
||||
}
|
||||
|
||||
.logo-admin{
|
||||
color: var(--title-color);
|
||||
font-family: var(--title-font);
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
.input-admin input{
|
||||
background: var(--input-background);
|
||||
border: 1px solid var(--input-border);
|
||||
color: var(--input-text-color);
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input-admin button{
|
||||
border: 1px solid var(--input-border);
|
||||
}
|
||||
.admin-container .title{
|
||||
text-align: start;
|
||||
|
||||
}
|
||||
.input-admin button{
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.admin-block__content .btn-control {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user