NEW: Improved task runner UI.

[mfendeksilverstripe]

Task runner better UI

Simple UI changes which improve usability of the task runner. Lightweight CSS (no build chain or JS required).

Problem

• it takes time to find the dev task you want to run especially if you don't know the exact task name
• links which execute dev tasks are tiny, mis-click error can happen
• current UI is cluttered with too many dev tasks and the space is used inefficiently
• rendering component of the task runner is messy (combines backend and frontend logic)
• overriding frontend display requires subclassing

Current UI

Solution

• move the task into grid-style list so the screen is less cluttered
• visually separate the dev tasks
• visually separate the action buttons and make them much more visible
• split the rendering into backend (populate data) and a template (render), this allows the template to be overridden without subclassing

Proposed UI

Related issues

#9541

Related Pull requests

symbiote/silverstripe-queuedjobs#301

[ScopeyNZ]

Just FYI @mfendeksilverstripe, this will have to target 4 as an enhancement 🙂

[mfendeksilverstripe]

@ScopeyNZ Rebased on 4

[emteknetnz]

Can we reduce the whitespace / padding? Seems like it's almost been optimized for touch devices, though I cannot imagine that anyone running dev/tasks will be on an mobile device.

[mfendeksilverstripe]

@emteknetnz Padding / whitespace reduced. Please review :)

[sachajudd]

@silverstripeux to advise on UI before merge.

[bergice]

Looking pretty good.

Some observations:

• The queued jobs module still uses the old interface
• There is a lot of inconsistent styling used here. We should follow official SilverStripe styling conventions if possible
• The new grid layout doesn't actually seem to display more tasks on the screen. Maybe it should be scaled down a bit so we can fit more data on the screen. We could also consider displaying more than 2 columns
• The layout must be responsive
  
  (see above point)
• We need localisation

[ScopeyNZ]

I really struggle to understand the effort to localise this screen, or even the effort to make this responsive. I would be incredibly surprised if this page was accessed by anyone other than site developers.

[mfendeksilverstripe]

@bergice The queued job task runner UI is covered in its own PR

[mfendeksilverstripe]

Not sure about about the need to have this UI responsive and localised. Would be happy to hear more detailed feedback on the consistency though.

[sachajudd]

Hey @mfendeksilverstripe thanks for taking time to come up with a new proposed UI! At this point the UI you're introducing has created a little more UX debt than before. I have a couple of suggestions to strip back the UI and simplify it a bit. How I see your UI being simplified:

• Remove the table you have around the tasks (this clutters the UI)
• Keep the split into 2 columns using something like https://www.w3schools.com/css/css3_multiple_columns.asp which breaks up a list into multiple columns. Also add a media query to make it responsive. My reasoning for keeping the dev screen responsive is regardless who uses it we should keep the UI to a high standard. The screen was responsive before this change so in turn this would create UX debt. I'm also thinking of the developers who use split screens on a day to day basis.
• Restyle the buttons to use similar styling as 'button-outline-secondary' to keep consistent with the CMS. The red/green (queuedjobs PR) hovers suggest 'Danger' and 'Go' so I would keep these as just standardised buttons. I've included the colours for you at the bottom of the design.
• The 'Run immediately' button could be renamed to just 'Run task'.
• Remove the task headers links and make these h3's.
• You can remove the main header 'Tasks' and it's description as it doesn't provide anymore information that the h1 does above.
• Try not to use #00000 as your text colour as this is considered bad practice for users. You can stick with Silverstripe bootstrap colours. I'd suggest changing the paragraph style to use #43536d and #303b4d for headers.

As long as this screen is accessible (colour contrast), responsive and doesn't clutter the UI or create UX debt I'm happy to approve and merge but currently as it stands I think it could be simplified back with some smaller improvements to enhance the UI. I do realise it's a little extra work but think would keep our dev screens cleaner and easier to use and build upon in the future 🙂

I do see the benefit from your quededjobs PR but also suggest the same changes in that screen. I think the top tabs you have could be improved as currently they are grey on grey (which is not accessible) and could mimic how we do tabs in the CMS. Here's an example of how I see these changes being applied to this PR also:

I'll link this comment to your other PR as a review also.

[mfendeksilverstripe]

That's really helpful @sachajudd many thanks :)

[sachajudd]

No problem! Let me know if you need a hand, I'm happy to help out and provide feedback if needed 🙂

[mfendeksilverstripe]

@sachajudd Pushed up new changes based on UI feedback, please review. This is how the UI looks like now:

Large screen

Small screen

[sachajudd]

Hey @mfendeksilverstripe it's looking great! Awesome to see you tackle this 🙂 just noticing a few things when I pulled down your branch:

• Inconsistent spacing between some headers and descriptions
• Gaps between certain tasks

[mfendeksilverstripe]

@sachajudd Pushed up new changes, please review:

• added focus state for the button

I looked into the issues with inconsistent spacing between title and description. This is caused by arbitrary HTML that can be included in the task description.

I don't think this is a layout issue. Fixing the content of specific tasks is beyond the scope of this PR.

The gaps between the tasks are caused by equal grid spacing as I'm using display: grid. I tried your suggestion to use column-count property but this can cause a single task to be split between columns. I'm open to suggestions on this one but I would be pretty happy with equal size grid cells.

[mfendeksilverstripe]

New changes:

• display now uses columns which fixes the spacing between items

@sachajudd This is now ready for review.

[mfendeksilverstripe]

@sachajudd I pushed up the changes you requested, please review.

Also, there is a handy tool you can use to suggest small changes. This is useful especially for the tiny one line changes you suggested last time ;-)

[mfendeksilverstripe]

@sachajudd I managed to fix the spacing issue as well. It turns out there was some extra whitespace which was turned into line breaks. If you pull the latest branch you should get nice spacing for all dev tasks (between title and description).

[sachajudd]

I tried to find the commit button on Friday but couldn't seem to find it 😂 cheers, I'll take a look this afternoon

[sachajudd]

Approved from a UX perspective! Awesome work @mfendeksilverstripe 🙂

[mfendeksilverstripe]

@Cheddam Pushed up changes as requested, please review.

Stale

[Cheddam]

Thanks for your contribution @mfendeksilverstripe!