From 65bcee31526ce2e1e3bea5c344e843871ca54dc1 Mon Sep 17 00:00:00 2001
From: dipexplorer <dipexplorerid23@gmail.com>
Date: Thu, 17 Oct 2024 02:06:35 +0530
Subject: [PATCH] imrprove show listing UI with responsiveness

---
 views/show.ejs | 55 +++++++++++++++++++++++---------------------------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/views/show.ejs b/views/show.ejs
index b678983..0ad9fd3 100644
--- a/views/show.ejs
+++ b/views/show.ejs
@@ -5,25 +5,15 @@
     
 </script>
 <style>
-    body {
-    background-color: #f8f9fa;
-    font-family: Arial, sans-serif;
-}
-
-.listing-card {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
 .show-img {
     object-fit: cover;
     height: 400px;
+    border-radius: 1rem;
 }
 
-.map {
-    height: 400px;
-    width: 100%;
+#map {
+    border-radius: 10px;
+    margin-bottom: 1rem;
 }
 
 .card {
@@ -47,10 +37,7 @@
     font-size: 0.9rem;
     margin-bottom: -0.3rem;
 }
-.review-card{
-    background-color: #bbbbbb4f;
-    border: none !important;
-}
+/* reviewshow css */
 .review-card h4{
     font-size: 1rem;
     margin-left: -0.5rem !important;
@@ -92,7 +79,7 @@
     <div class="container">
         <div class="row">
             <div class="col-12 text-center mb-4">
-                <h1><%= list.title %></h1>
+                <h1 style="font-family: rakkas;"><b><%= list.title %></b></h1>
             </div>
             <div class="col-12 col-md-8 mx-auto">
                 <div class="card listing-card">
@@ -115,20 +102,26 @@
                         </button>
                     </div>
                     <div class="card-body text-center">
-                        <h2  style=" color: #022e6a;">Owned by: <%= list.owner.username %></h3>
-                        <h5><%= list.description %></h4>
-                        <h5>Price: &#8377;<%= list.price.toLocaleString("en-IN") %> /night</h4>
-                        <h5>Location: <%= list.location %></h4>
-                        <h5>Country: <%= list.country %></h4>
+                        <h2 class="mt-5" style=" color: #022e6a; font-family: rakkas;">Owned by: <b><%= list.owner.username %></b></h3>
+                            <b><%= list.description %></b>
+                            <p class="listing-price"><b>price:</b>
+                                &#8377;<%= list.price.toLocaleString("en-IN") %>/night
+                            </p>
+                            <p class="listing-location"><b>location:</b>
+                                <%=list.location%>
+                            </p>
+                            <p class="listing-location"><b>country:</b>
+                                <%=list.country%>
+                            </p>
                     </div>
-                    <div class="card-footer text-center">
+                    <div class="text-center">
                         <% if (currUser && currUser._id.equals(list.owner._id)) { %>
                             <div class="buttons">
                                 <form method="post" action="/listing/<%= list._id %>?_method=DELETE" class="d-inline">
-                                    <button class="btn btn-danger">Delete</button>
+                                    <button class="btn btn-outline-danger">Delete</button>
                                 </form>
                                 <form method="get" action="/listing/<%= list._id %>/edit" class="d-inline">
-                                    <button class="btn btn-warning">Edit</button>
+                                    <button class="btn btn-outline-success">Edit</button>
                                 </form>
                             </div>
                         <% } %>
@@ -139,10 +132,12 @@
                 </div>
             </div>
             <hr>
-            <div class="col-12">
-                <h3 class="text-center">Where you will be</h3>
-                <div id="map" class="map"></div>
+            <!-- MAP -->
+            <div class="col-10 offset-1">
+                <h3 class="text-center" style="padding: 10px; font-family: rakkas;">Where you will be</h3>
+                <div id="map" style="width: 100%; height: 400px;"></div>
             </div>
+
             <div class="col-8 offset-2">
                 <% if (currUser) { %>