alvin/Challenge_15_Magazijn_App_Maken
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Challenge_15_Magazijn_App_Maken.git synced 2026-03-06 11:06:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Implement search bar styling and update placeholders across admin and student reservation pages

Browse Source
This commit is contained in:
Alvin
2025-10-29 10:50:54 +01:00
parent 50368cc256
commit 79a605a5e9
5 changed files with 38 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/admin-reservations.html
View File

@@ -45,11 +45,11 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="row g-3 mb-3"> <div class="row g-3 mb-3">
<div class="col-md-12"> <div class="col-md-6">
<label for="searchInput" class="form-label">Search</label> <label for="searchInput" class="form-label">Search</label>
<div class="input-group"> <div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span> <span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search by student name, item name, or location..."> <input type="text" class="form-control" id="searchInput" placeholder="Search reservations...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search"> <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i> <i class="bi bi-x-lg"></i>
</button> </button>

6
public/admin.html
View File

@@ -57,11 +57,11 @@
</div> </div>
<!-- Search Bar --> <!-- Search Bar -->
<div class="row mb-4"> <div class="row mb-3">
<div class="col-md-6"> <div class="col-md-6">
<div class="input-group"> <div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span> <span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search items by name, description, or location..."> <input type="text" class="form-control" id="searchInput" placeholder="Search items...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search"> <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i> <i class="bi bi-x-lg"></i>
</button> </button>

27
public/css/style.css
View File

@@ -448,3 +448,30 @@ body {
.btn-sm { .btn-sm {
margin: 0 2px; margin: 0 2px;
} }
/* Simple Search Bar Styling */
.search-input-group .input-group-text {
background-color: var(--vista-coral);
border-color: var(--vista-coral);
color: var(--vista-white);
}
.search-input-group .form-control {
border-color: var(--vista-coral);
}
.search-input-group .form-control:focus {
border-color: var(--vista-coral);
box-shadow: 0 0 0 0.25rem rgba(211, 112, 90, 0.25);
}
.search-input-group .btn-outline-secondary {
border-color: var(--vista-coral);
color: var(--vista-coral);
}
.search-input-group .btn-outline-secondary:hover {
background-color: var(--vista-coral);
border-color: var(--vista-coral);
color: var(--vista-white);
}

6
public/student-reservations.html
View File

@@ -64,11 +64,11 @@
</div> </div>
</div> </div>
<div class="row g-3 mb-3"> <div class="row g-3 mb-3">
<div class="col-md-12"> <div class="col-md-6">
<label for="searchInput" class="form-label">Search</label> <label for="searchInput" class="form-label">Search</label>
<div class="input-group"> <div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span> <span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search by item name or location..."> <input type="text" class="form-control" id="searchInput" placeholder="Search reservations...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search"> <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i> <i class="bi bi-x-lg"></i>
</button> </button>

4
public/student.html
View File

@@ -39,9 +39,9 @@
<h2>Available Items</h2> <h2>Available Items</h2>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="input-group"> <div class="input-group search-input-group">
<span class="input-group-text"><i class="bi bi-search"></i></span> <span class="input-group-text"><i class="bi bi-search"></i></span>
<input type="text" class="form-control" id="searchInput" placeholder="Search items by name or description..."> <input type="text" class="form-control" id="searchInput" placeholder="Search items...">
<button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search"> <button class="btn btn-outline-secondary" type="button" id="clearSearch" title="Clear search">
<i class="bi bi-x-lg"></i> <i class="bi bi-x-lg"></i>
</button> </button>