diff --git a/src/home/index.php b/src/home/index.php
index ac6f4eba186d905bba1f1f24b612ca60e450068a..b82fba2f4d3bf8322eb245d2919cb65cd6006aa5 100644
--- a/src/home/index.php
+++ b/src/home/index.php
@@ -13,9 +13,9 @@ AuthMiddleware::getInstance()->secureRoute();
$priceRangeOption = [1 => ['label' => "< 50000", 'upperBound' => 50000], 2 => ['label' => "50000 - 200000", 'lowerBound' => 50000, 'upperBound' => 200000], 3 => ['label' => "500000 - 1000000", 'lowerBound' => 500000, 'upperBound' => 1000000], 4 => ['label' => "> 1000000", 'lowerBound' => 1000000]];
$sortingOption = [
- 'none' => ['label' => 'No sort'],
- 'alphabet-asc' => ['label' => 'A-Z', 'attribute' => 'name', 'desc' => true],
- 'alphabet-desc' => ['label' => 'Z-A', 'attribute' => 'name', 'desc' => false],
+ 'none' => ['label' => 'No Sort'],
+ 'alphabet-asc' => ['label' => 'A-Z', 'attribute' => 'name', 'desc' => false],
+ 'alphabet-desc' => ['label' => 'Z-A', 'attribute' => 'name', 'desc' => true],
'price-asc' => [
'attribute' => 'monthly_price',
'desc' => false,
@@ -56,6 +56,12 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
]
);
+$rows = [
+ ['none'],
+ ['alphabet-asc', 'alphabet-desc'],
+ ['price-asc', 'price-desc']
+];
+
?>
<!DOCTYPE html>
@@ -88,7 +94,6 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
City
<div class="space3"></div>
-
<select class="drop-down-city" id="filter-city" name="city">
<option <?= !isset($selectedCity) ? "selected" : "" ?> value="0">
@@ -123,18 +128,24 @@ $gymsFiltered = GymService::getInstance()->getFiltered(
<?php endforeach; ?>
</select>
<div class="space2"></div>
-
+
Sort
<div class="space3"></div>
- <?php foreach ($sortingOption as $key => $value): ?>
- <input name="sorting" type="radio" class="toggle-sort" value=<?= $key ?> id="filter-<?= $key ?>"
- <?= $selectedSorting == $key ? "checked=\"checked\"" : "" ?> value="<?= $key ?>">
- <label for="filter-<?= $key ?>">
- <?= $value['label'] ?>
- </label>
- <?php endforeach; ?>
- <div class="space2"></div>
- <div class="space2"></div>
+ <?php
+ foreach ($rows as $row) {
+ echo '<div class="space3"></div>';
+ echo '<div class="flex gap">';
+ foreach ($row as $key) {
+ $option = $sortingOption[$key];
+ echo '<div class="center-text med-text">';
+ echo '<label class="sort-label" for="filter-' . $key . '">' . $option['label'] . '</label>';
+ echo '<input name="sorting" type="radio" class="toggle-sort" value="' . $key . '" id="filter-' . $key . '" ' . ($selectedSorting == $key ? 'checked="checked"' : '') . '>';
+ echo '</div>';
+ }
+ echo '</div>';
+ }
+ ?>
+ <div class="space"></div>
<!-- <div class="form-search">
<input id="input-search" class="input-search" type="text" name="name" onChange={handleChange}
placeholder="Search a gym based on name" value="<?= $searchedName ?? "" ?>" />
diff --git a/src/public/css/style.css b/src/public/css/style.css
index 25f43ae354cec713fda3b3994ec7d5cbf0ce5b40..523ee30e764ba239e1954c0caaeed0ee99fc2aac 100644
--- a/src/public/css/style.css
+++ b/src/public/css/style.css
@@ -6,9 +6,10 @@
--dekstop-height: 1024px;
--font-size-standard: 16px;
--font-size-mobile: 12px;
+ --font-size-medium: 14px;
background-color: #def7ff;
--background-color-standard: #fff;
- --font-standard: Open Sans Condensed;
+ --font-standard: 'Inter';
--text-standard: #003459;
--text-light: #fff;
--button-standard: #f0f9ff;
@@ -48,9 +49,7 @@ body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
- /* align items is for horizontal and justify content is for vertical */
align-items: center;
- /* justify-content: center; */
height: 100vh;
margin: 0;
}
@@ -113,9 +112,21 @@ input.input-search:hover {
margin-top: 8px;
}
-.first-line-button {
+.flex {
display: flex;
+}
+.gap {
gap: 10px;
+}
+.center-text {
+ text-align: center;
+}
+.med-text {
+ font-size: var(--font-size-medium);
+}
+.first-line-button {
+ display: flex;
+ gap: 14px;
justify-content: center;
flex-shrink: 0;
}
@@ -144,9 +155,6 @@ input.input-search:hover {
.button-filter-admin {
justify-content: center;
align-items: center;
- /* gap: 6px; */
- /* height: 34px; */
- /* width: 25.3%; */
height: 8.3%;
padding: 4px;
box-shadow: 0px 4px 4px 0px var(--button-shadow-standard);
@@ -172,15 +180,10 @@ input.input-search:hover {
.form-search {
justify-content: center;
align-items: center;
- /* justify-content: space-between; */
- /* width: 230px;
- height: 31px; */
- /* gap: 8px; */
gap: 12%;
width: 63.8%;
height: 31px;
box-shadow: var(--form-search-box-shadow);
- /* padding: 5px; */
}
.form-search:focus,
.form-search:hover {
@@ -191,8 +194,6 @@ input.input-search {
margin-left: 4px;
border-radius: 10px;
border: 0px;
- /* height: 30px;
- width: 180px; */
height: 100%;
width: 85%;
font-size: var(--font-size-standard);
@@ -207,10 +208,8 @@ input.input-search {
align-items: center;
justify-content: center;
border: 0px;
- /* height: 31px; */
width: 34px;
height: 100%;
- /* width: 15%; */
}
.button-search:hover,
.button-search:focus {
@@ -231,7 +230,6 @@ input.input-search {
.navbar {
display: flex;
width: 100%;
- /* height: 6.25%; */
height: 40px;
justify-content: center;
align-items: center;
@@ -275,7 +273,6 @@ input.input-search {
display: flex;
flex-direction: column;
align-items: center;
- /* justify-content: center; */
gap: 1%;
flex-shrink: 0;
width: 100%;
@@ -289,8 +286,6 @@ input.input-search {
.gym-card {
display: flex;
align-items: center;
- /* width: 334px;
- height: 73px; */
width: 100%;
height: 73px;
flex-shrink: 0;
@@ -393,7 +388,7 @@ width: 334px; */
.popup-title {
color: #cb0000;
text-align: center;
- font-family: Open Sans Condensed;
+ font-family: var(--font-standard);
font-size: 19px;
font-style: normal;
font-weight: 700;
@@ -414,7 +409,7 @@ width: 334px; */
flex-direction: column;
color: var(--text-standard);
text-align: left;
- font-family: Open Sans Condensed;
+ font-family: var(--font-standard);
font-size: var(--font-size-standard);
font-style: normal;
font-weight: 600;
@@ -462,8 +457,6 @@ input.form-price {
}
.form-sort-line {
display: flex;
- /* justify-content: space-between; */
- /* align-items: center; */
gap: 10px;
}
.toggle-sort {
@@ -490,8 +483,6 @@ input.form-price {
}
.search-filter,
.cancel-filter {
- /* width: 328px;
- height: 31px; */
width: 100%;
height: 8.2%;
flex-shrink: 0;
@@ -519,7 +510,7 @@ input.form-price {
.first-line-title {
display: flex;
justify-content: center;
- font-family: "Roboto Condensed";
+ font-family: var(--font-standard);
font-weight: bold;
font-size: 36px;
}
diff --git a/src/services/GymService.php b/src/services/GymService.php
index dc9f55f2093c7435f580dd131cf0ed3ec26aed00..f437eccb178b55cf41b8b68f378c7577dff1fe5a 100644
--- a/src/services/GymService.php
+++ b/src/services/GymService.php
@@ -124,9 +124,11 @@ class GymService extends BaseService
// Build order clause
$orderClause = "";
if ($sorting != null) {
- $attribute = $sortingOption[$sorting]['attribute'];
- $descending = $sortingOption[$sorting]['desc'] ? "DESC" : "ASC";
- $orderClause = "ORDER BY {$attribute} {$descending}";
+ if (isset($sortingOption[$sorting]['desc'])) {
+ $attribute = $sortingOption[$sorting]['attribute'];
+ $descending = $sortingOption[$sorting]['desc'] ? "DESC" : "ASC";
+ $orderClause = "ORDER BY {$attribute} {$descending}";
+ }
}
// Build limit clause