CP table cleanup

Resolves #5247

src/templates/_elements/tableview/container.html

@@ -1,9 +1,9 @@
-<div class="tableview">
+<div class="tableview{% if context == 'index' %} tablepane{% endif %}">
     <table class="data fullwidth"{% if structureEditable is defined and structureEditable %} data-structure-id="{{ structure.id }}" data-max-levels="{{ structure.maxLevels }}"{% endif %}>
         <thead>
         <tr>
             {% if showCheckboxes %}
-                <td class="checkbox-cell"></td>
+                <th class="checkbox-cell selectallcontainer orderable"></th>
             {% endif %}
             {% for attribute in attributes %}
                 {% set icon = (attribute[1].icon is defined ? attribute[1].icon : null) %}

src/templates/_elements/tableview/elements.html

@@ -4,7 +4,7 @@
 {% set structureEditable = structureEditable is defined ? structureEditable : false -%}
 
 {% if structure -%}
-    {% set basePadding = (context == 'index' ? 20 + (showCheckboxes ? 7 : 0) + (structureEditable ? 14 : 0) : 7) %}
+    {% set basePadding = (showCheckboxes ? 14 : 24) + (structureEditable ? 14 : 0) %}
     {% set padding = craft.app.locale.getOrientation() == 'ltr' ? 'left' : 'right' -%}
 {% endif -%}
 

src/templates/_elements/thumbsview/container.html

@@ -1,4 +1,10 @@
+<div class="header">
+    <span class="selectallcontainer">
+        {{ 'Select all'|t('app') }}
+    </span>
+</div>
+
 <ul class="thumbsview">
-    {% include "_elements/thumbsview/elements" %}
+        {% include "_elements/thumbsview/elements" %}
 </ul>
 <div class="clear"></div>

src/templates/_layouts/elementindex.html

@@ -45,11 +45,7 @@
 
 
 {% block content %}
-    <div class="elementindex">
-        <div class="main">
-            <div class="elements"></div>
-        </div>
-    </div>
+    <div class="elements"></div>
 {% endblock %}
 
 

src/templates/graphql/schemas/_index.html

@@ -16,7 +16,7 @@
 {% block content %}
     {% set schemas = craft.app.gql.schemas %}
 
-    <div class="scrolltable">
+    <div class="tablepane">
         <table id="schemas" class="data fullwidth">
             <thead>
                 <th scope="col">{{ "Schema name"|t('app') }}</th>

src/templates/settings/assets/transforms/_index.html

@@ -8,7 +8,7 @@
 </p>
 
 {% if transforms|length %}
-    <div class="scrolltable">
+    <div class="tablepane">
         <table id="transforms" class="data fullwidth">
             <thead>
                 <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/assets/volumes/_index.html

@@ -10,7 +10,7 @@
     {% if volumes|length %}
         {% set sortable  = (volumes|length > 1) %}
 
-        <div class="scrolltable">
+        <div class="tablepane">
             <table id="volumes" class="data fullwidth">
                 <thead>
                     <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/categories/index.html

@@ -16,7 +16,7 @@
     </div>
 
     {% if categoryGroups|length %}
-        <div class="scrolltable">
+        <div class="tablepane">
             <table id="categorygroups" class="data fullwidth">
                 <thead>
                     <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/fields/index.html

@@ -76,7 +76,7 @@
     </p>
 
     {% if fields %}
-        <div class="scrolltable">
+        <div class="tablepane">
             <table id="fields" class="data fullwidth">
                 <thead>
                     <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/globals/index.html

@@ -22,7 +22,7 @@
         </p>
 
         {% if globalSets %}
-            <div class="scrolltable">
+            <div class="tablepane">
                 <table id="sets" class="data fullwidth">
                     <thead>
                         <th scope="col">{{ "Global Set Name"|t('app') }}</th>

src/templates/settings/plugins/index.html

@@ -20,7 +20,7 @@
 
 {% block content %}
     {% if info|length %}
-        <div class="scrolltable">
+        <div class="tablepane">
             <table id="plugins" class="data fullwidth">
                 <tbody>
                     {% for handle, config in info %}

src/templates/settings/sections/_entrytypes/index.html

@@ -10,7 +10,7 @@
 {% endblock %}
 
 {% block content %}
-    <div class="scrolltable">
+    <div class="tablepane">
         <table id="entrytypes" class="data fullwidth">
             <thead>
                 <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/sections/_index.html

@@ -16,7 +16,7 @@
     </div>
 
     {% if sections|length %}
-        <div class="scrolltable">
+        <div class="tablepane">
             <table id="sections" class="data fullwidth">
                 <thead>
                     <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/sites/index.html

@@ -38,7 +38,7 @@
 
 
 {% block content %}
-    <div class="scrolltable">
+    <div class="tablepane">
         <table id="sites" class="data fullwidth">
             <thead>
                 <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/tags/index.html

@@ -16,7 +16,7 @@
     </div>
 
     {% if tagGroups|length %}
-        <div class="scrolltable">
+        <div class="tablepane">
             <table id="taggroups" class="data fullwidth">
                 <thead>
                     <th scope="col">{{ "Name"|t('app') }}</th>

src/templates/settings/users/groups/_index.html

@@ -14,7 +14,7 @@
     </p>
 
     {% if groups|length %}
-        <div class="scrolltable">
+        <div class="tablepane">
             <table id="groups" class="data fullwidth">
                 <thead>
                     <th scope="col">{{ "Name"|t('app') }}</th>

src/web/assets/cp/dist/css/_cp.scss

@@ -1051,13 +1051,25 @@ $systemInfoHoverBgColor: darken($grey800, 10%);
   #main-content,
   #tabs ul li a,
   #content,
-  #details .meta {
-    padding-left: 12px;
-    padding-right: 12px;
+  #details .meta,
+  .elements .header {
+    padding-left: 14px;
+    padding-right: 14px;
   }
 
   #tabs ul li + li {
-    @include margin-left(-6px);
+    @include margin-left(-7px);
+  }
+
+  #footer {
+    margin-left: -14px;
+    margin-right: -14px;
+  }
+
+  .tablepane,
+  .elements .header {
+    margin-left: -14px;
+    margin-right: -14px;
   }
 }