Merge pull request #230 from anishka25/main

made UI changes on campground page
VigneshDevHub · Oct 19, 2024 · c198c31 · c198c31
2 parents afb23f2 + 8cc4fd1
commit c198c31
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 22 deletions.
diff --git a/public/stylesheets/searchCampground.css b/public/stylesheets/searchCampground.css
@@ -27,15 +27,35 @@
  #search-button {
  border-radius: 0 10px 10px 0;
  padding: 10px 20px;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
+ background-color:rgb(46, 45, 45); 
+ border-color:rgb(35, 35, 35); 
  color: white;
  }
 
  #show-nearest-btn {
  padding: 10px 20px;
- background-color: #17a2b8;
- border: 1px solid #17a2b8;
+ background-color:rgb(46, 45, 45); 
+ border-color:rgb(35, 35, 35); 
  color: white;
  border-radius: 10px;
- }
+ }
+
+ #search-button:hover {
+ background-color: rgb(23, 23, 23);
+ }
+
+ #show-nearest-btn:hover {
+ background-color: rgb(23, 23, 23);
+ }
+
+ #sort-btn{
+ padding: 10px 20px; color: white;
+ border-radius: 0px 10px 10px 0px;
+ background-color:rgb(46, 45, 45); 
+ border-color:rgb(35, 35, 35); 
+ }
+ #sort-btn:hover{
+ background-color: rgb(23, 23, 23);
+ }
+
+
diff --git a/views/campgrounds/index.ejs b/views/campgrounds/index.ejs
@@ -5,30 +5,35 @@
 <link rel="stylesheet" href="stylesheets/searchCampground.css">
 
 <div class="d-flex justify-content-between align-items-center mb-3">
- <!-- Search Bar (left-aligned) -->
+
+ <div style="display: flex;flex-direction: row;justify-content: flex-end;margin-bottom: 10px;">
+ <!-- show nearest to me button (left-aligned) -->
+ <button id="show-nearest-btn" class="btn btn-info" style="margin-right: 30px">Show Nearest to Me</button>
+ <!-- sort (left-aligned) -->
+ <form action="/campgrounds" method="GET" class="d-inline">
+ <select name="sort" id="sort" class="btn btn-secondary" style="padding: 10px 27px;color: rgb(61, 59, 59); border-radius: 10px 0px 0px 10px; background-color:aliceblue ; border-color:rgb(35, 35, 35)">
+ <option value="">--Select--</option>
+ <option value="priceAsc" <%= (locals.query && query.sort === 'priceAsc') ? 'selected' : '' %>>Price: Low to High</option>
+ <option value="priceDesc" <%= (locals.query && query.sort === 'priceDesc') ? 'selected' : '' %>>Price: High to Low</option>
+ <option value="reviewsHighest" <%= (locals.query && query.sort === 'reviewsHighest') ? 'selected' : '' %>>Reviews: Highest Rated</option>
+ <option value="reviewsLowest" <%= (locals.query && query.sort === 'reviewsLowest') ? 'selected' : '' %>>Reviews: Lowest Rated</option>
+ </select>
+ <button type="submit" class="btn btn-primary" id="sort-btn" style="margin-left:-5px">Sort</button>
+ </form>
+ </div>
+ <!-- Search Bar (right-aligned) -->
  <form action="/campgrounds/search" method="GET" class="form-inline my-2 my-lg-0" id="search-form">
  <div class="input-group">
- <input class="form-control" type="search" placeholder="Search for campsites..." aria-label="Search" name="q" id="search-input">
+ <input class="form-control" type="search" style=" border:2px solid rgb(35, 35, 35)" placeholder="Search for campsites..." aria-label="Search" name="q" id="search-input">
  <div class="input-group-append">
- <button class="btn btn-info" type="submit" id="search-button">Search</button>
+ <button class="btn btn-info" type="submit" id="search-button" style=" border:2px solid rgb(35, 35, 35)">Search</button>
  </div>
  </div>
-</form>
-<button id="show-nearest-btn" class="btn btn-info">Show Nearest to Me</button>
-</div>
-<div style="display: flex;flex-direction: row;justify-content: flex-end;margin-bottom: 10px;">
- <form action="/campgrounds" method="GET" class="d-inline">
- <select name="sort" id="sort" class="btn btn-secondary">
- <option value="">--Select--</option>
- <option value="priceAsc" <%= (locals.query && query.sort === 'priceAsc') ? 'selected' : '' %>>Price: Low to High</option>
- <option value="priceDesc" <%= (locals.query && query.sort === 'priceDesc') ? 'selected' : '' %>>Price: High to Low</option>
- <option value="reviewsHighest" <%= (locals.query && query.sort === 'reviewsHighest') ? 'selected' : '' %>>Reviews: Highest Rated</option>
- <option value="reviewsLowest" <%= (locals.query && query.sort === 'reviewsLowest') ? 'selected' : '' %>>Reviews: Lowest Rated</option>
-</select>
- <button type="submit" class="btn btn-primary">Sort</button>
-</form>
+ </form>
+
 </div>
 
+
 <% for(let campground of campgrounds){ %>
  <div class="card text-white bg-dark mb-3" id="campinfo">
  <div class="row">