From c7dcb8974c06e3cc4462cb1ffbc71b4ecf6976b3 Mon Sep 17 00:00:00 2001
From: Darel <fedrickdarel@gmail.com>
Date: Fri, 23 Mar 2018 16:17:26 +0800
Subject: [PATCH] create SO popup contact list

---
 .vs/IZYIM-mobile-client/v15/.suo | Bin 54272 -> 62976 bytes
 .vs/VSWorkspaceState.json        |   5 +--
 .vs/slnx.sqlite                  | Bin 94208 -> 94208 bytes
 contact-invite.html              |   2 +-
 create-shipping-order-S1.html    |  60 +++++++++++++++++++++++++++----
 5 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/.vs/IZYIM-mobile-client/v15/.suo b/.vs/IZYIM-mobile-client/v15/.suo
index 02d5b1d7a3f57d866481c9eb788550329b3cb5d6..2f56520bd58f9b390ce4699caa8523c03e76db54 100644
GIT binary patch
delta 3472
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

delta 2139
zcmchYdraF^6vuz}M;UEl;|(2y@}oQ~h@&uGV=Zf;Fl4xuN6H2>!WfLXxv&8WOxHS{
z4@80AacZ1n&_Oa;On_fv;v^1%m?i24Gg&ll6CLpphfc#{_J`m(rI7hx(HOnSC+Ggo
zJ-s*ge$P3z-*B^^cI(iyfI&k7ui*5@x=KesVF}R4+gK~y;)`XgIgW#^InkiwJ)p_0
z*XE55C9(>co1dRoqeU|>M;nfWAoQbPWDOFFtU$B~#g(Cb00~6yLllTVLTk}zSGwl(
z?Td2_5`*|5c%E%O1t*b6K0-l@!_)PxL+j(3uS1)Rq#`?zG$b8ak7OVl5W0i`Z6>l2
zF(M`;3o#?K|0cA#NECN3#}&Aow6GcHDug!4xx-Iur4ZpBY}$_AdysNu8&ZLUA{4PW
zD)GC@<=cg}8mU2cBen3Qdw6GsS>*RAI=ru*xVu0eZ#V^7-1v_|3Ao{32}SW?xJEVt
ztqfUCD0+7<goGl2NsBv#QaU%G_ei1p+x{O}mQ}^?zm`R*WpkZ{k3qLm1>d@>IxF%d
zm8XtDo?HBiLVTK<AZYPwVL@=q%f<qsaphJyDL_d>bw%Z*M|i3M9OA#+kCa*34}LXl
zl2h)J$63V(GK&<9RHn>#dVb2h1Y>+6%x;W7B}DNc>^cQwSq4Wn6H~JxJ1!9#QcGk(
zOW~=-FwW~>WTy<8(hB6%20WG)(-I|(W{!an5GCi)OSQOgZos95bEyIsJb^_E=LW`0
zLfjM+)n+-RE0rz<P+v$wW_+MUeLrM}8N~2B8F^_{IuL%5d2YK%zo7nd3=-Q?!~!jJ
z?p47^gb}iywo2BFe&+Dw9adfpDUnl364H*4Ugn7ZvrkMCefXZ+ocD`e^|No4y_@*n
znukD$S4$&FMg~3m%VBSQ0yNiZ!Mpw?Fdn!07!%rtrf)X>{LA(9pa(~qEEpXK)5k-_
z{5?LMFZ7(8xiYzWUB2Bz@y-vgLUVp-+*$09BFaCBov#|7t{a89fOq=n5XYUzf|`CF
z*U-AZCY{SSv7xou%$-qlg04ahwqT`LiO-(!+)%oThly(zs4e;|^i6!Sxzik{#wz@L
zjN{H=^^(Lipt~*-?8SC4m4-uja;1;q$yVPdgoE9}?Tk-jzQ1Y#Q(GtN#n-Eb%twvz
z-JbOh6+dJYcuDY^V(`8;76y(ep}RvV8MI@}kt>6U+E^HASAwPKgfwwQ#~d2ou|*~(
z2ZQ=Yzu!gwgHwl!Ow4(cRM$=Xm$}K`%1Y|*i&;q(M!KVM4zbJ(<~SWRs3zp}heiJf
z3n^9J&WmvZ2w9N|M)g6tO)FHdA0R#8Te%s`)x#iEnqfR!4<l#$L3h+kdb=XuZRlm=
z-7?Zqqj8A5qg5_i&-wO5_NA8O+}s{8dhOxas;X}|Y?c0S-5Lgy?GZ3@vIgpEHb~RE
z&+yVCuYd=bVy)uW7FcVu!_<dnmrci`4~mD)uz$?U>6#dfgNZ(zKi&_PL#trmf(rCU
zYov+8C{iyEJ3sD{y6mDm=q|T`z1a?ys#P$2xk<9L4luZ(RfD>t4n}A6l73*^6N(1>
zr0$Li1{KZtD6fAdHSB9+EE*E~2BnxUwlK%23^Yk~()3gZgCoycLHAS?4Ci`D&zx`Z
F{0&&7$@TyM

diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
index d523c74..dd80815 100644
--- a/.vs/VSWorkspaceState.json
+++ b/.vs/VSWorkspaceState.json
@@ -1,7 +1,8 @@
 {
   "ExpandedNodes": [
-    ""
+    "",
+    "\\css"
   ],
-  "SelectedNode": "\\reset-password.html",
+  "SelectedNode": "\\search-contact.html",
   "PreviewInSolutionExplorer": false
 }
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
index f46f863ebbe2e7dda9ce517c59204e66d6ccd848..10fad41593749c395f2831a8bc7dccf69c8ccd25 100644
GIT binary patch
delta 2448
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

delta 2538
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

diff --git a/contact-invite.html b/contact-invite.html
index 729cd45..04e1141 100644
--- a/contact-invite.html
+++ b/contact-invite.html
@@ -22,7 +22,7 @@
             <div class="search-result-header fix-searchbar">
                 <!-- or without .fix-searchbar -->
                 <form class="fix-searchbar">
-                    <input type="text" id="searchInput" class="form-element" placeholder="search by mobile contact" onkeyup="CSearch()">
+                    <input type="text" id="searchInput" class="form-element" placeholder="search by mobile contact">
                     <button id="btnback" type="button" class="search-result-btn"><i class="fa fa-arrow-left"></i></button>
                 </form>
             </div>
diff --git a/create-shipping-order-S1.html b/create-shipping-order-S1.html
index 3ffe564..7225cb7 100644
--- a/create-shipping-order-S1.html
+++ b/create-shipping-order-S1.html
@@ -90,11 +90,7 @@
 
                         <div class="form-row-group">
                             <div class="form-row no-padding">
-                                <select class="form-element">
-                                    <option value="">Select your freight forwarder</option>
-                                    <option value="1">KFC</option>
-                                    <option value="2">Surgar Bun</option>
-                                </select>
+                                <input id="ff" type="text" class="form-element" placeholder="Select your frieght forwarder" onclick="myFunction()" data-popup="formPopup" required />
                             </div>
                             <div class="form-row no-padding">
                                 <input id="branch-name" type="text" class="form-element" placeholder="Supplier Company Name" required />
@@ -120,8 +116,8 @@
                             <div class="form-row no-padding">
                                 <select class="form-element">
                                     <option value="">please choose delivery</option>
-                                    <option value="1">KFC</option>
-                                    <option value="2">Surgar Bun</option>
+                                    <option value="1">Branch 1</option>
+                                    <option value="2">Branch 2</option>
                                 </select>
                             </div>
                             <div class="form-row no-padding">
@@ -209,9 +205,59 @@
         </div>
     </div>
 
+    <!--POPUP HTML CONTENT START -->
+    <div class="popup-overlay" id="formPopup">
+        <!-- if you dont want overlay add class .no-overlay -->
+        <div class="popup-container">
+            <div class="popup-header">
+                <h3 class="popup-title">Contact List</h3>
+                <span class="popup-close" data-dismiss="true"><i class="fa fa-times"></i></span>
+            </div>
+            <div class="popup-content">
+                <div class="list-box" style="position: inherit; margin-left:0">
+                    <!-- Content List Spawner Start Here-->
+                    <div class="form-row txt-center">
+                        <a>Choose the forwarder</a>
+                    </div>
+                    <div class="form-divider"></div>
+                    <div id="content">
+                        <a id="active" href="#" class="list-item" data-dismiss="true">
+                            <i class="fa fa-user" style="color: green"></i>
+                            <em class="seperate-contact"></em>
+                            <span class="list-item-title-contact">Bryan</span>
+                            <br />
+                            <span class="list-item-title-contact" style="margin-top:-13px">Forwarder</span>
+                        </a>
+                        <a href="#" class="list-item" data-dismiss="true">
+                            <i class="fa fa-user" style="color: red"></i>
+                            <em class="seperate-contact"></em>
+                            <span class="list-item-title-contact">Dylan</span>
+                            <br />
+                            <span class="list-item-title-contact" style="margin-top:-13px">Forwarder</span>
+                        </a>
+                        <a href="#" class="list-item" data-dismiss="true">
+                            <i class="fa fa-user" style="color: green"></i>
+                            <em class="seperate-contact"></em>
+                            <span class="list-item-title-contact">Edmund</span>
+                            <br />
+                            <span class="list-item-title-contact" style="margin-top:-13px">Forwarder</span>
+                        </a>
+                    </div>
+                    <!-- Content List Spawner End Here-->
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--POPUP HTML CONTENT END -->
+    <!-- Required For All Pages, Otherwise Ugly Others Function Won't Work -->
     <script src="js/jquery-3.2.1.min.js"></script>
     <script src="js/global.script.js"></script>
 
+    <script type="text/javascript">
+        document.getElementById("active").onclick = function () {
+            document.getElementById("ff").textContent = "Profile";
+        };
+    </script>
 
 </body>