Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add [feature]: Grid Layout of Campgrounds #150

Closed
wants to merge 7 commits into from
+41 −23
Closed

Add [feature]: Grid Layout of Campgrounds #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6de8bca
Add [feature]: Grid Layout of Campgrounds
MitulSonagara Oct 11, 2024
d695194
Add [fix]: consistant margin
MitulSonagara Oct 11, 2024
5cd0b19
Add [fix]: Cleaned code
MitulSonagara Oct 11, 2024
40f59a2
Merge branch 'test' into Feature/Grid-Campground-Layout
MitulSonagara Oct 13, 2024
9913f8f
navbar bug fix
MitulSonagara Oct 13, 2024
32766d3
Merge branch 'Feature/Grid-Campground-Layout' of https://github.com/M…
MitulSonagara Oct 13, 2024
3571fe9
Merge branch 'test' into Feature/Grid-Campground-Layout
MitulSonagara Oct 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion public/stylesheets/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,12 @@ h1 {
background-color: black;
color: white;
}

.navbar-nav .nav-link {
display: inline-block; /* Ensure nav links are displayed inline */
visibility: visible; /* Ensure links are visible */
}

.mapboxgl-popup-content{
color: black !important;
text-align: center;
Expand Down Expand Up @@ -122,4 +128,5 @@ h1 {
padding: 1rem 1.5rem 0.2rem 1.5rem;
border-radius: 5px;
margin-bottom: 1rem;
}
}

50 changes: 29 additions & 21 deletions views/campgrounds/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
<h1>All Campgrounds</h1>

<link rel="stylesheet" href="stylesheets/searchCampground.css">
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />

<div class="d-flex justify-content-between align-items-center mb-3">
<!-- Search Bar (left-aligned) -->

<div class="d-flex justify-content-between align-items-center mb-4">
<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">
Expand All @@ -29,29 +30,36 @@
</form>
</div>

<div class="grid lg:grid-cols-4 md:grid-cols-3 gap-4">
<% for(let campground of campgrounds){ %>
<div class="card text-white bg-dark mb-3" id="campinfo">
<div class="row">
<div class="col-md-4" id="campgroundhomeimage">
<% if(campground.images.length) { %>
<img crossorigin="anonymous" id="indeximg" alt="" src="<%= campground.images[0].url %>">
<% } else { %>
<img crossorigin="anonymous" class="img-fluid" src="https://res-console.cloudinary.com/dgr21eiov/media_explorer_thumbnails/149d48129829d71b6f4ffd8347709f20/detailed" alt="">
<% } %>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title"><%= campground.title %></h5>
<p class="card-text"><%= campground.description %></p>
<p class="card-text">
<small id="infolocation"><%= campground.location %></small>
</p>
<a href="/campgrounds/<%= campground._id %>" class="btn btn-primary">View <%= campground.title %></a>
</div>
</div>
<div class="max-w-md border rounded-lg shadow bg-gray-800 border-gray-700" id="campinfo">
<% if(campground.images.length) { %>
<img class="rounded-t-lg" crossorigin="anonymous" id="indeximg" src="<%= campground.images[0].url %>" alt="" />
<% } else { %>
<img crossorigin="anonymous" class="rounded-t-lg" src="https://res-console.cloudinary.com/dgr21eiov/media_explorer_thumbnails/149d48129829d71b6f4ffd8347709f20/detailed" alt="">
<% } %>
<div class="p-3">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-white">
<%= campground.title %>
</h5>
<p class="mb-3 font-normal text-gray-400">
<%= campground.description %>
</p>
<p class="mb-3 font-normal text-gray-400">
<small id="infolocation">
<%= campground.location %>
</small>
</p>
<a href="/campgrounds/<%= campground._id %>" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg focus:ring-4 focus:outline-none bg-blue-600 hover:bg-blue-700 dark:focus:ring-blue-800">
View <%= campground.title %>
<svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
</svg>
</a>
</div>
</div>
<% } %>
</div>

<script>
const mapToken = '<%- process.env.MAPBOX_TOKEN %>';
Expand Down
5 changes: 4 additions & 1 deletion views/layouts/boilerplate.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@
<script crossorigin="anonymous" src='https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.js'></script>
<link crossorigin="anonymous" href='https://api.mapbox.com/mapbox-gl-js/v3.5.1/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="/stylesheets/app.css">
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/stylesheets/navbar.css">

</head>

<body class="d-flex flex-column vh-100">
<%- include('../partials/navbar')%>
<main class="container mt-5">
<main class="m-5">
<%- include('../partials/flash')%>
<%- body %>
</main>
Expand All @@ -30,6 +32,7 @@
crossorigin="anonymous">
</script>
<script src="../../javascripts/validateForms.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.2/dist/flowbite.min.js"></script>
</body>

</html>