Improve Snippets listing styles

laymonage · Aug 9, 2022 · f322e9d · f322e9d
1 parent 9476f67
commit f322e9d
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 12 deletions.
diff --git a/client/scss/components/_bulk_actions.scss b/client/scss/components/_bulk_actions.scss
@@ -31,6 +31,11 @@
     input[type='checkbox'] {
       margin: 0;
     }
+
+    + th,
+    + td {
+      padding-inline-start: 0;
+    }
   }
 }
 

diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
@@ -196,11 +196,8 @@ ul.listing {
 
     .title-wrapper,
     h2 {
+      @apply w-label-1;
       margin: 0;
-      font-size: 1.15em;
-      font-weight: 600;
-      color: $color-text-base;
-      line-height: 1.5em;
 
       a {
         color: inherit;
@@ -233,20 +230,48 @@ ul.listing {
     }
   }
 
+  &--inline-actions td.title {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+
+    .title-wrapper {
+      margin-inline-end: 2.5em;
+    }
+
+    .status-tag {
+      margin: 0;
+    }
+  }
+
   &--inline-actions .actions {
     display: inline-block;
     margin-top: 0;
     vertical-align: inherit;
+
+    li {
+      margin-bottom: 0;
+    }
+
+    .button {
+      vertical-align: inherit;
+    }
   }
 
   .button-secondary {
     border-color: $color-grey-4;
     background: $color-white;
 
-    &.no:hover {
-      border-color: $color-button-no;
-      background-color: $color-button-no;
-      color: $color-white;
+    &.no {
+      // Override `background-color: transparent;` from _buttons.scss
+      background: $color-white;
+
+      &:hover {
+        border-color: $color-button-no;
+        background-color: $color-button-no;
+        color: $color-white;
+      }
     }
 
     &:hover {
@@ -389,6 +414,11 @@ ul.listing {
     opacity: 0.7;
   }
 
+  .status-tag {
+    margin: 0;
+    margin-inline: 0;
+  }
+
   &.images img {
     @include transition(border-color 0.2s ease);
     border: 3px solid $color-white;

diff --git a/wagtail/snippets/templates/wagtailsnippets/snippets/headers/_base_header.html b/wagtail/snippets/templates/wagtailsnippets/snippets/headers/_base_header.html
@@ -4,7 +4,7 @@
 {# TODO: Replace this with wagtailadmin/shared/breadcrumbs.html once it's possible #}
 
 {% block header_content %}
-    {% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-primary w-px-0.5 w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-text-14' icon_classes='w-w-4 w-h-4 w-ml-3' %}
+    {% with breadcrumb_link_classes='w-flex w-items-center w-h-full w-text-primary w-no-underline w-outline-offset-inside hover:w-underline hover:w-text-primary w-h-full' breadcrumb_item_classes='w-h-full w-flex w-items-center w-overflow-hidden w-transition w-duration-300 w-whitespace-nowrap w-flex-shrink-0 w-font-bold w-text-14' icon_classes='w-w-4 w-h-4 w-ml-3' %}
         {# Breadcrumbs are visible on mobile by default but hidden on desktop #}
         <div class="w-breadcrumb w-flex w-flex-row w-items-center w-overflow-x-auto w-overflow-y-hidden w-scrollbar-thin" data-breadcrumb-next>
             <button

diff --git a/wagtail/snippets/templates/wagtailsnippets/snippets/revisions/_actions.html b/wagtail/snippets/templates/wagtailsnippets/snippets/revisions/_actions.html
@@ -3,7 +3,7 @@
 <td {% if column.classname %}class="{{ column.classname }}"{% endif %}>
     {% if revision_enabled and instance.revision %}
         {% with revision=instance.revision latest_revision=object.get_latest_revision previous_revision=instance.revision.get_previous %}
-            <span class="report__results--text">{{ value }}</span>
+            <span>{{ value }}</span>
             {% if instance.action == 'wagtail.publish' and revision == object.live_revision %}<span class="status-tag primary">{% trans 'Live version' %}</span>
             {% elif instance.content_changed and revision == latest_revision %}<span class="status-tag primary">{% trans 'Current draft' %}</span>{% endif %}
             <ul class="actions">

diff --git a/wagtail/snippets/templates/wagtailsnippets/snippets/tables/title_cell.html b/wagtail/snippets/templates/wagtailsnippets/snippets/tables/title_cell.html
@@ -1,13 +1,13 @@
 {% load wagtailsnippets_admin_tags %}
 
 <td class="{% if column.classname %}{{ column.classname }} {% endif %}title">
-    <div class="title-wrapper">
+    <span class="title-wrapper">
         {% if link_url %}
             <a {% include "wagtailadmin/tables/attrs.html" with attrs=link_attrs %}>{{ value }}</a>
         {% else %}
             {{ value }}
         {% endif %}
-    </div>
+    </span>
     <ul class="actions">
         {% snippet_listing_buttons instance %}
     </ul>

diff --git a/wagtail/snippets/views/snippets.py b/wagtail/snippets/views/snippets.py
@@ -140,6 +140,7 @@ class List(IndexView):
     page_kwarg = "p"
     # If true, returns just the 'results' include, for use in AJAX responses from search
     results_only = False
+    table_class = InlineActionsTable
 
     def _get_title_column(self, column_class=SnippetTitleColumn):
         return super()._get_title_column(column_class)