[Feature] Admin department page styling #11853
Conversation
| }), | ||
| }} | ||
| add={{ | ||
| linkProps: { | ||
| href: paths.departmentCreate(), | ||
| label: intl.formatMessage({ | ||
| defaultMessage: "Create Department", | ||
| id: "ZbpbD6", | ||
| defaultMessage: "Create new department", |
There was a problem hiding this comment.
New is implied when creating something. Can we remove the word new?
| columnHelper.accessor("departmentNumber", { | ||
| id: "departmentNumber", | ||
| filterFn: "weakEquals", | ||
| header: intl.formatMessage({ | ||
| defaultMessage: "Department #", | ||
| id: "QOvS1b", | ||
| defaultMessage: "Number", |
There was a problem hiding this comment.
Everywhere else in the forms, it is referred to as Department number. Should it not be kept the same for consistency?
| defaultMessage: "Search departments", | ||
| id: "bUyxJi", | ||
| description: "Label for the departments table search input", | ||
| defaultMessage: "Search by keyword", |
| defaultMessage: 'Use the "Create Department" button to get started.', | ||
| id: "yat9wx", | ||
| defaultMessage: | ||
| 'Use the "Create new department" button to get started.', |
There was a problem hiding this comment.
There was a problem hiding this comment.
Nice work as always 🎉
For some reason the nav menu's z-index is overlapping the overlay only on the edit page, when the page is loading 😕 (why isn't it happening on the other pages too 😆). To fix this, we can create a new issue or just set them to "2" in lines NavigationMenu-L45 and NavigationMenu-L184
| const departmentName = getLocalizedName( | ||
| departmentData?.department?.name, | ||
| intl, | ||
| ); | ||
|
|
There was a problem hiding this comment.
I'm seeing a flash of "Not available" in the Hero title, while the department is being fetched. This is out of scope , and not blocking this, so I'll bring it up to the designers, to see what a good solution is.
There was a problem hiding this comment.
This is a good catch. I could have this be an empty string or "Loading" or something if you want.
There was a problem hiding this comment.
OK, I added the loading string
loading title for view page
|
Also the sign out and notifications buttons dark/light modes, aren't synced up with the rest of the dialog. (See far right of nav menu in image in light mode). Again, this is out of scope, but seems like an easy fix. If not I can create a new issue. Otherwise the design and code looks good 👍 |
|
As discussed with Josh, I just removed the navbar that was built-in to the hero and x3 of top padding. This should sidestep most of the issues you noticed. |
mnigh
changed the title
🤖 Resolves #11478
👋 Introduction
Updates the styling of the admin department pages and adds a new "view department" page.
🕵️ Details
I've rolled a few more things into this one.
I reduced the bottom padding on the new hero to x2. I've also removed the built-in navbar and x3 of top padding.
I created a new CardSectioned component. Visually it is based on CardBasic and it is broken up like PreviewList. It's not very flexible right now because we didn't receive any designs for it. Hopefully it can become a standard component that is reused widely someday.
🧪 Testing
📸 Screenshot