From 9c037e84182dfd2c1cb54bf82d6bfaa005795fb3 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Sat, 24 Oct 2020 17:28:17 -0600
Subject: [PATCH] Improve tracking UI

---
 www/assets/js/track.js |  3 +++
 www/pages/track.html   | 38 +++++++++++++++++++++++---------------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/www/assets/js/track.js b/www/assets/js/track.js
index 9149539..ca87211 100644
--- a/www/assets/js/track.js
+++ b/www/assets/js/track.js
@@ -5,6 +5,9 @@
  */
 
 function openTrackingInfoPage(id) {
+    if (typeof id == "undefined" || id == null || id == "") {
+        return;
+    }
     router.navigate("/track/" + id);
 }
 
diff --git a/www/pages/track.html b/www/pages/track.html
index 8398481..209f6cb 100644
--- a/www/pages/track.html
+++ b/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>