src/index.html

@@ -167,8 +167,7 @@
                             information hidden to make reading
                             messages easier.
                             <ul>
-                                <li>Tap on the <i class="bi
-                                    bi-clock"></i> clock to see the
+                                <li>Tap on the pound sign to see the
                                     date and time of the message.</li>
                                 <li>Tap again to hide the popup.</li>
                                 <li>Long chat messages are scrollable.

src/scss/index.scss

@@ -63,7 +63,7 @@ th, td {
     }
 
     .message-mobile-date-time {
-	width: 2em;
+	width: 1em;
     }
 
     .message-from-user {

src/ts/index.ts

@@ -103,8 +103,7 @@ function processFragment() {
 async function saveToDatabase(filename: string, xml: string) {
     db.entries
         .put({ filename, backupData: xml })
-        .then(_ => toggleLoadPrevious(true))
-        .catch(err => console.error('Saving Failed', err));
+        .catch(err => displayFatalError('Saving Failed', err));
 }
 
 function displayBackup(xsltProcessor: XSLTProcessor, filename: string, xmlText: string): boolean {
@@ -137,29 +136,7 @@ function displayBackup(xsltProcessor: XSLTProcessor, filename: string, xmlText:
     }
 }
 
-function toggleLoadPrevious(toggle: boolean) {
-    ui.loadPreviousButtons.forEach(btn => {
-        if (toggle) {
-            btn.classList.remove('disabled');
-        } else {
-            btn.classList.add('disabled');
-        }
-    });
-}
-
-async function initEvents() {
-    db.entries.count()
-        .then(count => {
-            if (count < 1) {
-                toggleLoadPrevious(false);
-            }
-        })
-        .catch(err => {
-            //Something wrong with db access, disable buttons anyway.
-            console.error(err);
-            toggleLoadPrevious(false);
-        });
-
+function initEvents() {
     ui.loadPreviousButtons.forEach(button => button.addEventListener('click', async () => {
         await populateSavedBackups();
     }));
@@ -213,7 +190,15 @@ async function populateSavedBackups() {
 }
 
 window.addEventListener('DOMContentLoaded', async () => {
-    await initEvents();
+    window.addEventListener('resize', () => {
+        if (window.innerWidth <= 500) {
+            ui.chatDisplay.querySelector('table')?.classList.add('table-sm');
+        } else {
+            ui.chatDisplay.querySelector('table')?.classList.remove('table-sm');
+        }
+    });
+
+    initEvents();
     showLoadingIndicator(false);
     showApplication(true);
 });

src/ts/ui.ts

@@ -8,9 +8,9 @@ export const chatDisplay: HTMLElement = document.getElementById('chat-display')!
 export const fileSelector: HTMLInputElement = document.getElementById('backup-file')! as HTMLInputElement;
 export const savedBackups: HTMLSelectElement = document.getElementById('saved-backups')! as HTMLSelectElement;
 export const viewNewButtons =
-    <NodeListOf<HTMLElement>>document.querySelectorAll('#unloaded-view-new-button, #loaded-view-new-button');
+    document.querySelectorAll('#unloaded-view-new-button, #loaded-view-new-button');
 export const loadPreviousButtons =
-    <NodeListOf<HTMLElement>>document.querySelectorAll('#unloaded-load-previous-button, #loaded-load-previous-button');
+    document.querySelectorAll('#unloaded-load-previous-button, #loaded-load-previous-button');
 export const previousBackupsList: HTMLDivElement = document.getElementById('previous-backups-list')! as HTMLDivElement;
 export const noFileLoadedControls: HTMLDivElement = document.getElementById('no-file-loaded-controls')! as HTMLDivElement;
 export const fileLoadedControls: HTMLDivElement = document.getElementById('file-loaded-controls')! as HTMLDivElement;

src/xsl/MessageLog.xsl

@@ -96,7 +96,7 @@ https://github.com/jerecui/MSNChatHistoryCombiner
   </xsl:template>
 
   <xsl:template match="From/User">
-    <a class="info-popover" href="javascript:void(0);" tabindex="0"
+    <a class="info-popover" href="#" tabindex="0"
        data-bs-trigger="focus"
        data-bs-container="body" data-bs-toggle="popover"
        data-bs-placement="bottom" data-bs-title="Username">
@@ -119,14 +119,14 @@ https://github.com/jerecui/MSNChatHistoryCombiner
 
     <!-- mobile shows a popover span for date/time -->
     <td class="d-lg-none message-mobile-date-time">
-      <a class="info-popover" href="javascript:void(0);" tabindex="0"
+      <a class="info-popover" href="#" tabindex="0"
 	 data-bs-trigger="focus"
 	 data-bs-container="body" data-bs-toggle="popover"
 	 data-bs-placement="right" data-bs-title="Date/Time">
 	<xsl:attribute name="data-bs-content">
 	  <xsl:value-of select="@Date"/>&#160;<xsl:value-of select="@Time"/>
 	</xsl:attribute>
-	<i class="bi bi-clock"></i>
+	#
       </a>
     </td>
     <td class="d-none d-lg-table-cell message-date"> <xsl:value-of select="@Date"/> </td>