cief/shipping-portal
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git synced 2026-08-19 04:24:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'order-details' into 'master'

Browse Source 
responsive order details

See merge request CIEFWorldwideSdnBhd/shipping-portal!36
This commit is contained in:
Fairuz
2021-08-07 04:23:00 +00:00
parent efdc6c0e46 4e910203d0
commit db12b2f26c
2 changed files with 118 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/pages/order_details.blade.php
+102
View File
@@ -0,0 +1,102 @@
<div class="col-0">
<!-- QR Code Structure -->
<div class="row">
<div class="d-flex flex-row align-items-center">
<div class="col">
<img class="p-2 border" style="width: 100px; height: 100px;" src="http://eslkidsgames.com/Flash/QR%20Code%20Maker/eslkidsgames.com.png">
</div>
<div class="d-flex flex-column pl-3">
<span class="fs-16" style="color: #a6a6a6;">Order #00012558</span>
<span class="py-2 fs-20 bold">Your order(s) are ready for shipment</span>
<span class="fs-14" style="color: #a6a6a6;">Ordered at 1:54PM on 12 August, 2021</span>
</div>
</div>
</div>
<!-- Banner Component -->
<div class="py-3">
<div class="p-3 card b-rad-2 no-border" style="background-color: #f6f6f6;">
<div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between">
<div class="d-flex flex-column">
<span class="fs-14 bold" style="color: #5c5c5c;">Latest Update</span>
<span class="fs-12 bold" style="color: #5c5c5c;">Today <span class="fs-12" style="color: #a6a6a6;">at 3:04PM</span></span>
<div>
<span class="fs-12" style="color: #a6a6a6;">From: Guangzhou, China</span>
<span class="fs-12 pl-3 pl-sm-5" style="color: #a6a6a6;">To: Kuala Lumpur, Malaysia</span>
</div>
</div>
<div class="d-flex flex-row">
<div class="d-none d-md-inline">
<div class="col-6 border-right" style="height: 50px;"></div>
</div>
<div class="pl-md-4 d-flex flex-column">
<span class="fs-14 text-right" style="color: #a6a6a6;">Carrier Tracking Number</span>
<span class="fs-14 bold text-right text-underline" style="color: #5c5c5c">#1ZYBR067TW403742920</span>
</div>
</div>
</div>
</div>
</div>
<!-- Stepper Bar -->
@include('partials.tab')
<!-- Order List Item -->
<div class="w-100">
<div class="border-top border-bottom" style="border-color: #e6e6e6;">
<div class="py-3">
<div clas="row">
<div class="d-flex flex-column flex-sm-row">
<div class="col-0">
<!-- Placeholder, We Can Simply Remove It Once We Have Another Design -->
<svg xmlns="http://www.w3.org/2000/svg" width="100.181" height="79.5" viewBox="0 0 100.181 79.5">
<g id="Group_1383" data-name="Group 1383" transform="translate(-889.514 -181.288)">
<path id="Path_4020" data-name="Path 4020" d="M952,332.246l-62.483-19.631V266.054L952,279.356Z" transform="translate(0 -71.459)" fill="#d3b875"/>
<path id="Path_4021" data-name="Path 4021" d="M1325.213,284.831l-37.7,21.43v-52.89l37.7-18.141Z" transform="translate(-335.518 -45.473)" fill="#b78c58"/>
<path id="Path_4022" data-name="Path 4022" d="M889.514,194.6l38.136-13.308,62.045,8.468L952,207.9Z" transform="translate(0 0)" fill="#f2d08b"/>
<path id="Path_4023" data-name="Path 4023" d="M1005.032,216.015l58.887,12.9,1.21,21.085,2.074,3.024,1.026-3.889,1.394,1.21,1.383-2.765,1.037,1.555-1.334-23.749L1010.224,214.2Z" transform="translate(-97.383 -27.748)" fill="#846b3d" opacity="0.6"/>
<path id="Path_4024" data-name="Path 4024" d="M1053.026,217.9l36.813-15.45,6.263.855-35.319,16.246Z" transform="translate(-137.842 -17.844)" fill="#846b3d" opacity="0.6"/>
<path id="Path_4025" data-name="Path 4025" d="M1053.026,300.865v49.162l7.757,2.437V302.516Z" transform="translate(-137.842 -100.804)" fill="#846b3d"/>
<path id="Path_4026" data-name="Path 4026" d="M1330.25,542.961c0,.573-.427.769-1.037,1.037l-6.394,3.228c-.864.43-1.037-.464-1.037-1.037v-9.851c0-.573.374-.708,1.037-1.037l6.394-3.228c1.354-.691.948.714,1.037,3.37Z" transform="translate(-364.405 -295.567)" fill="#fff"/>
<path id="Path_4027" data-name="Path 4027" d="M1325.959,549.8l6.346-3.084v.354l-6.346,3.191Z" transform="translate(-367.927 -308.06)" fill="#4c402c"/>
<path id="Path_4028" data-name="Path 4028" d="M1325.959,557.536l6.346-3.084v.355L1325.959,558Z" transform="translate(-367.927 -314.58)" fill="#4c402c"/>
<path id="Path_4029" data-name="Path 4029" d="M1325.959,566.218l6.346-3.084v.355l-6.346,3.191Z" transform="translate(-367.927 -321.899)" fill="#4c402c"/>
<path id="Path_4030" data-name="Path 4030" d="M1326.912,596.125l4.012-1.95.05.369-4.061,2.042Z" transform="translate(-368.731 -348.067)" fill="#4c402c"/>
<path id="Path_4031" data-name="Path 4031" d="M1326.912,602l4.012-1.95.05.369-4.061,2.042Z" transform="translate(-368.731 -353.017)" fill="#4c402c"/>
<path id="Path_4032" data-name="Path 4032" d="M1326.912,607.985l4.012-1.95.05.369-4.061,2.042Z" transform="translate(-368.731 -358.065)" fill="#4c402c"/>
</g>
</svg>
</div>
<div class="w-100 d-flex flex-column">
<div class="d-flex">
<div class="col pl-4">
<div class="row">
<div class="d-flex flex-column pl-3">
<span class="fs-12 bold" style="color: #5c5c5c;">MY55899874</span>
<span class="py-2 fs-14 bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</span>
</div>
</div>
<div class="d-flex flex-row">
<span class="fs-12" style="color: #a6a6a6;">From: Guangzhou, China</span>
<span class="fs-12 pl-3 pl-sm-5" style="color: #a6a6a6;">To: Kuala Lumpur, Malaysia</span>
</div>
</div>
<div class="d-flex flex-column">
<span class="fs-12 all-caps text-right" style="color: #912873;">To Be Shipped</span>
<span class="py-2 fs-12 text-right bold">52x65x35 CM / 10KG</span>
</div>
</div>
<div class="pt-3 d-flex align-items-center">
<span class="col pl-4 fs-12" style="color: #a6a6a6;">Date: 12 August, 2021</span>
<div class="d-flex flex-row justify-content-between" style="width: 295px;">
<div class="btn btn-primary b-rad-2" style="width: 145px;">Ship Now</div>
<div class="btn btn-secondary b-rad-2" style="width: 145px;">Details</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
resources/views/partials/tab.blade.php
+16
View File
@@ -0,0 +1,16 @@
<div class="card-header mb-md-3 bg-white shadow-sm no-border">
<div class="nav nav-pills nav-fill" role="tablist">
<div class="nav-item">
<a class="nav-link active" href="#">To Ship</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="tab" href="#" role="tab">In Transit</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="tab" href="#" role="tab">To Receive</a>
</div>
<div class="nav-item">
<a class="nav-link" data-toggle="tab" href="#" role="tab">Completed</a>
</div>
</div>
</div>