position zoom icons

Mattk70 · Oct 18, 2024 · e4d8afb · e4d8afb
1 parent beca884
commit e4d8afb
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -141,6 +141,7 @@ div#contentWrapper.loaded { @@
     }
     .zoom {
+        position: absolute;
         font-size: calc(32px * var(--font-size-scale));;
     }
@@ Expand Down @@