From 96896ad0eb6ee8a63fd970bea3fbedd21607a949 Mon Sep 17 00:00:00 2001
From: Neeraj <nbisht6791@gmail.com>
Date: Sat, 19 Oct 2024 18:43:08 +0530
Subject: [PATCH 1/2] make the search bar responsive

---
 controllers/campgrounds.js  | 42 ++++++++++++++++++-------------------
 views/campgrounds/index.ejs | 39 ++++++++++++++++++++++++++++++----
 2 files changed, 56 insertions(+), 25 deletions(-)

diff --git a/controllers/campgrounds.js b/controllers/campgrounds.js
index 483e607..1fea2d7 100644
--- a/controllers/campgrounds.js
+++ b/controllers/campgrounds.js
@@ -1,7 +1,7 @@
 const Campground=require('../models/campground');
 const mbxGeocoding = require("@mapbox/mapbox-sdk/services/geocoding");
 const mapBoxToken=process.env.MAPBOX_TOKEN;
-const geocoder = mbxGeocoding({accessToken:mapBoxToken});
+// const geocoder = mbxGeocoding({accessToken:mapBoxToken});
 const {cloudinary} = require('../cloudinary');
 const { query } = require('express');
 const mongoose = require('mongoose');
@@ -56,26 +56,26 @@ module.exports.renderNewForm = (req,res)=>{
     res.render('campgrounds/new');
 }
 
-module.exports.createCampground = async (req, res, next) => {
-    try {
-        const geoData=await geocoder.forwardGeocode({
-            query: req.body.campground.location,
-            limit:1
-        }).send()
-        const campground=new Campground(req.body.campground);
-        campground.geometry=geoData.body.features[0].geometry;
-        campground.images = req.files.map(f=>({url:f.path,filename: f.filename}));
-        campground.author =req.user._id;
-        await campground.save();
-        console.log(campground);
-        req.flash('success','Successfully made a new campground!');
-        res.redirect(`/campgrounds/${campground._id}`);
-    }
-    catch (error) {
-        const err=new ExpressError('Bad Gateway',502)
-        res.status(502).render('error',{err})
-    }
-}
+// module.exports.createCampground = async (req, res, next) => {
+//     try {
+//         const geoData=await geocoder.forwardGeocode({
+//             query: req.body.campground.location,
+//             limit:1
+//         }).send()
+//         const campground=new Campground(req.body.campground);
+//         campground.geometry=geoData.body.features[0].geometry;
+//         campground.images = req.files.map(f=>({url:f.path,filename: f.filename}));
+//         campground.author =req.user._id;
+//         await campground.save();
+//         console.log(campground);
+//         req.flash('success','Successfully made a new campground!');
+//         res.redirect(`/campgrounds/${campground._id}`);
+//     }
+//     catch (error) {
+//         const err=new ExpressError('Bad Gateway',502)
+//         res.status(502).render('error',{err})
+//     }
+// }
 
 module.exports.showCampground = async (req, res) => {
     if (!mongoose.Types.ObjectId.isValid(req.params.id)) {
diff --git a/views/campgrounds/index.ejs b/views/campgrounds/index.ejs
index 2ffe8b8..836a70e 100644
--- a/views/campgrounds/index.ejs
+++ b/views/campgrounds/index.ejs
@@ -4,7 +4,38 @@
 
 <link rel="stylesheet" href="stylesheets/searchCampground.css">
 
-<div class="d-flex justify-content-between align-items-center mb-3">
+<style>
+    #Search-Section{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+
+    }
+    #Sort-section{
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        margin-bottom: 10px;
+    }
+    @media only screen and (max-width: 600px) {
+        #Search-Section{
+            display: flex;
+            flex-direction: column;
+        }
+        #show-nearest-btn{
+            width: 200px;
+        }
+        #Sort-section{
+            
+            justify-content: center;
+        
+        }
+
+    }
+</style>
+
+<div id="Search-Section" class="  w-full mb-3">
     <!-- Search Bar (left-aligned) -->
     <form action="/campgrounds/search" method="GET" class="form-inline my-2 my-lg-0" id="search-form">
         <div class="input-group">
@@ -16,15 +47,15 @@
 </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">
+<div id="Sort-section" >
+    <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>
+    </select>
         <button type="submit" class="btn btn-primary">Sort</button>
 </form>
 </div>

From 36a7b3fbfa733a8ea8e9180ae003bd7f1ea45cc3 Mon Sep 17 00:00:00 2001
From: Neeraj <nbisht6791@gmail.com>
Date: Sat, 19 Oct 2024 19:02:32 +0530
Subject: [PATCH 2/2] fix search bar alignment

---
 controllers/campgrounds.js | 42 +++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/controllers/campgrounds.js b/controllers/campgrounds.js
index 1fea2d7..483e607 100644
--- a/controllers/campgrounds.js
+++ b/controllers/campgrounds.js
@@ -1,7 +1,7 @@
 const Campground=require('../models/campground');
 const mbxGeocoding = require("@mapbox/mapbox-sdk/services/geocoding");
 const mapBoxToken=process.env.MAPBOX_TOKEN;
-// const geocoder = mbxGeocoding({accessToken:mapBoxToken});
+const geocoder = mbxGeocoding({accessToken:mapBoxToken});
 const {cloudinary} = require('../cloudinary');
 const { query } = require('express');
 const mongoose = require('mongoose');
@@ -56,26 +56,26 @@ module.exports.renderNewForm = (req,res)=>{
     res.render('campgrounds/new');
 }
 
-// module.exports.createCampground = async (req, res, next) => {
-//     try {
-//         const geoData=await geocoder.forwardGeocode({
-//             query: req.body.campground.location,
-//             limit:1
-//         }).send()
-//         const campground=new Campground(req.body.campground);
-//         campground.geometry=geoData.body.features[0].geometry;
-//         campground.images = req.files.map(f=>({url:f.path,filename: f.filename}));
-//         campground.author =req.user._id;
-//         await campground.save();
-//         console.log(campground);
-//         req.flash('success','Successfully made a new campground!');
-//         res.redirect(`/campgrounds/${campground._id}`);
-//     }
-//     catch (error) {
-//         const err=new ExpressError('Bad Gateway',502)
-//         res.status(502).render('error',{err})
-//     }
-// }
+module.exports.createCampground = async (req, res, next) => {
+    try {
+        const geoData=await geocoder.forwardGeocode({
+            query: req.body.campground.location,
+            limit:1
+        }).send()
+        const campground=new Campground(req.body.campground);
+        campground.geometry=geoData.body.features[0].geometry;
+        campground.images = req.files.map(f=>({url:f.path,filename: f.filename}));
+        campground.author =req.user._id;
+        await campground.save();
+        console.log(campground);
+        req.flash('success','Successfully made a new campground!');
+        res.redirect(`/campgrounds/${campground._id}`);
+    }
+    catch (error) {
+        const err=new ExpressError('Bad Gateway',502)
+        res.status(502).render('error',{err})
+    }
+}
 
 module.exports.showCampground = async (req, res) => {
     if (!mongoose.Types.ObjectId.isValid(req.params.id)) {