Better styling (#10)

cidgoh · May 26, 2020 · 927a28c · 927a28c
1 parent e592535
commit 927a28c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 39 deletions.
diff --git a/main.css b/main.css
@@ -18,7 +18,7 @@
     visibility: hidden;
 }
 
-.footer-row {
+#footer-row {
     visibility: hidden;
 }
 

diff --git a/main.html b/main.html
@@ -11,33 +11,28 @@
     <div class="container-fluid">
       <!-- buttons above Handsontable grid -->
       <div class="row mt-3" id="header-row">
-        <div class="col-8 col-sm-5 col-md-4 col-lg-3">
-          <div class="row">
-            <div class="col col-xl-3">
-              <div class="dropdown">
-                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">File</button>
-                <div class="dropdown-menu">
-                  <span class="dropdown-item" id="new-dropdown-item">New</span>
-                  <label for="open-file-input" class="dropdown-item mb-0" id="open-dropdown-item">Open</label>
-                  <input type="file" accept=".xlsx,.tsv,.csv" class="form-control-file" id="open-file-input">
-                  <span class="dropdown-item" data-toggle="modal" data-target="#save-as-modal">Save As...</span>
-                </div>
+        <div class="col">
+          <div class="btn-group" role="group">
+            <div class="btn-group" role="group">
+              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">File</button>
+              <div class="dropdown-menu">
+                <span class="dropdown-item" id="new-dropdown-item">New</span>
+                <label for="open-file-input" class="dropdown-item mb-0" id="open-dropdown-item">Open</label>
+                <input type="file" accept=".xlsx,.tsv,.csv" class="form-control-file" id="open-file-input">
+                <span class="dropdown-item" data-toggle="modal" data-target="#save-as-modal">Save As...</span>
               </div>
             </div>
-            <div class="col">
-              <button class="btn btn-primary" id="validate-btn" type="button">Validate</button>
+            <div class="btn-group" role="group">
+              <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</button>
+              <div class="dropdown-menu">
+                <span class="dropdown-item" id="show-all-dropdown-item">Show all</span>
+                <span class="dropdown-item" id="show-required-dropdown-item">Show required</span>
+                <span class="dropdown-item disabled">Version 0.1.0</span>
+              </div>
             </div>
+            <button type="button" class="btn btn-primary" id="validate-btn">Validate</button>
           </div>
         </div>
-        <div class="col">
-          Show fields: 
-          <button class="btn btn-primary" type="button" id="view-all-fields">All</button>
-          <button class="btn btn-primary" type="button" id="view-required-fields">Required</button>
-          <div style="display:inline-block;vertical-align: middle;padding-left:20px">
-            Double-click on column header for<br/> more information about that field.
-          </div>
-        </div>
-
       </div>
       <!-- Handsontable grid -->
       <div class="row mt-3">
@@ -46,24 +41,19 @@
         </div>
       </div>
       <!-- Buttons below Handsontable grid -->
-      <div class="row mt-3 footer-row">
-        <div class='col col-md-6'>
-          <div class='input-group'>
-            <div class='input-group-prepend'>
-              <button class='btn btn-primary' id='add-rows-button' type='submit'>Add</button>
+      <div class="row mt-3" id="footer-row">
+        <div class="col col-md-6">
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <button class="btn btn-primary" id="add-rows-button" type="submit">Add</button>
             </div>
-            <input type='text' class='form-control' id='add-rows-input' value='100'>
-            <div class='input-group-append'>
-              <span class='input-group-text'>more rows at the bottom.</span>
+            <input type="text" class="form-control" id="add-rows-input" value="100">
+            <div class="input-group-append">
+              <span class="input-group-text">more rows at the bottom.</span>
             </div>
           </div>
         </div>
       </div>
-      <div class="row mt-3 footer-row">
-        <div class="col">
-          <p class="text-right">0.1.0</p>
-        </div>
-      </div>
     </div>
     <!-- Modals -->
     <div class="modal" id="clear-data-warning-modal" tabindex="-1" role="dialog">

diff --git a/main.js b/main.js
@@ -64,7 +64,7 @@ const createHot = (data) => {
     licenseKey: 'non-commercial-and-evaluation',
     afterRender: () => {
       $('#header-row').css('visibility', 'visible');
-      $('.footer-row').css('visibility', 'visible');
+      $('#footer-row').css('visibility', 'visible');
       // Bit of a hackey way to add classes to secondary headers
       $('.secondary-header-text').each((_, e) => {
         const $cellElement = $(e).closest('th');
@@ -364,7 +364,7 @@ const validateMultiple = (valsCsv, source) => {
  */
 const showFields = (id, data, hot) => {
   const hiddenColumns = [];
-  if (id === 'view-required-fields') {
+  if (id === 'show-required-dropdown-item') {
     getFields(data).forEach(function(field, i) {
       if (field.requirement !== 'required') hiddenColumns.push(i);
     });
@@ -463,7 +463,7 @@ $(document).ready(() => {
   });
 
   // Show fields
-  $('#view-all-fields, #view-required-fields').click(function(e) {
+  $('#show-all-dropdown-item, #show-required-dropdown-item').click(function(e) {
     showFields(e.target.id, DATA, HOT);
   });