Style amends for modeladmin.view.IndexView:

- Removes unnecessary right padding from result list when listing is supposed to be full-width (no filters) on desktop
- Removes unnecessary left/right padding from result list on mobile (the table cells have padding of their own)
- In order to be more consistent with the Explorer list view, only make orderable column header links 'teal' if the listing is currently ordered by that field
- Better use of scss hierarchy to improve readability
- Remove the ‘teal’ CSS class from orderable header links

CHANGELOG.txt

@@ -11,6 +11,7 @@ Changelog
  * The homepage created in the project template is now titled "Home" rather than "Homepage" (Karl Hobley)
  * Signal receivers for custom `Image` and `Rendition` models are connected automatically (Mike Dingjan)
  * `PageChooserBlock` can now accept a list/tuple of page models as `target_model` (Mikalai Radchuk)
+ * Styling tweaks for the ModelAdmin's `IndexView` to be more inline with the Wagtail styleguide (Andy Babic)
  * Fix: Marked 'Date from' / 'Date to' strings in wagtailforms for translation (Vorlif)
  * Fix: Unreliable preview is now reliable by always opening in a new window (Kjartan Sverrisson)
  * Fix: Fixed placement of `{{ block.super }}` in `snippets/type_index.html` (LB (Ben Johnston))

docs/releases/1.10.rst

@@ -21,6 +21,7 @@ Other features
  * The homepage created in the project template is now titled "Home" rather than "Homepage" (Karl Hobley)
  * Signal receivers for custom ``Image`` and ``Rendition`` models are connected automatically (Mike Dingjan)
  * ``PageChooserBlock`` can now accept a list/tuple of page models as ``target_model`` (Mikalai Radchuk)
+ * Styling tweaks for the ModelAdmin's ``IndexView`` to be more inline with the Wagtail styleguide (Andy Babic)
 
 
 Bug fixes

wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss

@@ -1,29 +1,42 @@
+@import 'wagtailadmin/scss/variables';
+
 .content header {
     margin-bottom: 0;
 }
 
 
 .result-list {
-    padding: 0 15px;
+    margin-bottom: 0;
+}
 
-    table {
-        margin-bottom: 0;
-    }
+.listing {
 
-    body th {
-        background-color: transparent;
-        text-align: left;
-        padding: 1.2em 1em;
-    }
-
-    tbody tr:hover ul.actions {
-        visibility: visible;
-    }
-
-    tbody td,
-    tbody th {
+    td,
+    th {
         vertical-align: top;
     }
+
+    thead th.sorted a {
+        color: $color-teal;
+    }
+
+    tbody {
+        overflow: auto;
+
+        tr:hover ul.actions {
+            visibility: visible;
+        }
+
+        tr > td { 
+            background-color: inherit;
+            
+            a.edit-obj { 
+                color: inherit;
+                font-weight: 600; 
+            }
+        }
+
+    }
 }
 
 
@@ -133,14 +146,18 @@ p.no-results {
 
     .result-list {
         padding: 0 1.5% 0 0;
-    }
 
-    .result-list tbody th:first-child {
-        padding-left: 50px;
-    }
+        &.col12 {
+            padding-right: 0;
 
-    .result-list.col12 tbody td:last-child {
-        padding-right: 50px;
+            tbody td:last-child {
+                padding-right: 50px;
+            }
+        }
+
+        tbody th:first-child {
+            padding-left: 50px;
+        }
     }
 
     div.pagination {

wagtail/contrib/modeladmin/templates/modeladmin/includes/result_list.html

@@ -5,7 +5,7 @@
         <tr>
             {% for header in result_headers %}
             <th scope="col" {{ header.class_attrib }}>
-                {% if header.sortable %}<a href="{{ header.url_primary }}" class="teal icon {% if header.ascending %}icon-arrow-up-after{% else %}icon-arrow-down-after{% endif %}">{% endif %}
+                {% if header.sortable %}<a href="{{ header.url_primary }}" class="icon {% if header.ascending %}icon-arrow-up-after{% else %}icon-arrow-down-after{% endif %}">{% endif %}
                 {{ header.text|capfirst }}
                 {% if header.sortable %}</a>{% endif %}
            </th>