From e4d8afb3125d5cd3b5a36864d3a68e84799c9b18 Mon Sep 17 00:00:00 2001
From: Mattk70 <email@mattkirkland.co.uk>
Date: Fri, 18 Oct 2024 13:37:27 +0100
Subject: [PATCH] position zoom icons

---
 css/style.css | 1 +
 index.html    | 8 ++++----
 js/ui.js      | 8 +++++---
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index 0e0dc5e4..591650a1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -141,6 +141,7 @@ div#contentWrapper.loaded {
 }
 
 .zoom {
+    position: absolute;
     font-size: calc(32px * var(--font-size-scale));;
 }
 
diff --git a/index.html b/index.html
index e755b2bb..8a6cbf8a 100644
--- a/index.html
+++ b/index.html
@@ -1126,7 +1126,7 @@ <h5 class="modal-title" id="locationModalLabel">Set Location</h5>
                         <span class="material-symbols-outlined"  title="Display File Metadata">other_admission</span></a>
                     <div id="filename" class="col-auto ps-1 overflow-visible flex-nowrap"></div>
                     <div id="unsaved-icon" class="material-symbols-outlined ms-2 me-2 text-warning pointer d-none"  tabindex="-1" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Unsaved Edits" id="Unsaved Edits-circle-help"  data-bs-content="There are changes to the results that haven't been saved.">warning</div>
-                    <div class="col-auto btn-group bg-dark ms-2 me-2 text-nowrap" role="group">
+                    <div class="btn-group bg-dark pt-0 p-1 ms-2 me-2 text-nowrap" role="group">
                         <button id="playToggle" class="p-1 pe-2 btn btn-outline-secondary" title="Play / Pause (SpaceBar)">
                             <span class="material-symbols-outlined ">play_circle</span><span
                             class="align-middle d-none d-lg-inline"> Play </span>
@@ -1135,13 +1135,13 @@ <h5 class="modal-title" id="locationModalLabel">Set Location</h5>
                             class="align-middle d-none d-lg-inline-block">Pause</span>
                         </button>
                     </div>
-                    <div class="col btn-group bg-dark  pe-2" role="group">
+                    <div class="col btn-group bg-dark pt-0 p-1 pe-2" role="group">
                         <button id="zoomIn" title="Zoom into the spectrogram (Keyboard Shortcut: + key)" class="btn btn-outline-secondary"
                         style="max-width: 70px">
-                        <span class="material-symbols-outlined zoom">zoom_in</span>
+                        <span class="material-symbols-outlined zoom translate-middle">zoom_in</span>
                     </button>
                     <button id="zoomOut" title="Zoom out of the spectrogram (Keyboard Shortcut: - key)" class="btn btn-outline-secondary"
-                    style="max-width: 70px"><span class="material-symbols-outlined zoom align-middle">zoom_out</span>
+                    style="max-width: 70px"><span class="material-symbols-outlined zoom  translate-middle">zoom_out</span>
                 </button>
             </div>
             <div id="progressDiv" class="col-2 d-none"><span id="fileNumber"></span><br>
diff --git a/js/ui.js b/js/ui.js
index 7fab4778..9eb9f1fd 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -703,7 +703,7 @@ function formatAsBootstrapTable(jsonData) {
     let tableHtml = "<div class='metadata'>";
 
     for (const [heading, keyValuePairs] of Object.entries(parsedData)) {
-        tableHtml += `<h3>${heading}</h3>`;
+        tableHtml += `<h5 class="text-primary">${heading.toUpperCase()}</h5>`;
         tableHtml += "<table class='table table-striped table-bordered'><thead class='text-bg-light'><tr><th>Key</th><th>Value</th></tr></thead><tbody>";
 
         for (const [key, value] of Object.entries(keyValuePairs)) {
@@ -3751,9 +3751,9 @@ function formatDuration(seconds){
         const response = await fetch(file);
         document.getElementById('helpModalBody').innerHTML = await response.text();
         const help = new bootstrap.Modal(document.getElementById('helpModal'));
+        document.removeEventListener('show.bs.modal', replaceCtrlWithCommand);
+        document.addEventListener('show.bs.modal', replaceCtrlWithCommand);
         help.show();
-        document.removeEventListener('shown.bs.modal', replaceCtrlWithCommand);
-        document.addEventListener('shown.bs.modal', replaceCtrlWithCommand);
     }
     function replaceTextInTitleAttributes() {
         // Select all elements with title attribute in the body of the web page
@@ -3771,6 +3771,7 @@ function formatDuration(seconds){
     }
     
     function replaceCtrlWithCommand() {
+        if (isMac){
             // Select all text nodes in the body of the web page
             const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
             const nodes = [];
@@ -3786,6 +3787,7 @@ function formatDuration(seconds){
             
             // Replace 'Ctrl' with ⌘ in title attributes of elements
             replaceTextInTitleAttributes();
+        }
     }
     
     const populateSpeciesModal = async (included, excluded) => {