Dashboard enhancements baed on design & code review

albinazs · Sep 14, 2024 · 0530aeb · 0530aeb
1 parent 6bc8436
commit 0530aeb
Show file tree

Hide file tree

Showing 20 changed files with 183 additions and 130 deletions.
diff --git a/client/scss/components/_avatar.scss b/client/scss/components/_avatar.scss
@@ -62,7 +62,7 @@
       position: absolute;
       top: 100%;
       inset-inline-start: 50%;
-      transform: translate(-50%, -50%);
+      transform: translate(calc(var(--w-direction-factor) * -50%), -50%);
       background-color: theme('colors.surface-page');
 
       .icon {

diff --git a/client/scss/components/_header.scss b/client/scss/components/_header.scss
@@ -27,10 +27,6 @@
       max-width: 1em;
       max-height: 1em;
     }
-
-    &.avatar {
-      margin-inline-start: calc(0 - theme('spacing.2'));
-    }
   }
 
   .w-header__subtitle {
@@ -99,10 +95,6 @@
       margin-inline-end: 2em;
     }
 
-    .avatar.small {
-      margin-inline-start: 0;
-    }
-
     a {
       font-weight: theme('fontWeight.bold');
     }
@@ -121,12 +113,6 @@
       padding-inline-start: 0;
     }
 
-    .w-header__glyph {
-      &.avatar {
-        margin-inline-start: calc(0 - theme('spacing.9'));
-      }
-    }
-
     .left {
       float: inline-start;
       margin-inline-end: 0;

diff --git a/client/scss/components/_indicator.scss b/client/scss/components/_indicator.scss
@@ -19,13 +19,9 @@
   .icon {
     padding: 2px;
     vertical-align: middle; // reset vertical-align set by icon.initial
-
-    .w-dashboard & {
-      padding: 0;
-    }
   }
 
   &--is-inverse {
-    opacity: theme('opacity.30');
+    opacity: theme('opacity.50');
   }
 }
diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
@@ -369,12 +369,73 @@ ul.listing {
   &--dashboard {
     margin-bottom: 0;
 
-    .title-wrapper {
+    tbody {
+      border-bottom: 0;
+    }
+
+    td:first-child {
+      padding-inline-start: theme('spacing.6');
+    }
+
+    td:last-child {
+      padding-inline-end: theme('spacing.6');
+    }
+
+    .title a {
       font-weight: theme('fontWeight.medium');
     }
 
-    .actions {
-      float: none;
+    .w-status--label {
+      float: inline-end;
+      font-size: inherit;
+    }
+
+    .indicator .icon {
+      padding: 0;
+    }
+
+    .privacy-indicator {
+      margin-inline-end: theme('spacing.2');
+
+      // Adjust icon size to closely match the appearance of the adjacent 'locked' icon
+      .icon-no-view {
+        width: 1.1em;
+        height: 1.1em;
+      }
+    }
+
+    .tasks {
+      text-wrap: nowrap;
+    }
+
+    .actions li {
+      float: inline-end;
+    }
+
+    @include media-breakpoint-down(md) {
+      display: grid;
+
+      tr {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: theme('spacing.2');
+        padding: theme('spacing.5');
+      }
+
+      td,
+      td:first-child,
+      td:last-child {
+        padding: 0;
+      }
+
+      .title {
+        width: 100%;
+      }
+
+      .actions-container {
+        margin-inline-start: auto;
+      }
     }
   }
 }
@@ -628,7 +689,7 @@ table.listing {
     // - no bulk actions are present,
     // - we're not in the "custom ordering" mode,
     // then apply the same 80px padding via the first column's left padding.
-    &:not(.nice-padding &, .w-dashboard &, .report &, .editor-view &):not(
+    &:not(.nice-padding &, .report &, .editor-view &, .w-dashboard &):not(
         :has(
             td:first-child input[type='checkbox']:only-child,
             th:first-child input[type='checkbox']:only-child,

diff --git a/client/scss/components/_panel.scss b/client/scss/components/_panel.scss
@@ -162,15 +162,19 @@ $header-button-size: theme('spacing.6');
 }
 
 .w-panel--dashboard {
-  @include box();
-  padding-bottom: 0;
+  border: 1px solid theme('colors.border-furniture');
+  border-radius: 5px;
   margin-bottom: calc(
     theme('spacing.4') + theme('spacing.4') * var(--w-density-factor)
   );
 
   .w-panel__header {
-    margin-inline-start: calc(-1 * theme('spacing.5'));
-    padding-bottom: theme('spacing.5');
+    padding: theme('spacing.5');
+    margin-inline-start: 0;
+
+    @include media-breakpoint-up(sm) {
+      margin-inline-start: calc(-1 * theme('spacing.5'));
+    }
   }
 
   .w-panel__heading {

diff --git a/client/scss/components/_status-tag.scss b/client/scss/components/_status-tag.scss
@@ -36,10 +36,6 @@
     border-radius: theme('borderRadius.xl');
     // stylelint-disable-next-line property-disallowed-list
     text-transform: none;
-
-    .w-dashboard & {
-      float: inline-end;
-    }
   }
 }
 

diff --git a/client/scss/components/_summary.scss b/client/scss/components/_summary.scss
@@ -1,6 +1,6 @@
 .w-summary {
   color: theme('colors.text-link-default');
-  margin-bottom: theme('spacing.8');
+  margin-bottom: theme('spacing.3');
   padding-top: theme('spacing.1');
 
   .w-summary__list {

diff --git a/client/scss/core.scss b/client/scss/core.scss
@@ -176,7 +176,6 @@ These are classes that provide overrides.
 
 @import 'layouts/404';
 @import 'layouts/compare-revisions';
-@import 'layouts/home';
 @import 'layouts/login';
 @import 'layouts/account';
 @import 'layouts/workflow-progress';

diff --git a/client/scss/layouts/_home.scss b/client/scss/layouts/_home.scss
diff --git a/wagtail/admin/site_summary.py b/wagtail/admin/site_summary.py
@@ -55,7 +55,6 @@ def is_shown(self):
 
 
 class SiteSummaryPanel(Component):
-    name = "site_summary"
     template_name = "wagtailadmin/home/site_summary.html"
 
     def __init__(self, request):

diff --git a/wagtail/admin/templates/wagtailadmin/home.html b/wagtail/admin/templates/wagtailadmin/home.html
@@ -1,6 +1,5 @@
 {% extends "wagtailadmin/generic/base.html" %}
 {% load wagtailadmin_tags i18n %}
-{% block bodyclass %}homepage{% endblock %}
 
 {% block extra_css %}
     {{ block.super }}
@@ -10,22 +9,36 @@
 {% block content %}
     {% fragment as header_title %}
         {% block branding_welcome %}
-            {% trans site_name|title %}
+            {{ site_name|title }}
         {% endblock %}
     {% endfragment %}
 
     {% component upgrade_notification %}
-    <div class="w-dashboard w-px-6 sm:w-px-[3.75rem] w-pt-8 sm:w-pt-10 lg:w-pt-[3.75rem]">
+    <div class="w-dashboard w-px-6 sm:w-px-[3.75rem] w-mt-16 sm:w-mt-10 lg:w-mt-[3.75rem]">
         <header class="w-flex w-flex-col lg:w-flex-row">
-            <div class="md:w-pr-20">
+            <div class="lg:w-pr-20 lg:w-grow">
                 <h1 class="w-h1 w-mt-0">{{ header_title }}</h1>
                 {% component site_summary %}
+
+                <form
+                    class="w-mb-12"
+                    action="{% url "wagtailadmin_pages:search" %}"
+                    method="get"
+                    novalidate
+                    role="search"
+                >
+                    {% for field in search_form %}
+                        {% formattedfield field=field sr_only_label=True icon="search" %}
+                    {% endfor %}
+                    <div class="submit w-sr-only"><input type="submit" value="Search" class="button" /></div>
+                </form>
+
             </div>
             {% include "wagtailadmin/home/account_summary.html" %}
         </header>
         {% if panels %}
             {% for panel in panels %}
-                {% component panel %}
+                {% component panel fallback_render_method=True %}
             {% endfor %}
         {% else %}
             <p>{% trans "This is your dashboard on which helpful information about content you've created will be displayed." %}</p>

diff --git a/wagtail/admin/templates/wagtailadmin/home/account_summary.html b/wagtail/admin/templates/wagtailadmin/home/account_summary.html
@@ -1,14 +1,14 @@
 {% load wagtailadmin_tags wagtailcore_tags i18n %}
 {% wagtail_version as current_version %}
-<div class="w-flex w-gap-5 w-mb-[3.5rem] lg:w-pl-[3.75rem] lg:w-border-l w-border-border-furniture">
+<div class="w-hidden lg:w-flex w-gap-5 w-pt-4 w-mb-[3.5rem] w-px-[3.75rem] w-border-l w-border-border-furniture">
     {% avatar_url user 80 as avatar %}
-    <div class="w-header__glyph avatar xlarge">
-        <img src="{{ avatar }}" alt="" />
-        <a class="edit-link" aria-label="Edit account avatar"
+    <div class="avatar xlarge">
+        <img src="{{ avatar }}" alt="" decoding="async" loading="lazy" />
+        <a class="edit-link" aria-label="{% trans 'Edit account avatar' %}"
            href="{{ base_url }}{% url 'wagtailadmin_account' %}#avatar-section">{% icon name="edit" %}</a>
     </div>
     <div>
-        <div class="w-text-16 w-font-bold w-text-text-label w-mb-1">{{ user|user_display_name }}</div>
+        <div class="w-label-1 w-mb-1">{{ user|user_display_name }}</div>
         <ul class="w-list-none w-p-0 w-m-0 w-flex w-flex-col w-gap-1">
             <li>
                 <a class="w-underline w-underline-offset-[3px]"
@@ -21,9 +21,9 @@
                    target="_blank"
                    rel="noreferrer">
                     {% blocktrans trimmed %}
-                        Wagtail {{ current_version }} editor's guide
+                        Wagtail {{ current_version }} editor guide
                     {% endblocktrans %}
-                    {% icon name="link-external" classname="w-a11y-result__icon" %}
+                    {% icon name="link-external" classname="initial" %}
                 </a>
             </li>
         </ul>

diff --git a/wagtail/admin/templates/wagtailadmin/home/locked_pages.html b/wagtail/admin/templates/wagtailadmin/home/locked_pages.html
@@ -4,18 +4,19 @@
     {% panel id="locked-pages" heading=_("Your locked pages") classname="w-panel--dashboard" %}
         <table class="listing listing--dashboard listing-page">
             <col />
+            <col width="10%"/>
             <col width="7%"/>
+            <col width="25%"/>
             <col width="10%"/>
-            <col width="20%"/>
             <col width="10%"/>
-
-            <thead>
+            <thead class="w-sr-only">
                 <tr>
                     <th class="title">{% trans "Title" %}</th>
-                    <th aria-hidden="true">{% comment %} added for visual alignment only {% endcomment %}</th>
-                    <th aria-hidden="true">{% comment %} added for visual alignment only {% endcomment %}</th>
-                    <th aria-hidden="true">{% comment %} added for visual alignment only {% endcomment %}</th>
+                    <th>{% trans "Language" %}</th>
+                    <th>{% trans "Privacy and access" %}</th>
+                    <th>{% trans "Status" %}</th>
                     <th>{% trans "Locked at" %}</th>
+                    <th aria-hidden="true">{% comment %} added for visual alignment only {% endcomment %}</th>
                 </tr>
             </thead>
             <tbody>
@@ -24,18 +25,22 @@
                         <td class="title">
                             <div class="title-wrapper">
                                 <a href="{% url 'wagtailadmin_pages:edit' page.id %}" title="{% trans 'Edit this page' %}">{{ page.get_admin_display_title }}</a>
-                                {% i18n_enabled as show_locale_labels %}
-                                {% if show_locale_labels and page.locale_id %}
-                                    {% locale_label_from_id page.locale_id as locale_label %}
-                                    {% status locale_label classname="w-status--label" %}
-                                {% endif %}
                             </div>
                         </td>
+                        <td>
+                            {% i18n_enabled as show_locale_labels %}
+                            {% if show_locale_labels and page.locale_id %}
+                                {% locale_label_from_id page.locale_id as locale_label %}
+                                {% status locale_label classname="w-status--label" %}
+                            {% endif %}
+                        </td>
                         <td>
                             {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}
                             {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %}
                         </td>
-                        <td>
+                        <td>{% include "wagtailadmin/shared/page_status_tag.html" with page=page %}</td>
+                        <td>{% human_readable_date page.locked_at %}</td>
+                        <td class="actions-container">
                             <ul class="actions">
                                 <li>
                                     {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") %}
@@ -63,8 +68,6 @@
                                 </li>
                             </ul>
                         </td>
-                        <td>{# Deliberately empty #}</td>
-                        <td>{% human_readable_date page.locked_at %}</td>
                     </tr>
                 {% endfor %}
             </tbody>