Improve tracking UI

www/assets/js/track.js

@@ -5,6 +5,9 @@
  */
 
 function openTrackingInfoPage(id) {
+    if (typeof id == "undefined" || id == null || id == "") {
+        return;
+    }
     router.navigate("/track/" + id);
 }
 

www/pages/track.html

@@ -19,22 +19,30 @@
 
     <div class="page-content">
         <div class="row justify-content-center">
-            <div class="col-100 medium-60 large-50 xlarge-40">
-                <div class="list no-hairlines tablet-inset elevation-tablet">
-                    <ul>
-                        <li class="item-content item-input">
-                            <div class="item-inner">
-                                <div class="item-title item-label">Device ID or Tracking Code</div>
-                                <div class="item-input-wrap">
-                                    <input type="text" name="deviceid" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
-                                    <span class="input-clear-button"></span>
-                                </div>
+            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
+                <div class="card margin">
+                    <div class="card-content text-align-center padding-vertical">
+                        <div>
+                            <div class="card-header display-block no-hairlines">
+                                <h3 class="no-margin">Device ID or Tracking Code</h3>
                             </div>
-                        </li>
-                        <li class="item-content">
-                            <a class="button button-fill" id="trackbtn" onclick="openTrackingInfoPage($('input[name=\'deviceid\']').val())"><i class="fal fa-search"></i> Track</a>
-                        </li>
-                    </ul>
+                        </div>
+                        <div class="list">
+                            <ul>
+                                <li class="item-content item-input item-input-outline">
+                                    <div class="item-inner">
+                                        <div class="item-input-wrap">
+                                            <input type="text" id="deviceid" placeholder="" autocomplete="off" autocorrect="off" autocapitalize="off" />
+                                            <span class="input-clear-button"></span>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="card-content-padding">
+                            <div class="button" onclick="openTrackingInfoPage($('input[name=\'deviceid\']').val())"><i class="fal fa-search"></i> Track</div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>