fix: 🐛 fixed pool table styling

fairdataihub · Nov 9, 2023 · fed1a69 · fed1a69
1 parent 4c7d310
commit fed1a69
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/scripts/guided-mode/guided-curate-dataset.js b/scripts/guided-mode/guided-curate-dataset.js
@@ -6750,7 +6750,7 @@ const renderPoolsTable = () => {
       return generatePoolRowElement(pool);
     })
     .join("\n");
-  document.getElementById("guided-section-pools-table").innerHTML = poolElementRows;
+  document.getElementById("pools-specification-table-body").innerHTML = poolElementRows;
 
   for (const poolName of Object.keys(pools)) {
     const newPoolSubjectsSelectElement = document.querySelector(
@@ -11506,7 +11506,7 @@ const generatePoolSpecificationRowElement = () => {
   `;
 };
 const addPoolTableRow = () => {
-  const poolsTableBody = document.getElementById("guided-section-pools-table");
+  const poolsTableBody = document.getElementById("pools-specification-table-body");
   const poolSpecificationTableInput = poolsTableBody.querySelector("input[name='guided-pool-id']");
 
   const re = new RegExp("/^(d|w)+$/g");

diff --git a/sections/guided_mode/guided_curate_dataset.html b/sections/guided_mode/guided_curate_dataset.html
@@ -1397,7 +1397,21 @@ <h1 class="text-sub-step-title">Pools specification</h1>
               SPARC folder structure when generating your dataset in the last step of this process.
             </p>
           </div>
-          <div class="guided--section" id="guided-section-pools-table"></div>
+          <div class="guided--section">
+            <table class="ui celled striped table" style="margin-bottom: 10px; width: 800px">
+              <thead>
+                <tr>
+                  <th class="text-center" style="min-width: 250px" colspan="3">
+                    Enter a unique ID for each of your pools and specify the subjects they contain
+                  </th>
+                </tr>
+              </thead>
+              <tbody id="pools-specification-table-body"></tbody>
+            </table>
+            <button class="ui primary basic button mt-2" onclick="addPoolTableRow()">
+              <i class="fas fa-plus" style="margin-right: 7px"></i>Add a new pool
+            </button>
+          </div>
         </div>
         <div
           id="guided-samples-addition-tab"