Tabular view design improvements

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/index.html

@@ -38,31 +38,28 @@
             <i id="dropChildrenButton" class="ui icon-unlink"></i>
             <i id="removeButton" class="ui icon-remove"></i>
         </div>
+        <div class="controls">
+            <label>
+                <i id="exportCSV" class="ui icon-share"></i>
+            </label>
+        </div>
         <div class="wrapper">
-            <div class="controls">
-                <label>
-                    <i id="exportCSV" class="ui icon-share"></i>
-                </label>
-            </div>
-            <h1>Selected Nodes</h1>
-            <div class="wrapper">
-                <table>
-                    <thead>
-                    <tr>
-                        <th>ID</th>
-                        <th>Label</th>
-                        <th>Score</th>
-                        <th>Frequency</th>
-                        <th>Spread</th>
-                        <th>Relation</th>
-                        <th>Parent</th>
-                    </tr>
-                    </thead>
-                    <tbody>
+            <table>
+                <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Label</th>
+                    <th>Score</th>
+                    <th>Frequency</th>
+                    <th>Spread</th>
+                    <th>Relation</th>
+                    <th>Parent</th>
+                </tr>
+                </thead>
+                <tbody>
 
-                    </tbody>
-                </table>
-            </div>
+                </tbody>
+            </table>
         </div>
     </div>
     <div id="settings">

src/static/scss/tabular.scss

@@ -1,6 +1,8 @@
 @import "mixins";
 @import "const";
 
+$headerHeight: 36px;
+
 #table {
 
     position: absolute;
@@ -18,27 +20,22 @@
         @include transform(translate(0,0));
     }
 
+    > .controls {
+        position: relative;
+        padding-left: 40px;
+        top: 5px;
+    }
+
     > .wrapper {
 
         overflow: auto;
-        height: 100%;
-        padding: 0 $defaultPadding $defaultPadding $defaultPadding;
+        height: 100%; /* to be compatible with old browsers */
+        height: calc(100% - #{$headerHeight});
+        padding: $defaultPadding;
         box-sizing: border-box;
 
-        > .controls {
-            position: relative;
-            padding-left: 30px;
-            top: 5px;
-        }
-
-        > .wrapper {
-
-            position: relative;
-
-            table {
-                width: 100%;
-            }
-
+        table {
+            width: 100%;
         }
 
     }