Status sidebar design review and fixes (#8445)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

client/src/entrypoints/admin/page-editor.js

@@ -407,7 +407,7 @@ window.updateFooterSaveWarning = (formDirty, commentsDirty) => {
 document.addEventListener('DOMContentLoaded', () => {
   const setPanel = (panelName) => {
     const sidePanelWrapper = document.querySelector('[data-form-side]');
-
+    const body = document.querySelector('body');
     // Open / close side panel
 
     // HACK: For now, the comments will show without the side-panel opening.
@@ -433,11 +433,13 @@ document.addEventListener('DOMContentLoaded', () => {
           // eslint-disable-next-line no-param-reassign
           panel.hidden = false;
           panel.dispatchEvent(new CustomEvent('show'));
+          body.classList.add('side-panel-open');
         }
       } else if (!panel.hidden) {
         // eslint-disable-next-line no-param-reassign
         panel.hidden = true;
         panel.dispatchEvent(new CustomEvent('hide'));
+        body.classList.remove('side-panel-open');
       }
     });
 

client/tailwind.config.js

@@ -80,6 +80,9 @@ module.exports = {
         sidebar:
           'left, inset-inline-start, padding-inline-start, width, transform, margin-top, min-height',
       },
+      zIndex: {
+        header: '100',
+      },
     },
   },
   plugins: [

client/tests/integration/homepage.test.js

@@ -19,7 +19,7 @@ describe('Homepage', () => {
 
   it('axe page explorer', async () => {
     const trigger = await page.$(
-      '.sidebar-page-explorer-item [aria-haspopup="menu"]',
+      '.sidebar-page-explorer-item [aria-haspopup="dialog"]',
     );
     await trigger.click();
     await expect(page).toPassAxeTests({
@@ -29,7 +29,7 @@ describe('Homepage', () => {
 
   it('axe sidebar sub-menu', async () => {
     const trigger = await page.$(
-      '.sidebar-sub-menu-item [aria-haspopup="menu"]',
+      '.sidebar-sub-menu-item [aria-haspopup="dialog"]',
     );
     await trigger.click();
     await expect(page).toPassAxeTests({

wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss

@@ -8,6 +8,7 @@
 .page-editor {
   .content-wrapper {
     margin-bottom: 10em;
+    overflow-x: hidden;
   }
 
   .breadcrumb {
@@ -122,16 +123,15 @@
   }
 
   .form-side {
-    @apply w-fixed
+    @apply w-absolute
     w-z-[90]
     w-right-0
-    w-top-[100px]
-    sm:w-top-[50px]
+    w-top-full
     w-w-full
+    w-h-screen
     sm:w-max-w-[420px]
     w-transform
     w-translate-x-full
-    w-h-full
     w-px-5
     w-py-10
     md:w-p-10
@@ -140,7 +140,9 @@
     w-transition
     w-duration-300
     w-border-l
-    w-border-grey-100;
+    w-border-grey-100
+    w-overflow-y-auto
+    w-scrollbar-thin;
 
     &--open {
       @apply w-translate-x-0;
@@ -165,8 +167,8 @@
   }
 }
 
-.has-messages .form-side {
-  @apply w-top-[170px] md:w-top-[120px];
+.side-panel-open {
+  @apply w-overflow-y-hidden sm:w-overflow-y-auto;
 }
 
 // An object is the basic wrapper around any field or group of fields in the editor interface

wagtail/admin/templates/wagtailadmin/base.html

@@ -5,7 +5,7 @@
     <template data-wagtail-sidebar-branding-logo>{% block branding_logo %}{% endblock %}</template>
     {% sidebar_props %}
     <aside id="wagtail-sidebar" class="sidebar-loading" data-wagtail-sidebar aria-label="{% trans 'Sidebar' %}"></aside>
-    <main class="content-wrapper" id="main">
+    <main class="content-wrapper w-overflow-x-hidden" id="main">
         <div class="content">
             {# Always show messages div so it can be appended to by JS #}
             <div class="messages">

wagtail/admin/templates/wagtailadmin/icons/draft.svg

@@ -1,3 +1,3 @@
-<svg id="icon-draft" viewBox="0 0 23 21">
-    <g fill-rule="evenodd"><path d="M18 18v1.11a.88.88 0 01-.875.89H4.875A.88.88 0 014 19.11V18h14zM12.167 1v5.047c0 .49.393.89.875.89H18V9H4V1.89c0-.455.332-.828.765-.883L4.875 1h7.292zm1.071 0c.25 0 .489.098.664.273l3.825 3.829a.935.935 0 01.273.66V6h-5V1h.238z" fill-rule="nonzero"/><text font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif" font-size="7" font-weight="bold" transform="translate(0 .333)"><tspan x="0" y="15.667">DRAFT</tspan></text></g>
+<svg id="icon-draft" viewBox="0 0 24 23">
+    <path d="M19.8 19.1v2c0 .9-.5 1.6-1 1.6H4.2c-.6 0-1-.7-1-1.6v-2h16.6zM12.9.2v6c0 .6.5 1.1 1 1.1h5.9v2.4H3.2V1.3c0-.5.4-1 .9-1H12.9zm1.3 0c.3 0 .6.1.8.3L19.5 5c.2.2.3.5.3.8v.3h-5.9V.2h.3z"/><text transform="translate(-.5399 16.877)" font-family="-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif" font-weight="bold" font-size="7">DRAFT</text>
 </svg>

wagtail/admin/templates/wagtailadmin/pages/create.html

@@ -7,9 +7,11 @@
 
 {% block content %}
     <div id="comments"></div>
-    {% include 'wagtailadmin/shared/headers/page_create_header.html' %}
 
-    {% include "wagtailadmin/shared/page_side_panels.html" %}
+    <div class="w-sticky w-top-0 w-z-header">
+        {% include 'wagtailadmin/shared/headers/page_create_header.html' %}
+        {% include "wagtailadmin/shared/page_side_panels.html" %}
+    </div>
 
     <form id="page-edit-form" action="{% url 'wagtailadmin_pages:add' content_type.app_label content_type.model parent_page.id %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
         {% csrf_token %}

wagtail/admin/templates/wagtailadmin/pages/edit.html

@@ -9,9 +9,10 @@
     <div id="comments"></div>
     {% page_permissions page as page_perms %}
 
-    {% include 'wagtailadmin/shared/headers/page_edit_header.html' %}
-
-    {% include "wagtailadmin/shared/page_side_panels.html" %}
+    <div class="w-sticky w-top-0 w-z-header">
+        {% include 'wagtailadmin/shared/headers/page_edit_header.html' %}
+        {% include "wagtailadmin/shared/page_side_panels.html" %}
+    </div>
 
     {% block form %}
         <form id="page-edit-form" action="{% url 'wagtailadmin_pages:edit' page.id %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
@@ -66,7 +67,6 @@
             </footer>
         </form>
     {% endblock %}
-
 {% endblock %}
 
 {% block extra_css %}

wagtail/admin/templates/wagtailadmin/pages/side_panels/includes/action_list_item.html

@@ -17,7 +17,7 @@
                 </div>
                 {% block action %}
                     {% if not hide_action %}
-                        <a class="w-text-14 w-text-teal-200 w-no-underline hover:w-underline w-transition"
+                        <a class="w-text-14 w-text-teal-200 hover:w-text-teal-600 w-no-underline w-transition"
                             href="{{ action_url }}"
                             aria-describedby="status-sidebar-{{ title|cautious_slugify }}"
                         >

wagtail/admin/templates/wagtailadmin/pages/side_panels/includes/side_panel_button.html

@@ -8,9 +8,9 @@
     has_toggle - Show toggle icon on the button
     attr - custom attributes for the button
 {% endcomment %}
-<button type="button" class="{{ classes }} w-bg-transparent w-text-14 w-p-0 w-text-teal-200 hover:w-underline w-inline-flex w-justify-center" {% if data_url %}data-url="{{ data_url }}" {% endif %}{% if has_toggle %}data-button-with-dropdown-toggle {% endif %}{{ attr }}>
+<button type="button" class="{{ classes }} w-bg-transparent w-text-14 w-p-0 w-text-teal-200 hover:w-text-teal-600 w-inline-flex w-justify-center w-transition" {% if data_url %}data-url="{{ data_url }}" {% endif %}{% if has_toggle %}data-button-with-dropdown-toggle {% endif %}{{ attr }}>
     {{ text }}
     {% if has_toggle %}
-        {% icon name='arrow-down' class_name='w-w-4 w-h-4 w-text-teal-200 w-transition motion-reduce:w-transition-none' %}
+        {% icon name='arrow-down' class_name='w-w-4 w-h-4 w-transition motion-reduce:w-transition-none' %}
     {% endif %}
 </button>

wagtail/admin/templates/wagtailadmin/pages/side_panels/status.html

@@ -27,7 +27,9 @@
             {% endwith %}
         </div>
         {% if page.first_published_at %}
-            <div class="w-help-text">{% trans 'First published' %} {{ page.first_published_at }}</div>
+            <div class="w-help-text">
+                {% trans 'First published ' %}{% timesince_last_update page.first_published_at use_shorthand=True %}
+            </div>
         {% endif %}
     </div>
 </div>

wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html

@@ -1,6 +1,6 @@
 {% load wagtailadmin_tags i18n %}
 {# Z index 99 to ensure header is always above  #}
-<header class="w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-grey-50 w-border-b w-border-grey-100 w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-[99] sm:w-sticky w--h-[50px]">
+<header class="w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between w-bg-grey-50 w-border-b w-border-grey-100 w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-[50px]">
 
     {# Padding left on mobile to give space for navigation toggle, #}
     <div class="w-pl-[50px] w-min-h-[50px] sm:w-pl-0 sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border" data-slim-header>