adopt shared header template on the dashboard view #8781

PaarthAgarwal · 2022-06-30T10:28:48Z

Addresses #8539.
Applied shared header to dashboard.
Before:

After:

Edit1: Updated Screenshot
Edit2: Updated Screenshot

squash-labs · 2022-06-30T10:28:52Z

Manage this branch in Squash

Test this branch here: https://paarthagarwalhome-header-1s55u.squash.io

lb-

@PaarthAgarwal great start on the way here, I would like to see the styling get a bit closer to the current state though.

I have put specific code feedback in the review comments, but also some general feedback

The PR title could be a bit clearer 'use/adopt shared header template on the dashboard view'
When the shared header template changes are closer, can you also include a storybook (pattern library) variant that has the avatar in it, this will really help for testing later

Great start here!

wagtail/admin/templates/wagtailadmin/shared/header.html

wagtail/admin/templates/wagtailadmin/home.html

client/scss/layouts/_home.scss

wagtail/admin/templates/wagtailadmin/shared/header.html

wagtail/admin/templates/wagtailadmin/home.html

wagtail/admin/templates/wagtailadmin/shared/header.html

lb- · 2022-06-30T11:09:29Z

With the styling - it may need some careful work but it looks like there is a bit of an over use of position absolute here and this relates to I think the styles trying to work around the sidebar.

On top of that the existing styles are a mix of tailwind apply and normal scss so it is a bit of a minefield.

So far I have found that you can change the following in client/scss/components/_header.scss...

h1 { - get rid of the position relative
> svg.icon { - get rid of the position absolute and the inset-inline-start: -1.5em;
This makes the icons appear roughly the same and the avatar appear the same also (yay)
But everything is a bit far 'in'
This comes back to the padding-inline-start: 110px; which is a work around for the sidebar on mobile (note different breadpoints will have different padding)
But ... maybe this gives you a start of where to look
We can check with Thibaud but we should probably unravel all the apply and use the theme approach instead - we can chat more about this on our next catch up.

lb- · 2022-07-02T07:15:27Z

@PaarthAgarwal Can you please do a seperate branch / PR for the dashboard stats design updates.

It will.be easier to review in isolation.

Plus - we may end up getting the stats thing done much easier due to the discussion about header component stuff that is ongoing.

PaarthAgarwal · 2022-07-02T07:30:35Z

@PaarthAgarwal Can you please do a seperate branch / PR for the dashboard stats design updates.

It will.be easier to review in isolation.

Plus - we may end up getting the stats thing done much easier due to the discussion about header component stuff that is ongoing.

Sure

wagtail/admin/templates/wagtailadmin/shared/header.html

lb- · 2022-07-04T06:15:02Z

@PaarthAgarwal a few other things

We can probably remove header--home styles as not used now
Might be worth adding the prefix of w-header to the root header class + w-header__title etc (but leave left/col/row as is)

PaarthAgarwal · 2022-07-04T18:27:57Z

w-header

Removed the header--home styles.
Added the prefix w- to header classes in HTML, but it'll be better to put those changes in a separate PR because it may open a can of worms with failing tests and styling issues.
Updated screenshots in the first comment.

lb- · 2022-07-05T04:41:38Z

good call on the classes @PaarthAgarwal thanks.

client/scss/layouts/_home.scss

wagtail/admin/templates/wagtailadmin/shared/header.html

PaarthAgarwal · 2022-07-05T10:31:14Z

@PaarthAgarwal a few other things

We can probably remove header--home styles as not used now

Might be worth adding the prefix of w-header to the root header class + w-header__title etc (but leave left/col/row as is)

Interestingly there were no styles for .header classes nor any test for them. All the header styles are written for the header element directly.

lb- · 2022-07-05T11:21:32Z

wagtail/admin/templates/wagtailadmin/home/branding_welcome_title.html

+{% load i18n %}
+{% block branding_welcome %}
+    {% blocktrans trimmed %}Welcome to the {{ site_name }} Wagtail CMS{% endblocktrans %}
+{% endblock %}


might be good to add a new line here and also configure your editor to add line breaks at the end of your file.

lb- · 2022-07-05T11:23:44Z

wagtail/admin/templatetags/wagtailadmin_tags.py

@@ -153,6 +153,12 @@ def page_permissions(context, page):
    return _get_user_page_permissions(context).for_page(page)


+@register.simple_tag
+def classnames(*classes):
+    # classes # will be an array


Suggested change

# classes # will be an array

"""

Returns any args as a space-separated joined string for using in HTML class names.

"""

lb-

Code is looking pretty solid.
Now need to do a review of the UI changes in a few browsers.

would be good to add a bit more margin after the avatar or pull the avatar over to the left a bit more.

lb- · 2022-07-05T11:37:11Z

Update - there may be a refined design for the home (dashboard) view coming in the next week or so so this can probably come in mostly as is.

thibaudcolas · 2022-07-05T14:34:29Z

docs/advanced_topics/customisation/admin_templates.md


-```html+django
-{% extends "wagtailadmin/home.html" %}
+To replace the welcome message on the admin home page (dashboard), create a template file `dashboard/templates/wagtailadmin/home/branding_welcome_title.html` that overrides the content:


Note that if we went ahead with an approach like #8802, we wouldn’t need to refactor this as much.

lb- · 2022-07-06T03:49:25Z

@PaarthAgarwal I have done some tweaks to this branch and will merge in shortly - basically applying what we discussed, but also including Thibaud's template approach #8802

lb- · 2022-07-06T03:53:49Z

client/scss/layouts/_home.scss

+.homepage {
+  header {
+    .header__title {
+      inset-inline-start: -1.5em;


To simplify things I opted for a shared header styles approach only, see other comment below.

lb- · 2022-07-06T03:54:23Z

wagtail/admin/templates/wagtailadmin/shared/header.html

    {% block breadcrumb %}{% endblock %}
    <div class="row">
        <div class="left">
            <div class="col">
                <h1 class="header__title">
-                    {% if icon %}{% icon name=icon %}{% endif %}
+                    {% if icon %}
+                        {% icon class_name="w-header__icon" name=icon %}


Suggested change

{% icon class_name="w-header__icon" name=icon %}

{% icon class_name="w-header__glyph" name=icon %}

Having a generic class for the icon and avatar - we can make styles a bit easier to follow.

That'll be great!

lb- · 2022-07-06T03:54:39Z

wagtail/admin/templates/wagtailadmin/shared/header.html

+                    {% if icon %}
+                        {% icon class_name="w-header__icon" name=icon %}
+                    {% elif avatar %}
+                        <div class="avatar"><img src="{{ avatar }}" alt="" /></div>


Suggested change

<div class="avatar"><img src="{{ avatar }}" alt="" /></div>

<div class="w-header__glpyh avatar"><img src="{{ avatar }}" alt="" /></div>

Similar to above.

- use classnames template tag in shared header template - add classname as documented variable for the shared header template

lb- reviewed Jun 30, 2022

View reviewed changes

wagtail/admin/templates/wagtailadmin/home.html Outdated Show resolved Hide resolved

lb- reviewed Jun 30, 2022

View reviewed changes

wagtail/admin/templates/wagtailadmin/shared/header.html Outdated Show resolved Hide resolved

PaarthAgarwal changed the title ~~added shared header to dashboard~~ adopt shared header template on the dashboard view Jul 2, 2022

lb- mentioned this pull request Jul 4, 2022

UX Unification - header component with variations #8539

Closed

17 tasks

lb- reviewed Jul 4, 2022

View reviewed changes

wagtail/admin/templates/wagtailadmin/shared/header.html Outdated Show resolved Hide resolved

lb- reviewed Jul 4, 2022

View reviewed changes

wagtail/admin/templates/wagtailadmin/shared/header.html Show resolved Hide resolved

PaarthAgarwal marked this pull request as ready for review July 4, 2022 19:16

lb- added status:Needs Review component:Frontend GSOC Google Summer of Code labels Jul 5, 2022

lb- self-requested a review July 5, 2022 04:40

lb- reviewed Jul 5, 2022

View reviewed changes

client/scss/layouts/_home.scss Outdated Show resolved Hide resolved

lb- reviewed Jul 5, 2022

View reviewed changes

wagtail/admin/templates/wagtailadmin/shared/header.html Show resolved Hide resolved

PaarthAgarwal mentioned this pull request Jul 5, 2022

added prefix w- before header classes #8799

Merged

lb- reviewed Jul 5, 2022

View reviewed changes

lb- self-requested a review July 5, 2022 12:04

thibaudcolas mentioned this pull request Jul 5, 2022

Introduce new template fragment composition tags: BlockInclusionNode and fragment #8802

Merged

4 tasks

thibaudcolas reviewed Jul 5, 2022

View reviewed changes

lb- reviewed Jul 6, 2022

View reviewed changes

add classnames template tag for generating classnames

3ad346a

- use classnames template tag in shared header template - add classname as documented variable for the shared header template

lb- force-pushed the home_header branch from a1cad2d to 14a5609 Compare July 6, 2022 08:19

adopt the shared header include in the dashboard (home) view

923d2c8

lb- force-pushed the home_header branch from 14a5609 to 923d2c8 Compare July 6, 2022 08:29

lb- merged commit 3b9c9fc into wagtail:main Jul 6, 2022

PaarthAgarwal mentioned this pull request Jul 11, 2022

Adopted shared header in reports view #8839

Merged

laymonage mentioned this pull request Jul 19, 2022

UX Unification - Cleanup for slim header in page listing #8864

Closed

3 tasks

lb- mentioned this pull request Aug 31, 2022

Unit tests for the classnames template tag #9103

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

adopt shared header template on the dashboard view #8781

adopt shared header template on the dashboard view #8781

PaarthAgarwal commented Jun 30, 2022 •

edited

Loading

squash-labs bot commented Jun 30, 2022

lb- left a comment

lb- commented Jun 30, 2022

lb- commented Jul 2, 2022

PaarthAgarwal commented Jul 2, 2022

lb- commented Jul 4, 2022

PaarthAgarwal commented Jul 4, 2022

lb- commented Jul 5, 2022

PaarthAgarwal commented Jul 5, 2022

lb- Jul 5, 2022

lb- Jul 5, 2022

lb- left a comment

lb- commented Jul 5, 2022

thibaudcolas Jul 5, 2022

lb- commented Jul 6, 2022

lb- Jul 6, 2022

lb- Jul 6, 2022

PaarthAgarwal Jul 6, 2022

lb- Jul 6, 2022

	{% icon class_name="w-header__icon" name=icon %}
	{% icon class_name="w-header__glyph" name=icon %}

	<div class="avatar"><img src="{{ avatar }}" alt="" /></div>
	<div class="w-header__glpyh avatar"><img src="{{ avatar }}" alt="" /></div>

adopt shared header template on the dashboard view #8781

adopt shared header template on the dashboard view #8781

Conversation

PaarthAgarwal commented Jun 30, 2022 • edited Loading

squash-labs bot commented Jun 30, 2022

Manage this branch in Squash

lb- left a comment

Choose a reason for hiding this comment

lb- commented Jun 30, 2022

lb- commented Jul 2, 2022

PaarthAgarwal commented Jul 2, 2022

lb- commented Jul 4, 2022

PaarthAgarwal commented Jul 4, 2022

lb- commented Jul 5, 2022

PaarthAgarwal commented Jul 5, 2022

lb- Jul 5, 2022

Choose a reason for hiding this comment

lb- Jul 5, 2022

Choose a reason for hiding this comment

lb- left a comment

Choose a reason for hiding this comment

lb- commented Jul 5, 2022

thibaudcolas Jul 5, 2022

Choose a reason for hiding this comment

lb- commented Jul 6, 2022

lb- Jul 6, 2022

Choose a reason for hiding this comment

lb- Jul 6, 2022

Choose a reason for hiding this comment

PaarthAgarwal Jul 6, 2022

Choose a reason for hiding this comment

lb- Jul 6, 2022

Choose a reason for hiding this comment

PaarthAgarwal commented Jun 30, 2022 •

edited

Loading