Table height

Mattk70 · Jan 3, 2020 · 5d24805 · 5d24805
1 parent 6183961
commit 5d24805
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 48 deletions.
diff --git a/css/style.css b/css/style.css
@@ -3,6 +3,7 @@ html, body {
     padding-top: 28px;
     padding-bottom: 18px;
     background-color: #f8f9fa;
+    overflow: hidden;
 }
 
 .border-10 {

diff --git a/index.html b/index.html
@@ -64,61 +64,66 @@
     </div>
   </nav>
 
-  <!-- Load audio file hint -->
-  <div class="d-flex h-100 flex-column text-dark align-items-center justify-content-center" id="loadFileHint">
-    <div class="row">
-      <p class="lead justify-content-center" id="loadFileHintText">Load an audio file for analysis by clicking</br>on <i>File > Open audio file</i> in the top menu.</p>
-    </div>
-    <div class="row">
-      <div class="d-none spinner-border" role="status" id="loadFileHintSpinner"></div>
-    </div>
-    <div class="row"><p class="d-none lead" id="loadFileHintLog"></p> </div>       
-  </div>  
+  <!-- Content wrapper -->
+  <div class="flex-column h-100" id="contentWrapper">
+
+    <!-- Load audio file hint -->
+    <div class="d-flex h-100 flex-column text-dark align-items-center justify-content-center" id="loadFileHint">
+      <div class="row">
+        <p class="lead justify-content-center" id="loadFileHintText">Load an audio file for analysis by clicking</br>on <i>File > Open audio file</i> in the top menu.</p>
+      </div>
+      <div class="row">
+        <div class="d-none spinner-border" role="status" id="loadFileHintSpinner"></div>
+      </div>
+      <div class="row"><p class="d-none lead" id="loadFileHintLog"></p> </div>       
+    </div>  
 
-  <!-- Spectrogram view -->
-  <div class="" id="specContainer"></div>
-  <div class="" id="specTimeline"></div>
+    <!-- Spectrogram view -->
+    <div class="" id="specContainer"></div>
+    <div class="" id="specTimeline"></div>
 
-  <!-- Controls view -->
-  <div class="container-fluid p-2 bg-dark text-white d-none" id="controlsWrapper">
-
-    <div class="btn-group btn-group" role="group">
-      <button class="btn btn-primary " onclick="WAVESURFER.play()">
-        <i class="material-icons">play_arrow</i><!--span>Play</span-->
-      </button>
-      <button class="btn btn-primary " onclick="WAVESURFER.pause()">
-        <i class="material-icons">pause</i><!--span>Pause</span-->
-      </button>
-      <button class="btn btn-primary " onclick="zoomSpecIn();">
-        <i class="material-icons">zoom_in</i>
-      </button>
-      <button class="btn btn-primary " onclick="zoomSpecOut();">
-        <i class="material-icons">zoom_out</i>
-      </button>
+    <!-- Controls view -->
+    <div class="container-fluid p-2 bg-dark text-white d-none" id="controlsWrapper" style="height: 55px;">
+
+      <div class="btn-group btn-group" role="group">
+        <button class="btn btn-primary " onclick="WAVESURFER.play()">
+          <i class="material-icons">play_arrow</i><!--span>Play</span-->
+        </button>
+        <button class="btn btn-primary " onclick="WAVESURFER.pause()">
+          <i class="material-icons">pause</i><!--span>Pause</span-->
+        </button>
+        <button class="btn btn-primary " onclick="zoomSpecIn();">
+          <i class="material-icons">zoom_in</i>
+        </button>
+        <button class="btn btn-primary " onclick="zoomSpecOut();">
+          <i class="material-icons">zoom_out</i>
+        </button>
+      </div>
+    </div>
+
+    <!-- Result table -->
+    <div class="d-none p-3 overflow-auto" id="resultTableContainer">
+      <table class="table table-hover">
+        <thead class="thead-dark">
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Timestamp</th>
+            <th scope="col">Common name</th>
+            <th scope="col">Scientific name</th>
+            <th scope="col">Confidence</th>
+          </tr>
+        </thead>
+        <tbody class="text-dark" id="resultTableBody">
+
+        </tbody>
+      </table>
     </div>
-  </div>
 
-  <!-- Result table -->
-  <div class="d-none p-3" id="resultTableContainer">
-    <table class="table table-hover">
-      <thead class="thead-dark">
-        <tr>
-          <th scope="col">#</th>
-          <th scope="col">Timestamp</th>
-          <th scope="col">Common name</th>
-          <th scope="col">Scientific name</th>
-          <th scope="col">Confidence</th>
-        </tr>
-      </thead>
-      <tbody class="text-dark" id="resultTableBody">
-
-      </tbody>
-    </table>
   </div>
 
 
   <!-- Footer -->
-  <div class="d-flex fixed-bottom p-2 bg-primary text-white justify-content-center">
+  <div class="d-flex fixed-bottom p-2 bg-primary text-white justify-content-center" id="footer">
     <small>BirdNET | Center for Conservation Bioacoustics - Cornell Lab of Ornithology | Chair Mediainformatics - Chemnitz University of Technology | <span id="year"></span></small>
   </div>
 </body>
diff --git a/js/birdnet.js b/js/birdnet.js
@@ -284,6 +284,8 @@ function adjustSpecHeight(redraw) {
         $( this ).height($('body').height() * 0.40);
     });
 
+    $('#resultTableContainer').height($('#contentWrapper').height() - $('#specContainer').height() - $('#controlsWrapper').height() - 47);
+
 }
 
 function zoomSpecIn() {

diff --git a/main.js b/main.js
@@ -25,7 +25,7 @@ function createWindow () {
   win.loadFile('index.html')
 
   // Open the DevTools.
-  //win.webContents.openDevTools()
+  win.webContents.openDevTools()
 
   // Emitted when the window is closed.
   win.on('closed', () => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -284,6 +284,8 @@ function adjustSpecHeight(redraw) { @@
             $( this ).height($('body').height() * 0.40);
         });
+        $('#resultTableContainer').height($('#contentWrapper').height() - $('#specContainer').height() - $('#controlsWrapper').height() - 47);
     }
     function zoomSpecIn() {
@@ Expand Down @@