Merge pull request #15 from andrewc0urt/style/all-campgrounds-page-ca…

…rd-improvements Merge: All Campgrounds Page Card and Image Improvements
andrewc0urt · Sep 9, 2024 · dfb713f · dfb713f
2 parents 0b01dc0 + ab9d956
commit dfb713f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css
@@ -0,0 +1,13 @@
+/* Ensure all card widths & heights are the same */
+.individual-campground-card {
+  width: 100%;
+  max-width: 1294px;
+}
+
+/* Ensure all card image heights are the same to prevent different size cards and ensure images take up height of card */
+.individual-campground-card .img-fluid {
+  width: 100%;
+  /* height: auto; */
+  height: 277px;
+  object-fit: cover; /* Ensures the image covers the container without distortion */
+}
diff --git a/views/campgrounds/index.ejs b/views/campgrounds/index.ejs
@@ -49,7 +49,7 @@
 </a>
 
 <% for (let camp of allCampgrounds) { %>
-<div class="card mb-3">
+<div class="card mb-3 individual-campground-card">
   <div class="row">
     <div class="col-md-4">
       <% if (camp.images.length) { %>

diff --git a/views/campgrounds/showDetails.ejs b/views/campgrounds/showDetails.ejs
@@ -59,7 +59,7 @@
 
       <% } %>
 
-      <div class="card-footer text-body-secondary">2 days ago</div>
+      <!-- <div class="card-footer text-body-secondary">2 days ago</div> -->
     </div>
   </div>
 

diff --git a/views/layouts/boilerplate.ejs b/views/layouts/boilerplate.ejs
@@ -25,6 +25,7 @@
 
     <!-- Custom CSS -->
     <link rel="stylesheet" href="/stylesheets/app.css" />
+    <link rel="stylesheet" href="/stylesheets/index.css" />
   </head>
 
   <body class="d-flex flex-column vh-100">
-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,7 @@ @@
           <% } %>
-          <div class="card-footer text-body-secondary">2 days ago</div>
+          <!-- <div class="card-footer text-body-secondary">2 days ago</div> -->
         </div>
       </div>
@@ Expand Down @@