touched up responsiveness and minor code cleanup

bmarieay · Mar 2, 2022 · 25fd433 · 25fd433
1 parent 197494a
commit 25fd433
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 18 deletions.
diff --git a/controllers/campgrounds.js b/controllers/campgrounds.js
@@ -53,7 +53,7 @@ module.exports.index = async (req, res) => {
     }
 
     //user filtered campgrounds
-    const queried = await axios.get(`https://developer.nps.gov/api/v1/campgrounds?limit=20&stateCode=${q}`, config);
+    const queried = await axios.get(`https://developer.nps.gov/api/v1/campgrounds?limit=50&stateCode=${q}`, config);
     let matchedCampground;  
     result.filter = q;
     if(queried.data.data.length) {

diff --git a/models/campground.js b/models/campground.js
@@ -12,9 +12,7 @@ const ImageSchema = new Schema({
 ImageSchema.virtual('thumbnail').get(function () {
     return this.url.replace('/upload', '/upload/w_200')
 })
-ImageSchema.virtual('indexSize').get(function () {
-    return this.url.replace('/upload', '/upload/w_415,h_280')
-})
+
 ImageSchema.virtual('showSize').get(function () {
     return this.url.replace('/upload', '/upload/h_480')
 })

diff --git a/public/javascripts/pagination.js b/public/javascripts/pagination.js
@@ -4,13 +4,10 @@ const nextBtn = document.querySelector('.page-next');
 const previousContainer = document.querySelector('.prev-btn');
 const nextContainer = document.querySelector('.next-btn');
 let max = Math.ceil(resultLength / 20.0);
-console.log("max page:", max, " length result:", resultLength)
 //update total later according to data
 
 const pageNumber = (total, max, current) => {
     const half = Math.round(max / 2);
-    console.log("total:", total)
-    console.log("half:", half, " current:", current)
     let to = max;
 
     if(current + half >= total){
@@ -20,7 +17,6 @@ const pageNumber = (total, max, current) => {
     }
 
     let from = to - max;
-    console.log("from: ", from, "   to: ", to)
 
     if(current <= 1){
         previousContainer.classList.add('disabled');
@@ -45,7 +41,6 @@ initialize();//initialize everything for new load
 
 function initialize (){
     let arrayofBtns = pageNumber(max, 5, readCookie());
-    console.log(arrayofBtns)
     generateButtons(pageButton, arrayofBtns);
 }
 

diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css
@@ -135,4 +135,4 @@
     #map{
         margin: 0;
     }
-}
+}
diff --git a/views/campgrounds/index.ejs b/views/campgrounds/index.ejs
@@ -20,7 +20,7 @@
 
 <form action="/campgrounds" class="pb-4">
     <select class="form-select theme-target" name="q" aria-label="Default select example" onchange="this.form.submit()">
-        <option selected>Select a state</option>
+        <option selected disabled aria-disabled="true">Select a state</option>
         <option value="AL">Alabama</option>
         <option value="AK">Alaska</option>
         <option value="AZ">Arizona</option>
@@ -82,20 +82,20 @@
     <% for(let campground of result.results) {%>
         <div class="card mb-3 border border-secondary rounded rounded-1 theme-target">
             <div class="row">
-                <div class="col-md-4">
+                <div class="col-md-6 col-lg-4">
                     <!-- campground.images[0].url.includes('cloudinary')? campground.images[0].indexSize : -->
                     <% if(campground.images.length) {%>
-                        <img src="<%= campground.images[0].url.includes('cloudinary')? campground.images[0].indexSize : campground.images[0].url %>" alt="" class="img-fluid">
+                        <img src="<%= campground.images[0].url %>" alt="" class="img-fluid">
                     <% } else {%>
                         <img class="img-fluid" src="https://res.cloudinary.com/maranttt/image/upload/v1643679209/YelpCamp/nhzmrsjscjzcll52hpod.jpg" alt="">
                     <% } %>
                 </div>
-                <div class="col-md-8">
+                <div class="col-md-6 col-lg-8">
                     <div class="card-body">
                         <h5 class="card-title"><a href="/campgrounds/<%= campground._id %>" class="accent"><%= campground.title %></a></h5>
                             <!-- shorten description if it is long -->
                             <% if(campground.description.length >= 200){ %>
-                                <p class="card-text"><%= campground.description.substring(0, 220) %>...</p>
+                                <p class="card-text"><%= campground.description.substring(0, 190) %>...</p>
                             <% } else {%>
                                 <p class="card-text"><%= campground.description %></p>
                             <% } %> 
@@ -121,6 +121,7 @@
 
     <script src="/javascripts/clusterMap.js"></script>
     <% if(!result.filter) {%> 
-    <script src="/javascripts/pagination.js"></script>
-    <% } %> 
-    <script src="/javascripts/searchMode.js"></script>
+        <script src="/javascripts/pagination.js"></script>
+    <% } else {%> 
+        <script src="/javascripts/searchMode.js"></script>
+    <% } %>
-Original file line number
+Diff line change
@@ Expand Up / @@ -135,4 +135,4 @@ @@
         #map{
             margin: 0;
         }
-    }
+    }