web_programming/fridge_bites
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TIST-14: admin panel frontend #7

Merged
steve_dekart merged 2 commits from TIST-14 into develop 2025-06-17 18:58:09 +02:00
Conversation 2 Commits 2 Files Changed 6 +120 -44
6 changed files with 120 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/Admin/Templates/components/admin-header.php
View File

@ -8,7 +8,7 @@ use Lycoreco\Includes\Routing\Router;
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo get_title_website($title); ?></title> <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 --> <!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@ -28,7 +28,7 @@ use Lycoreco\Includes\Routing\Router;
</head> </head>
<body> <body>
<header class="header-admin"> <header class="header-admin">
<div class="logo"> <div class="logo-admin">
FridgeBites Admin FridgeBites Admin
</div> </div>
<div class="header-admin__control"> <div class="header-admin__control">
@ -36,9 +36,9 @@ use Lycoreco\Includes\Routing\Router;
Hello, <span><?php echo CURRENT_USER->field_username ?></span> Hello, <span><?php echo CURRENT_USER->field_username ?></span>
</div> </div>
<div class="links"> <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>
</div> </div>
</header> </header>

12
apps/Admin/Templates/home.php
View File

@ -2,7 +2,7 @@
<div class="admin-container"> <div class="admin-container">
<section> <section>
<h2>Stats per month</h2> <h2 class="title">Stats per month</h2>
<div id="dashboard-stats"> <div id="dashboard-stats">
<div class="dashboard-stats__item top-sales"> <div class="dashboard-stats__item top-sales">
@ -48,23 +48,23 @@
</section> </section>
<section> <section>
<h2>Quick tools</h2> <h2 class="title">Quick tools</h2>
<div id="quicktools"> <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 <i class="fa-solid fa-plus"></i> New Product
</a> </a>
<form action="<?php the_permalink('admin:product-list') ?>" method="get"> <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"> <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> </div>
</form> </form>
</div> </div>
</section> </section>
<h2>Latest orders</h2> <h2 class="title">Latest orders</h2>
<table class="admin-table"> <table class="admin-table">
<thead> <thead>

8
apps/Admin/Templates/list-view.php
View File

@ -1,21 +1,21 @@
<?php the_admin_header(ucfirst($context['verbose_name_multiply'])) ?> <?php the_admin_header(ucfirst($context['verbose_name_multiply'])) ?>
<div class="admin-container"> <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> <section>
<div id="quicktools"> <div id="quicktools">
<?php if(isset($context['create_router_name'])): ?> <?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']) ?> <i class="fa-solid fa-plus"></i> New <?php echo ucfirst($context['verbose_name']) ?>
</a> </a>
<?php else: ?> <?php else: ?>
<span></span> <span></span>
<?php endif; ?> <?php endif; ?>
<form method="get"> <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'] : '' ?>"> <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> </div>
</form> </form>
</div> </div>

6
apps/Admin/Templates/single-view.php
View File

@ -5,7 +5,7 @@ $disabled_attr = $context['can_save'] ? '' : 'disabled';
?> ?>
<div class="admin-container"> <div class="admin-container">
<h1 class="p-title"> <h1 class="title">
<?php if($context['object']->is_saved()): ?> <?php if($context['object']->is_saved()): ?>
<?php the_safe($context['edit_title']) ?> <?php the_safe($context['edit_title']) ?>
<?php else: ?> <?php else: ?>
@ -112,12 +112,12 @@ $disabled_attr = $context['can_save'] ? '' : 'disabled';
<div class="admin-block__content"> <div class="admin-block__content">
<div class="btn-control"> <div class="btn-control">
<?php if($context['object']->is_saved()): ?> <?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: ?> <?php else: ?>
<span></span> <span></span>
<?php endif; ?> <?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> </div>
</div> </div>

4
apps/Admin/Templates/widgets/user_banlist.php
View File

@ -19,8 +19,8 @@
<?php endif ?> <?php endif ?>
</div> </div>
<div class="btn-control"> <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: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">New ban</a> <a href="<?php the_permalink('admin:ban-new', [$user->get_id()]) ?>" class="btn btn-primary hover-anim">New ban</a>
</div> </div>
</div> </div>
</div> </div>

126
assets/css/admin.css
View File

@ -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; box-sizing: border-box;
} }
@ -13,8 +32,8 @@ body {
width: 100%; width: 100%;
} }
.header-admin { .header-admin {
background: var(--dark-block-background);
height: 64px; height: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -26,22 +45,28 @@ body {
display: flex; display: flex;
} }
.header-admin__control .username { .header-admin__control .username {
color: var(--h-color); color: var(--common-text);
font-family: var(--font-family-header); font-size: 16px;
font-weight: 500;
font-family: var(--common-font);
margin-right: 10px; margin-right: 10px;
} }
.header-admin__control .username span { .header-admin__control .username span {
color: var(--link-color); color: var(--title-color);
} }
.header-admin__control .links a { .header-admin__control .links a {
color: var(--h-color);
text-decoration: none; text-decoration: none;
font-size: 16px;
font-weight: 500;
font-family: var(--common-font);
color: var(--common-text);
} }
.admin-sidebar { .admin-sidebar {
width: 100%; width: 100%;
max-width: 314px; max-width: 314px;
flex-shrink: 0; flex-shrink: 0;
background: var(--block-background); background: var(--panel-background);
} }
.admin-sidebar .btn { .admin-sidebar .btn {
display: block; display: block;
@ -53,13 +78,13 @@ body {
.admin-sidebar__list a { .admin-sidebar__list a {
display: block; display: block;
padding: 10px 20px; padding: 10px 20px;
color: var(--h-color); color: var(--panel-text);
font-size: 20px; font-size: 20px;
text-decoration: none; text-decoration: none;
} }
.admin-sidebar__list a:hover, .admin-sidebar__list a:hover,
.admin-sidebar__list a.active { .admin-sidebar__list a.active {
background: #ffffff2e; color: #000;
} }
.admin-sidebar__list a i { .admin-sidebar__list a i {
width: 34px; width: 34px;
@ -92,8 +117,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--h-color); color: var(--common-text);
background: var(--block-background); background: var(--panel-background);
border-radius: 5px; border-radius: 5px;
padding: 12px 20px; padding: 12px 20px;
} }
@ -125,11 +150,11 @@ body {
justify-content: space-between; justify-content: space-between;
padding: 14px 22px; padding: 14px 22px;
background: var(--block-background); background: var(--panel-background);
border-radius: 5px; border-radius: 10px;
} }
.admin-table { .admin-table {
color: var(--h-color); color: var(--common-text);
margin-bottom: 15px; margin-bottom: 15px;
font-size: 14px; font-size: 14px;
@ -139,12 +164,17 @@ body {
overflow: hidden; overflow: hidden;
} }
.admin-table thead { .admin-table thead {
background: var(--block-background); background: #0DBB99;
color: #eaf8eb;
} }
.admin-table td, .admin-table td,
.admin-table th { .admin-table th {
padding: 15px 10px; padding: 15px 10px;
} }
.admin-table a{
color: var(--title-color);
}
.admin-block__content .admin-block__table { .admin-block__content .admin-block__table {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
@ -152,14 +182,14 @@ body {
} }
.admin-table tbody tr:nth-child(odd), .admin-table tbody tr:nth-child(odd),
.admin-block__table .row:nth-child(odd) { .admin-block__table .row:nth-child(odd) {
background: #9f9f9f; background: #eaf8eb;
} }
.admin-table tbody tr:nth-child(even), .admin-table tbody tr:nth-child(even),
.admin-block__table .row:nth-child(even) { .admin-block__table .row:nth-child(even) {
background: #767676; background: #b6f1ba;
} }
.admin-block__table { .admin-block__table {
color: var(--h-color); color: var(--common-text);
} }
.admin-block__table .row { .admin-block__table .row {
display: flex; display: flex;
@ -173,18 +203,19 @@ body {
.admin-block { .admin-block {
overflow: hidden; overflow: hidden;
border-radius: 5px; border-radius: 5px;
border: 1px solid var(--block-background); border: 1px solid #015847;
margin-bottom: 20px; margin-bottom: 20px;
background: #f1fff2
} }
.admin-block__content { .admin-block__content {
padding: 10px; padding: 10px;
} }
.admin-block__title { .admin-block__title {
font-size: 18px; font-size: 18px;
font-family: var(--font-family-header); font-family: var(--common-font);
background: var(--block-background); background-color: #015847;
padding: 10px 10px; padding: 10px 10px;
color: var(--h-color); color: #eaf8eb;
} }
.admin-block__table .row { .admin-block__table .row {
padding: 10px; padding: 10px;
@ -210,10 +241,55 @@ body {
margin-top: 15px; margin-top: 15px;
} }
.order-stat span:first-child { .order-stat span:first-child {
color: var(--text-color); color: var(--common-text);
font-weight: 400; font-weight: 400;
font-family: var(--font-family-header); font-family: var(--common-font);
} }
.order-stat span:last-child { .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;
}