testing pwa functionality

docs/css/main.css

@@ -1433,12 +1433,23 @@ sm-checkbox {
     flex: 1;
   }
 
+  #asset_page__footer button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    padding: 0.5rem 0;
+    color: rgba(var(--text-color), 0.8);
+    font-size: 0.8rem;
+    font-weight: 500;
+  }
   #asset_page__footer button .icon {
+    height: 1.2rem;
+    margin-bottom: 0.3rem;
     margin-right: 0.3rem;
   }
   #asset_page__footer button.active {
     color: var(--accent-color);
-    background-color: rgba(var(--text-color), 0.03);
   }
   #asset_page__footer button.active .icon {
     fill: var(--accent-color);

docs/css/main.scss

@@ -1279,12 +1279,21 @@ sm-checkbox {
   }
   #asset_page__footer {
     button {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1;
+      padding: 0.5rem 0;
+      color: rgba(var(--text-color), 0.8);
+      font-size: 0.8rem;
+      font-weight: 500;
       .icon {
+        height: 1.2rem;
+        margin-bottom: 0.3rem;
         margin-right: 0.3rem;
       }
       &.active {
         color: var(--accent-color);
-        background-color: rgba(var(--text-color), 0.03);
         .icon {
           fill: var(--accent-color);
         }

docs/index.html

@@ -7,7 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RanchiMall exchange</title>
     <meta name="description" content="Trade FLO and FLO based RanchiMall tokens.">
-
+    <meta name="theme-color" content="#516beb" />
+    <link rel="manifest" href="manifest.json" />
     <script src="scripts/components.js" defer></script>
     <link rel="stylesheet" href="css/main.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -318,7 +319,7 @@
                                 </div>
                             </div>
                         </div>
-                        <div>
+                        <div class="hide">
                             <ul id="market_trades" class="observe-empty-state"></ul>
                             <p class="empty-state">
                                 No trades happened
@@ -1028,6 +1029,11 @@
 
         !function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
     </script>
+    <script>
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register("scripts/serviceworker.js");
+        }
+    </script>
     <script id="ui_utils">
         // Global variables
         const domRefs = {};

docs/manifest.json

@@ -0,0 +1,52 @@
+{
+  "name": "RanchiMall Exchange",
+  "short_name": "short name",
+  "theme_color": "#516beb",
+  "background_color": "rgb(241, 243, 248)",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "images/icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

docs/scripts/serviceworker.js

@@ -0,0 +1,6 @@
+self.addEventListener("install", event => {
+    console.log("Service worker installed");
+});
+self.addEventListener("activate", event => {
+    console.log("Service worker activated");
+});