From 25789deefd38dc1a49d469fbe5fc16eaa943f6c2 Mon Sep 17 00:00:00 2001
From: Amirul Amin <amirul@tuxuri.com>
Date: Mon, 9 Aug 2021 22:38:54 +0800
Subject: [PATCH] wip tracking page responsive

---
 .../views/pages/tracking/index.blade.php      | 40 +++++++++++++++++++
 resources/views/partials/pagination.blade.php | 29 ++++++++++++++
 resources/views/partials/search.blade.php     |  8 ++++
 3 files changed, 77 insertions(+)
 create mode 100644 resources/views/pages/tracking/index.blade.php
 create mode 100644 resources/views/partials/pagination.blade.php
 create mode 100644 resources/views/partials/search.blade.php

diff --git a/resources/views/pages/tracking/index.blade.php b/resources/views/pages/tracking/index.blade.php
new file mode 100644
index 00000000..13ecf558
--- /dev/null
+++ b/resources/views/pages/tracking/index.blade.php
@@ -0,0 +1,40 @@
+<div>
+    <!-- Search Bar -->
+    @include('partials.search')
+
+    <!-- Accordion -->
+     <div id="accordionExample" class="accordion shadow-sm">
+        <div class="card">
+            <div id="headingOne" class="d-flex flex-row justify-content-between align-items-center card-header p-3 bg-white shadow-sm border-0 pointer" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                <div class="d-flex flex-column">
+                    <span class="fs-14 bold">Shipping ID: 844120110-386-303</span>
+                    <span class="fs-12">Status: In Transit</span>
+                </div>
+                <div class="my-0">
+                    <i class="fa fa-chevron-down"></i>
+                </div>
+            </div>
+            <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show">
+                <div class="card-body p-3">
+                    <div class="w-100 table mt-0 b-rad-2">
+                        <div class="d-table" style="border-spacing: 10px;">
+                            <div class="w-100 d-table-row border" style="color: #a6a6a6;">
+                                <div scope="col" class="w-50 d-table-cell fs-12">Package ID</div>
+                                <div scope="col" class="w-50 d-table-cell fs-12">Delivery Address</div>
+                                <div scope="col" class="w-50 d-table-cell fs-12">Delivery Estimation</div>
+                            </div>
+                            <div class="w-100 d-table-row border">
+                                <div scope="col" class="d-table-cell fs-14 bold">6288153-MY31434750</div>
+                                <div scope="col" class="d-table-cell fs-14 bold">Home</div>
+                                <div scope="col" class="d-table-cell fs-14 bold">20/04/2022</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Pagination -->
+    @include('partials.pagination')
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/pagination.blade.php b/resources/views/partials/pagination.blade.php
new file mode 100644
index 00000000..feb3b155
--- /dev/null
+++ b/resources/views/partials/pagination.blade.php
@@ -0,0 +1,29 @@
+<div class="w-100 my-4 d-flex justify-content-center">
+    <div class="mb-0 d-flex justify-content-between pagination">
+        <div class="page-item d-none d-md-block">
+            <a class="p-3 pointer text-muted">First</a>
+        </div>
+        <div class="page-item disabled">
+            <a class="p-3 pointer" aria-label="Previous">
+                <i class="fa fa-chevron-left"></i>
+            </a>
+        </div>
+        <div class="page-item active">
+            <a class="p-3 pointer text-primary">1</a>
+        </div>
+        <div class="page-item">
+            <a class="p-3 pointer text-dark">2</a>
+        </div>
+        <div class="page-item">
+            <a class="p-3 pointer text-dark">3</a>
+        </div>
+        <div class="page-item">
+            <a class="p-3 pointer" aria-label="Next">
+                <i class="fa fa-chevron-right"></i>
+            </a>
+        </div>
+        <div class="page-item d-none d-md-block">
+            <a class="p-3 pointer">Last</a>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/partials/search.blade.php b/resources/views/partials/search.blade.php
new file mode 100644
index 00000000..854a3970
--- /dev/null
+++ b/resources/views/partials/search.blade.php
@@ -0,0 +1,8 @@
+<div class="input-group my-4 border b-rad-2 p-1">
+    <div class="input-group-prepend border-0">
+        <div id="button-addon4" type="button" class="btn btn-link text-default">
+            <i class="fa fa-search"></i>
+        </div>
+    </div>
+    <input type="search" placeholder="Search by Order Number, Warehouse, Delivery..." aria-describedby="button-addon" class="form-control bg-none border-0">
+</div>
\ No newline at end of file