admin/35604-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

21

Browse Source
This commit is contained in:
Flatlogic Bot 2025-11-30 20:25:53 +00:00
parent 1d6bd37049
commit 54ae6d2455
2 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
assets/css/custom.css
View File

@ -351,8 +351,8 @@ footer.bg-light {
/* Category Filter Button Styles */ /* Category Filter Button Styles */
#category-filters .btn { #category-filters .btn {
border-radius: 20px; /* Rounded corners */ border-radius: 20px; /* Rounded corners */
padding: 8px 20px; padding: 6px 12px;
font-size: 0.9rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
line-height: 1.5; line-height: 1.5;
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
@ -502,3 +502,29 @@ footer.bg-light {
gap: 0.5rem; gap: 0.5rem;
} }
} }
/* Search Input with Icon */
.search-container {
position: relative;
}
@media (min-width: 769px) {
.btn-primary,
#print-shopping-list-btn {
padding-top: 8px;
padding-bottom: 8px;
}
}
.search-container .bi-search {
position: absolute;
top: 50%;
left: 1rem;
transform: translateY(-50%);
z-index: 2;
color: rgba(255, 255, 255, 0.5);
}
#recipe-search {
padding-left: 2.5rem;
}

5
index.php
View File

@ -56,7 +56,8 @@
Add Recipe Add Recipe
</button> </button>
</div> </div>
<div class="mb-3"> <div class="mb-3 search-container">
<i class="bi bi-search"></i>
<input type="text" id="recipe-search" class="form-control" placeholder="Search recipes..."> <input type="text" id="recipe-search" class="form-control" placeholder="Search recipes...">
</div> </div>
<div class="mb-3 d-flex flex-wrap gap-2" id="category-filters"> <div class="mb-3 d-flex flex-wrap gap-2" id="category-filters">
@ -80,7 +81,7 @@
<h2 class="text-center mb-0">Shopping List</h2> <h2 class="text-center mb-0">Shopping List</h2>
<div> <div>
<button id="add-product-btn" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#add-product-modal">Add Product</button> <button id="add-product-btn" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#add-product-modal">Add Product</button>
<button id="print-shopping-list-btn" class="btn btn-outline-secondary btn-sm"><i class="bi bi-printer"></i> Print</button> <button id="print-shopping-list-btn" class="btn btn-outline-secondary"><i class="bi bi-printer"></i> Print</button>
</div> </div>
</div> </div>
<div class="card shadow"> <div class="card shadow">