Align dashboard tables with CSS

trendyminds · Jun 9, 2020 · 83d5df7 · 83d5df7
1 parent be5d0fc
commit 83d5df7
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 30 deletions.
diff --git a/src/assetbundles/indexcpsection/dist/css/Index.css b/src/assetbundles/indexcpsection/dist/css/Index.css
@@ -84,3 +84,7 @@
   color: #0F78EE;
   opacity: .35;
 }
+
+.isolate__entries th:first-of-type {
+  width: 65%;
+}
diff --git a/src/assetbundles/isolate/dist/js/Isolate.js b/src/assetbundles/isolate/dist/js/Isolate.js
@@ -13,14 +13,9 @@
 class Isolate {
   constructor() {
     this.$mainNav = document.querySelector("#nav");
-    this.$isolateTables = document.querySelectorAll("[data-isolate-table]");
 
     this.moveIsolateNav();
     this.removeEntriesNav();
-
-    if (this.$isolateTables.length) {
-      this.getLargestCell();
-    }
   }
 
   removeEntriesNav() {
@@ -37,28 +32,6 @@ class Isolate {
     $isolateNav.parentNode.removeChild($isolateNav);
     $dashboardNav.insertAdjacentHTML("afterend", isolateNavHTML);
   }
-
-  getLargestCell() {
-    let largestWidth = 0;
-
-    for (let i = 0; i < this.$isolateTables.length; i++) {
-      const $row = this.$isolateTables[i].querySelector("tbody tr td:first-of-type");
-
-      if ($row.scrollWidth > largestWidth) {
-        largestWidth = $row.scrollWidth;
-      }
-    }
-
-    this.resizeRows(largestWidth);
-  }
-
-  resizeRows(cellWidth) {
-    const $rows = document.querySelectorAll("#content-container table tbody tr td:first-of-type");
-
-    for (let i = 0; i < $rows.length; i++) {
-      $rows[i].style.width = `${cellWidth}px`;
-    }
-  }
 }
 
 new Isolate();
diff --git a/src/templates/dashboard/index.twig b/src/templates/dashboard/index.twig
@@ -63,7 +63,7 @@
 {% block content %}
   {% if craft.app.request.getSegment(3) %}
     {% set section = craft.app.sections.getSectionByHandle(craft.app.request.getSegment(3)) %}
-    <table class="data fullwidth collapsible" data-isolate-table>
+    <table class="data fullwidth collapsible isolate__entries">
       <thead>
         <tr>
           <th>Title</th>
@@ -127,9 +127,9 @@
 
     {% paginate craft.isolate.getUserEntries(currentUser.id, section.id, 50, true) as draftInfo, draftEntries %}
 
-    {% if draftEntries|length %}
+    {% if draftEntries | length %}
       <h2>Drafts</h2>
-      <table class="data fullwidth collapsible" data-isolate-table>
+      <table class="data fullwidth collapsible isolate__entries">
         <thead>
           <tr>
             <th>Title</th>