Assets and style improvements

mskvortsov · Apr 16, 2024 · 2f85276 · 2f85276
1 parent e32811c
commit 2f85276
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 42 deletions.
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -28,7 +28,7 @@ jobs:
       - name: Make dist directory
         run: |
           mkdir dist
-          rsync -R index.html meshmon.js meshmon.css protobufs/meshtastic/*.proto dist/
+          rsync -R index.html meshmon.js meshmon.css protobufs/meshtastic/*.proto assets dist/
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact

diff --git a/.gitmodules b/.gitmodules
@@ -1,4 +1,3 @@
 [submodule "protobufs"]
 	path = protobufs
 	url = https://github.com/meshtastic/protobufs.git
-	branch = v2.3.5
diff --git a/assets/github-mark-white.svg b/assets/github-mark-white.svg
diff --git a/assets/github-mark.svg b/assets/github-mark.svg
diff --git a/assets/meshtastic.svg b/assets/meshtastic.svg
diff --git a/index.html b/index.html
@@ -3,9 +3,8 @@
     <head>
         <meta charset="UTF-8"/>
         <title>Meshtastic MQTT Monitor</title>
-        <link rel="icon" type="image/x-icon" href="https://meshtastic.org/design/web/favicon.ico">
+        <link rel="icon" type="image/svg+xml" href="assets/meshtastic.svg">
         <link rel="stylesheet" href="meshmon.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.5.2/mqtt.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/protobufjs/7.2.6/protobuf.min.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.2.0/crypto-js.min.js"></script>
@@ -16,7 +15,7 @@
             <thead>
                 <tr id="filter-row">
                     <th id="filter-cell">
-                        <table class="table-foot">
+                        <table class="table-head">
                             <tr>
                                 <td>
                                     <input id="filter-expr-input" type="text"/>
@@ -33,11 +32,11 @@
                         </table>
                     </th>
                 </tr>
-                <tr id="thead-row"></tr>
+                <tr id="thead-row" class="verbatim"></tr>
             </thead>
             <tbody id="tbody"></tbody>
             <tfoot>
-                <tr id="fit-row"></tr>
+                <tr id="fit-row" class="packet-header-row"></tr>
                 <tr id="status-row" class="status-disconnected">
                     <td id="status-cell"></td>
                 </tr>
@@ -56,7 +55,8 @@
                                 </td>
                                 <td class="right">
                                     <a href="https://github.com/mskvortsov/meshmon" target="_blank">
-                                        <span class="fa-brands fa-github-alt"></span>
+                                        <img src="assets/github-mark.svg" class="logo logo-light"/>
+                                        <img src="assets/github-mark-white.svg" class="logo logo-dark"/>
                                     </a>
                                 </td>
                             </tr>

diff --git a/meshmon.css b/meshmon.css
@@ -1,12 +1,17 @@
 :root {
+    --font-family-main: Arial, sans-serif;
+    --font-family-verbatim: Monaco, monospace;
+
     color-scheme: light;
     --font-color: #424242;
     --bg-color: white;
     --td-border: 1px solid #cbcbcb;
-    --packet-header-outbound-bg-color: #96f988;
+    --packet-header-outbound-bg-color: #a6dba2;
     --packet-header-bg-color: #dddddd;
     --filter-ok-bg-color: #8caeff;
     --filter-error-bg-color: #d5899c;
+    --logo-light-mode: block;
+    --logo-dark-mode: none;
 }
 
 [data-theme="dark"] {
@@ -18,33 +23,35 @@
     --packet-header-bg-color: #333333;
     --filter-ok-bg-color: #005596;
     --filter-error-bg-color: #4b2f36;
+    --logo-light-mode: none;
+    --logo-dark-mode: block;
 }
 
 body {
-    font-family: Verdana, sans-serif;
+    font-family: var(--font-family-main);
+    font-size: 14px;
     background-color: var(--bg-color);
     color: var(--font-color);
 }
+.verbatim {
+    font-family: var(--font-family-verbatim);
+    font-size: 12px;
+}
 
+.table-main {
+    border-collapse: collapse;
+    border: none;
+}
 .table-main td {
     white-space: nowrap;
     padding-left: 8px;
     padding-right: 8px;
+    border: var(--td-border);
 }
 .table-main thead {
     position: sticky;
     top: 0;
 }
-.table-main thead, tbody {
-    font-family: monospace;
-}
-.table-main {
-    border-collapse: collapse;
-    border: none;
-}
-.table-main td {
-    border: var(--td-border);
-}
 .table-main tr:first-child td {
     border-top: none;
 }
@@ -71,12 +78,11 @@ body {
 .packet-header-row-outbound {
     background: var(--packet-header-outbound-bg-color);
 }
-.decoded td {
+.packet-decoded {
     text-align: left;
-    font-size: 80%;
 }
 #filter-expr-input {
-    width: 99%;
+    width: 100%;
 }
 .status-disconnected {
     background-color: #ea7a6c;
@@ -93,37 +99,39 @@ body {
 
 #fit-row {
     visibility: collapse;
-    font-family: monospace;
 }
 .right {
     text-align: right;
-    margin-right: 1em;
 }
 .left {
     text-align: left;
-    margin-left: 1em;
 }
-#connect-cell {
-    padding: 0;
+.table-head, .table-foot {
+    width: 100%;
 }
-.table-foot {
+.table-head td, .table-foot td {
     padding: 0;
     width: 100%;
+    border: 0;
 }
-.table-foot label, button, input, span {
-    font-family: Verdana, sans-serif;
+
+/* Source code link logo */
+
+.logo {
+    height: 22px;
 }
-.table-foot td {
-    padding: 0;
-    border: 0;
+.logo-light {
+    display: var(--logo-light-mode);
 }
-.table-foot a {
-    color: var(--font-color);
+.logo-dark {
+    display: var(--logo-dark-mode);
 }
 
+/* Theme switcher */
+
 .theme-switch-wrapper {
-    width: 6px;
-    align-items: right;
+    width: 40px;
+    padding-left: 10px;
 }
 
 .theme-switch {
@@ -175,3 +183,9 @@ input:checked+.theme-slider:before {
 .theme-slider.round:before {
     border-radius: 50%;
 }
+
+/* For Safari */
+input, button {
+    font-family: var(--font-family-main);
+    font-size: 14px;
+}
diff --git a/meshmon.js b/meshmon.js
@@ -273,9 +273,9 @@ function render(se) {
 
     var headerRow = tbody.insertRow();
     if (se.packet.rxRssi == 0) {
-        headerRow.className = 'packet-header-row-outbound';
+        headerRow.className = 'packet-header-row-outbound verbatim';
     } else {
-        headerRow.className = 'packet-header-row';
+        headerRow.className = 'packet-header-row verbatim';
     }
 
     fields.forEach((field) => {
@@ -306,12 +306,12 @@ function render(se) {
     }
 
     var row = tbody.insertRow();
-    row.className = 'decoded';
     var cell = row.insertCell();
+    cell.className = 'packet-decoded verbatim';
     cell.colSpan = fields.length;
     var decoded = document.createElement('pre');
-    cell.appendChild(decoded);
     decoded.textContent = decodedText;
+    cell.appendChild(decoded);
 }
 
 function mqttOnMessage(topic, message) {