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

TIST-30: fixed catalog anchor textt decorations and removed display grid from filters, removed images from categories in index and updated design #21

Merged
greendavid004 merged 1 commits from TIST-30 into develop 2025-06-29 17:33:27 +02:00
Conversation 1 Commits 1 Files Changed 2 +38 -30
2 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
apps/Index/Templates/index.php
View File

@ -88,81 +88,81 @@
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<a href="#" class="category hover-anim"> <a href="#" class="category hover-anim">
<div class="category-img"> <!-- <div class="category-img">
<img src="media/category1.png" alt="Category 1" class="category-img__img"> <img src="media/category1.png" alt="Category 1" class="category-img__img">
</div> </div> -->
<p class="category-title">Mexican</p> <p class="category-title">Mexican</p>
</a> </a>

32
assets/css/style.css
View File

@ -260,27 +260,30 @@ body {
} }
.categories .swiper-slide { .categories .swiper-slide {
height: 120px; width: 100px;
width: 120px;
} }
.categories-swiper {
height: 120px;
padding: 0 15px;
.categories-swiper {
padding: 0 20px;
} }
.category { .category {
margin-left: 20px;
width: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
padding: 10px 0; padding: 10px 0;
text-decoration: none;
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1)); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
background-color: var(--panel-background);
border-radius: 10px;
} }
.category-title { .category-title {
@ -722,6 +725,14 @@ label span {
display: flex; display: flex;
} }
input[type="checkbox"]{
accent-color: #0DBB99;
}
.catalog a{
text-decoration: none;
}
.catalog-recipe { .catalog-recipe {
display: block; display: block;
width: 200px; width: 200px;
@ -769,7 +780,7 @@ label span {
.filters { .filters {
position: fixed; position: fixed;
height: 454px; max-height: 454px;
width: 230px; width: 230px;
padding: 15px; padding: 15px;
background-color: var(--panel-background); background-color: var(--panel-background);
@ -796,10 +807,7 @@ label span {
.filters-checkboxes ul { .filters-checkboxes ul {
list-style: none; list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 3px;
column-gap: 8px;
padding: 0; padding: 0;
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;