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

TIST-24: Fixed small issues on admin page #19

Merged
greendavid004 merged 2 commits from TIST-24 into develop 2025-06-29 13:43:48 +02:00
Conversation 4 Commits 2 Files Changed 8 +167 -50
8 changed files with 167 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,16 +32,20 @@ $sidebar_links = [
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<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/x-icon" href="<?php echo ASSETS_PATH . '/images/favicon.ico' ?>"> <link rel="shortcut icon" type="image/x-icon" href="<?php echo ASSETS_PATH . '/images/favicon.ico' ?>">
<!-- Google fonts -->
<!-- Google fonts --> <!-- Google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Slab:wght@100..900&display=swap"
rel="stylesheet">
<!-- Google fonts/ -->
<!-- Google fonts/ --> <!-- Google fonts/ -->
<!-- Font Awesome --> <!-- Font Awesome -->
@ -54,6 +58,7 @@ $sidebar_links = [
<link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/style.css' ?>"> <link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/style.css' ?>">
<link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/admin.css' ?>"> <link rel="stylesheet" href="<?php echo ASSETS_PATH . '/css/admin.css' ?>">
</head> </head>
<body> <body>
<header class="header-admin"> <header class="header-admin">
<div class="logo-admin"> <div class="logo-admin">
@ -73,12 +78,14 @@ $sidebar_links = [
<div class="wrapper-admin"> <div class="wrapper-admin">
<aside class="admin-sidebar"> <aside class="admin-sidebar">
<a href="<?php the_permalink('admin:recipe-new') ?>" class="btn btn-primary"><i class="fa-solid fa-plus"></i> New recipe</a> <a href="<?php the_permalink('admin:recipe-new') ?>" class="btn btn-primary"><i
class="fa-solid fa-plus"></i> New recipe</a>
<hr> <hr>
<ul class="admin-sidebar__list"> <ul class="admin-sidebar__list">
<?php foreach ($sidebar_links as $link): ?> <?php foreach ($sidebar_links as $link): ?>
<li> <li>
<a class="<?php echo Router::$current_router_name == $link['router_name'] ? "active" : "" ?>" href="<?php the_permalink($link['router_name']) ?>"> <a class="<?php echo Router::$current_router_name == $link['router_name'] ? "active" : "" ?>"
href="<?php the_permalink($link['router_name']) ?>">
<i class="<?= $link['icon'] ?>"></i> <?= $link['name'] ?> <i class="<?= $link['icon'] ?>"></i> <?= $link['name'] ?>
</a> </a>
</li> </li>
@ -86,7 +93,3 @@ $sidebar_links = [
</ul> </ul>
</aside> </aside>
<div class="wrapper-admin__content"> <div class="wrapper-admin__content">

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

@ -57,7 +57,7 @@
<form action="<?php the_permalink('admin:recipe-list') ?>" method="get"> <form action="<?php the_permalink('admin:recipe-list') ?>" method="get">
<div class="input-admin"> <div class="input-admin">
<input type="text" name="s" placeholder="Search for recipes"> <input type="text" name="s" placeholder="Search for recipes">
<button class="hover-anim" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button> <button class="btn btn-secondary hover-anim" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</div> </div>
</form> </form>

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

@ -15,7 +15,7 @@
<form method="get"> <form method="get">
<div class="input-admin"> <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" class="hover-anim"><i class="fa-solid fa-magnifying-glass"></i></button> <button type="submit" class="hover-anim btn btn-secondary"><i class="fa-solid fa-magnifying-glass"></i></button>
</div> </div>
</form> </form>
</div> </div>

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

@ -15,8 +15,8 @@
<?php endif ?> <?php endif ?>
</div> </div>
<div class="btn-control"> <div class="btn-control">
<a href="<?php the_permalink('admin:ing-cat-rel-list', [$recipe->get_id()]) ?>" class="btn">Show all</a> <a href="<?php the_permalink('admin:ing-cat-rel-list', [$recipe->get_id()]) ?>" class="btn btn-secondary hover-anim">Show all</a>
<a href="<?php the_permalink('admin:ing-cat-rel-new', [$recipe->get_id()]) ?>" class="btn btn-primary">Add ingredient</a> <a href="<?php the_permalink('admin:ing-cat-rel-new', [$recipe->get_id()]) ?>" class="btn btn-primary hover-anim">Add ingredient</a>
</div> </div>
</div> </div>
</div> </div>

2
apps/Admin/Templates/widgets/recipe_author.php
View File

@ -1,6 +1,6 @@
<div class="admin-block"> <div class="admin-block">
<div class="admin-block__title">Author</div> <div class="admin-block__title">Author</div>
<div class="admin-block__content"> <div class="admin-block__content">
<a href="<?php the_permalink('admin:user', [$author->get_id()]) ?>"><?php echo $author->field_username ?></a> <a href="<?php the_permalink('admin:user', [$author->get_id()]) ?>" class="recipe-author"><?php echo $author->field_username ?></a>
</div> </div>
</div> </div>

95
assets/css/admin.css
View File

@ -20,17 +20,24 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
min-height: 100vh; min-height: 100vh;
font-family: var(--common-font);
font-size: 14px;
color: var(--common-text);
} }
.wrapper-admin { .wrapper-admin {
display: flex; display: flex;
min-height: calc(100vh - 64px); min-height: calc(100vh - 64px);
} }
.wrapper-admin__content { .wrapper-admin__content {
width: 100%; width: 100%;
} }
.header-admin { .header-admin {
height: 80px; height: 80px;
@ -41,9 +48,11 @@ body {
padding: 15px 10px; padding: 15px 10px;
} }
.header-admin__control { .header-admin__control {
display: flex; display: flex;
} }
.header-admin__control .username { .header-admin__control .username {
color: var(--common-text); color: var(--common-text);
font-size: 16px; font-size: 16px;
@ -51,9 +60,11 @@ body {
font-family: var(--common-font); font-family: var(--common-font);
margin-right: 10px; margin-right: 10px;
} }
.header-admin__control .username span { .header-admin__control .username span {
color: var(--title-color); color: var(--title-color);
} }
.header-admin__control .links a { .header-admin__control .links a {
text-decoration: none; text-decoration: none;
@ -62,19 +73,23 @@ body {
font-family: var(--common-font); font-family: var(--common-font);
color: var(--common-text); 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(--panel-background); background: var(--panel-background);
} }
.admin-sidebar .btn { .admin-sidebar .btn {
display: block; display: block;
margin: 20px 20px 20px 20px; margin: 20px 20px 20px 20px;
} }
.admin-sidebar__list { .admin-sidebar__list {
list-style: none; list-style: none;
} }
.admin-sidebar__list a { .admin-sidebar__list a {
display: block; display: block;
padding: 10px 20px; padding: 10px 20px;
@ -82,37 +97,45 @@ body {
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 {
color: #000; color: #000;
} }
.admin-sidebar__list a i { .admin-sidebar__list a i {
width: 34px; width: 34px;
} }
.admin-sidebar__list a span { .admin-sidebar__list a span {
background: #f00; background: #f00;
padding: 2px 7px; padding: 2px 7px;
font-size: 15px; font-size: 15px;
border-radius: 100%; border-radius: 100%;
} }
.admin-container { .admin-container {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
max-width: 1100px; max-width: 1100px;
padding: 22px 30px; padding: 22px 30px;
} }
.admin-container h2 { .admin-container h2 {
font-size: 24px; font-size: 24px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.admin-container section { .admin-container section {
margin-bottom: 25px; margin-bottom: 25px;
} }
#dashboard-stats { #dashboard-stats {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 20px; gap: 20px;
} }
.dashboard-stats__item { .dashboard-stats__item {
display: flex; display: flex;
align-items: center; align-items: center;
@ -122,24 +145,30 @@ body {
border-radius: 5px; border-radius: 5px;
padding: 12px 20px; padding: 12px 20px;
} }
.dashboard-stats__item .icon { .dashboard-stats__item .icon {
font-size: 36px; font-size: 36px;
margin-right: 20px; margin-right: 20px;
flex-shrink: 0; flex-shrink: 0;
} }
.dashboard-stats__item .value { .dashboard-stats__item .value {
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
} }
.dashboard-stats__item.top-sales .icon { .dashboard-stats__item.top-sales .icon {
color: #FF7B00; color: #FF7B00;
} }
.dashboard-stats__item.new-users .icon { .dashboard-stats__item.new-users .icon {
color: #00A3E8; color: #00A3E8;
} }
.dashboard-stats__item.orders .icon { .dashboard-stats__item.orders .icon {
color: #BA00E8; color: #BA00E8;
} }
.dashboard-stats__item.profit .icon { .dashboard-stats__item.profit .icon {
color: #00E842; color: #00E842;
} }
@ -153,6 +182,7 @@ body {
background: var(--panel-background); background: var(--panel-background);
border-radius: 10px; border-radius: 10px;
} }
.admin-table { .admin-table {
color: var(--common-text); color: var(--common-text);
@ -163,43 +193,52 @@ body {
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
.admin-table thead { .admin-table thead {
background: #0DBB99; background: #0DBB99;
color: #eaf8eb; color: #eaf8eb;
} }
.admin-table td, .admin-table td,
.admin-table th { .admin-table th {
padding: 15px 10px; padding: 15px 10px;
} }
.admin-table a{ .admin-table a {
color: var(--title-color); 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;
margin-bottom: 10px; margin-bottom: 10px;
} }
.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: #eaf8eb; 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: #b6f1ba; background: #b6f1ba;
} }
.admin-block__table { .admin-block__table {
color: var(--common-text); color: var(--common-text);
} }
.admin-block__table .row { .admin-block__table .row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.admin-single { .admin-single {
display: grid; display: grid;
grid-template-columns: 1fr 320px; grid-template-columns: 1fr 320px;
gap: 20px; gap: 20px;
} }
.admin-block { .admin-block {
overflow: hidden; overflow: hidden;
border-radius: 5px; border-radius: 5px;
@ -207,9 +246,11 @@ body {
margin-bottom: 20px; margin-bottom: 20px;
background: #f1fff2 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(--common-font); font-family: var(--common-font);
@ -217,19 +258,28 @@ body {
padding: 10px 10px; padding: 10px 10px;
color: #eaf8eb; color: #eaf8eb;
} }
.admin-block__table .row { .admin-block__table .row {
padding: 10px; padding: 10px;
} }
.admin-block__table a {
color: var(--title-color);
}
.admin-container.delete { .admin-container.delete {
text-align: center; text-align: center;
} }
.admin-container.delete .meta-text { .admin-container.delete .meta-text {
font-size: 18px; font-size: 18px;
margin-bottom: 15px; margin-bottom: 15px;
} }
.admin-container.delete .btn-control { .admin-container.delete .btn-control {
justify-content: space-around; justify-content: space-around;
} }
.order-stat { .order-stat {
display: flex; display: flex;
align-items: center; align-items: center;
@ -237,18 +287,22 @@ body {
font-size: 18px; font-size: 18px;
justify-content: space-between; justify-content: space-between;
} }
.order-content .admin-block__table { .order-content .admin-block__table {
margin-top: 15px; margin-top: 15px;
} }
.order-stat span:first-child { .order-stat span:first-child {
color: var(--common-text); color: var(--common-text);
font-weight: 400; font-weight: 400;
font-family: var(--common-font); font-family: var(--common-font);
} }
.order-stat span:last-child { .order-stat span:last-child {
color: var(--title-color); color: var(--title-color);
} }
.header-admin{
.header-admin {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -257,7 +311,7 @@ body {
background-color: var(--panel-background); background-color: var(--panel-background);
} }
.logo-admin{ .logo-admin {
color: var(--title-color); color: var(--title-color);
font-family: var(--title-font); font-family: var(--title-font);
font-size: 20px; font-size: 20px;
@ -265,7 +319,7 @@ body {
} }
.input-admin input{ .input-admin input {
background: var(--input-background); background: var(--input-background);
border: 1px solid var(--input-border); border: 1px solid var(--input-border);
color: var(--input-text-color); color: var(--input-text-color);
@ -275,14 +329,16 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.input-admin button{ .input-admin button {
border: 1px solid var(--input-border); border: 1px solid var(--input-border);
} }
.admin-container .title{
.admin-container .title {
text-align: start; text-align: start;
} }
.input-admin button{
.input-admin button {
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
} }
@ -290,6 +346,31 @@ body {
.admin-block__content .btn-control { .admin-block__content .btn-control {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
.admin-single__form img {
height: 260px;
width: 350;
border-radius: 10px;
margin-bottom: 20px;
}
.admin-single__form input[type="file"] {
margin-bottom: 20px;
} }
.recipe-author {
color: var(--title-color);
}
.admin-single__form .input-checkbox {
accent-color: #0DBB99;
}

47
assets/css/style.css
View File

@ -155,26 +155,31 @@ body {
color: var(--panel-text); color: var(--panel-text);
text-align: center; text-align: center;
} }
.quote h2 { .quote h2 {
margin-right: 10px; margin-right: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
.welcome { .welcome {
background: var(--panel-background); background: var(--panel-background);
margin-bottom: 30px; margin-bottom: 30px;
font-size: 24px; font-size: 24px;
line-height: 32px; line-height: 32px;
} }
.welcome__inner { .welcome__inner {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.welcome__inner .quote { .welcome__inner .quote {
font-size: 38px; font-size: 38px;
text-align: left; text-align: left;
margin-bottom: 20px; margin-bottom: 20px;
} }
.welcome .text-container { .welcome .text-container {
padding: 50px 0; padding: 50px 0;
} }
@ -992,16 +997,16 @@ label span {
/* flex-wrap: wrap; */ /* flex-wrap: wrap; */
} }
.single-instructions{ .single-instructions {
width: 50%; width: 50%;
font-size: 16px; font-size: 16px;
} }
.single-ingredients{ .single-ingredients {
width: 50%; width: 50%;
} }
.ingredients-table{ .ingredients-table {
width: 400px; width: 400px;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
@ -1009,17 +1014,43 @@ label span {
border-collapse: separate; border-collapse: separate;
} }
.ingredients-table th{ .ingredients-table th {
background-color: #008B70; background-color: #008B70;
color: #fff; color: #fff;
padding: 10px 20px; padding: 10px 20px;
text-align: start; text-align: start;
} }
.ingredients-table td{ .ingredients-table td {
padding: 10px 20px; padding: 10px 20px;
border-top: 2px solid #b3b3b3; border-top: 2px solid #b3b3b3;
} }
input:disabled {
background-color: #e9ecef;
color: #6c757d;
}
select {
padding: 6px;
border-radius: 10px;
margin-bottom: 20px;
}
textarea{
width: 400px;
padding: 10px;
background-color: var(--input-background);
border: 1px solid var(--input-border);
border-radius: 10px;
}
label {
display: inline-block;
margin-bottom: 5px;
}
@media (max-width: 768px) { @media (max-width: 768px) {
.catalog-items { .catalog-items {
@ -1027,6 +1058,7 @@ label span {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
margin-right: 0; margin-right: 0;
} }
.welcome__inner { .welcome__inner {
flex-direction: column; flex-direction: column;
} }
@ -1101,7 +1133,7 @@ label span {
gap: 12px; gap: 12px;
} }
.small-btns{ .small-btns {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
@ -1113,7 +1145,7 @@ label span {
width: auto; width: auto;
} }
.btn-small{ .btn-small {
width: 35px; width: 35px;
} }
@ -1235,6 +1267,7 @@ label span {
justify-content: center; justify-content: center;
width: 200px; width: 200px;
} }
#food-3d { #food-3d {
display: none; display: none;
} }

2
components/templates/layout/header.php
View File

@ -64,7 +64,7 @@
<div class="search-and-login"> <div class="search-and-login">
<i class="fa-solid fa-magnifying-glass search-icon"></i> <i class="fa-solid fa-magnifying-glass search-icon"></i>
<input type="text" class="search-input" placeholder="Search recipes..."> <input type="text" class="search-input" placeholder="Search recipes...">
<a href="<?php the_permalink("users:login") ?>" class="login-link hover-anim"> <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>" class="login-link hover-anim">
<i class="fa-regular fa-user"></i> <i class="fa-regular fa-user"></i>
</a> </a>
</div> </div>