Fix responsiveness

lucasbbs · Mar 17, 2024 · 59ff199 · 59ff199
1 parent 8ea24f5
commit 59ff199
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 5 deletions.
diff --git a/Areas/Admin/Views/Order/Index.cshtml b/Areas/Admin/Views/Order/Index.cshtml
@@ -57,7 +57,7 @@
                 </a>
             </ul>
         </div>
-        <table id="tblData" class="table table-bordered table-striped" style="width:100%">
+        <table id="tblData" class="table responsive table-bordered table-striped" style="width:100%">
             <thead>
                 <tr>
                     <th>ID</th>

diff --git a/Areas/Admin/Views/User/Index.cshtml b/Areas/Admin/Views/User/Index.cshtml
@@ -7,7 +7,7 @@
         </div>
     </div>
     <div class="card-body p-4">
-        <table id="tblData" class="table table-bordered table-striped" style="width:100%">
+        <table id="tblData" class="table responsive table-bordered table-striped" style="width:100%">
             <thead>
                 <tr>
                     <th>Name</th>

diff --git a/Areas/Customer/Views/Home/Index.cshtml b/Areas/Customer/Views/Home/Index.cshtml
@@ -18,11 +18,10 @@
         <div class="col-lg-3 col-sm-6">
             <div class="row p-2">
                 <div class="col-12 p-1">
-                    <div class="card border-0 p-3 shadow border-top border-5 rounded" style="height: 400px;">
-                        <div class="card-img-top rounded bg-image d-flex justify-content-center align-items-center"
+                    <div class="card border-0 p-3 shadow border-top border-5 rounded responsive-browsing-tables">
+                        <div class="table-card-product card-img-top rounded bg-image d-flex justify-content-center align-items-center"
                           style="
                             background-image: url('@table.ImageUrl');
-                            height: 150px !important;
                             background-size: cover;
                             background-position: center;
                           "

diff --git a/Views/Shared/_Layout.cshtml b/Views/Shared/_Layout.cshtml
@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.min.css" />
     <link rel="icon" type="image/svg+xml" href="~/images/ClearEdge Tables Logo.svg">
+    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/3.0.0/css/responsive.dataTables.min.css" />
+
 </head>
 <body>
     <header>
@@ -68,6 +70,7 @@
     </footer>
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/jquery/dist/jquery.dataTables.min.js"></script>
+    <script src="https://cdn.datatables.net/responsive/3.0.0/js/dataTables.responsive.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
     @await RenderSectionAsync("Scripts", required: false)

diff --git a/wwwroot/css/site.css b/wwwroot/css/site.css
@@ -19,4 +19,22 @@ html {
 
 body {
   margin-bottom: 60px;
+}
+
+.responsive-browsing-tables {
+    height: 400px;
+}
+
+.table-card-product {
+    height: 150px;
+}
+
+@media (max-width: 540px) {
+    .responsive-browsing-tables {
+        height: 100%;
+    }
+
+    .table-card-product {
+        height: 320px;
+    }
 }