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-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>
</div>
<div class="swiper-slide">
<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">
</div>
</div> -->
<p class="category-title">Mexican</p>
</a>

32
assets/css/style.css
View File

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