fix(eda): fixed and optimized css layouts

sfu-db · Apr 15, 2021 · 58e1b18 · 58e1b18
1 parent 5697735
commit 58e1b18
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 14 deletions.
diff --git a/dataprep/eda/templates/grid_scripts.html b/dataprep/eda/templates/grid_scripts.html
@@ -2,7 +2,7 @@
 {{ context.components[0] }}
 
 <script>
-    setTimeout(init, 100);
+    setTimeout(init, 50);
 
     function init() {
         const tableRows = document.querySelectorAll('.tabledata-{{ context.rnd }} tr');

diff --git a/dataprep/eda/templates/tab_base.html b/dataprep/eda/templates/tab_base.html
@@ -69,7 +69,7 @@ <h3>{{ title }}</h3>
             </div>
             {% endfor %}
             {% if context.value_table %}
-            <div class="plots-{{ context.rnd }}">
+            <div class="plots-{{ context.rnd }}"  style="background: none;">
                 <div class="insight-container-{{ context.rnd }}">
                     <input type='checkbox' style='display: none' id="htgbt-{{ context.rnd }}" class="insight-check-{{ context.rnd }}">
                     <label class="htg-btn-{{ context.rnd }}" for="htgbt-{{ context.rnd }}"></label>

diff --git a/dataprep/eda/templates/tab_base_corr.html b/dataprep/eda/templates/tab_base_corr.html
@@ -20,7 +20,6 @@
             <div class="plots-{{ context.rnd }}">
                 <div class="stats-{{ context.rnd }}">
                     <div class="tabledata-{{ context.rnd }}">
-                        <!-- <h3>{{ title }}</h3> -->
                         <table>
                             <thead>
                                 <tr>

diff --git a/dataprep/eda/templates/tab_scripts.html b/dataprep/eda/templates/tab_scripts.html
@@ -2,7 +2,7 @@
 {{ context.components[0] }}
 
 <script>
-    setTimeout(init, 100);
+    setTimeout(init, 50);
 
     function init() {
         const tableRows = document.querySelectorAll('.tabledata-{{ context.rnd }} tr');
@@ -13,7 +13,7 @@
     }
 
     function switchTab{{ context.rnd }}(e) {
-        const selectedAreaSuffix = e.parentElement.parentElement.className.split('-')[1];
+        const selectedAreaSuffix = {{ context.rnd }};
         const selectedTabId = e.id.split('-')[2];
         const selectedTabContent = document.querySelector(`.contents-${selectedAreaSuffix}>div:nth-of-type(${selectedTabId})`);
         const contentArray = document.getElementsByClassName('plots-{{ context.rnd }}')

diff --git a/dataprep/eda/templates/tab_styles.html b/dataprep/eda/templates/tab_styles.html
@@ -50,7 +50,7 @@
         background: white;
     }
     {% endif %}
-    
+
     .contents-{{ context.rnd }}>div {
         animation: fadeIn .3s;
     }
@@ -64,7 +64,7 @@
         display: flex;
         flex-flow: column wrap;
         justify-content: flex-start;
-        max-height: 560px;
+        max-height: 550px;
         flex-grow: 1;
     }
 
@@ -239,8 +239,9 @@
         background: #5DADE2;
     }
 
-    /* Freq table */
+    {# Freq table #}
     table.freq {
+        margin-top: 30px;
         margin-bottom: 2em;
         border: 0;
         width:100%;
@@ -259,7 +260,7 @@
         font-size: 14px;
     }
 
-    /* Message classes */
+    {# Message classes #}
     .missing {
         color: #d62728;
     }
@@ -268,7 +269,7 @@
         opacity: 0.4;
     }
 
-    /* Bars in tables */
+    {# Bars in tables #}
     .freq.table{
         table-layout: fixed;
     }
@@ -277,7 +278,6 @@
         width: auto;
         max-width: none;
         text-align: left;
-
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -287,9 +287,6 @@
         width: auto;
         text-align: right;
     }
-    /* .freq:not(.mini) tr td:nth-child(4), .freq:not(.mini) tr th:nth-child(4){
-        width: 50px;
-    } */
 
     .freq .bar {
         float: left;