Training style overhaul + style/accuracy edit

[validbeck]

Internal Notes for Reviewers

sc-7134

LIVE PREVIEW

New training stylesheet

site/training/assets/training.css

Now the training pages have their own adjusted look and feel — the dark green and light teal are the focus instead of the pink:

Old	New

New Revealjs slides styling

site/training/assets/custom.scss

• Updated too to match the new training styling are some visual adjustments to the slides:

Old	New

• As you can see from the last screenshot, there is now a handy dandy new .overlay class with our own custom styling that matches our theme instead of pulling from the Tachyons library (by calling one class rather than multiple additional Tachyons CSS ones!):
  

  documentation/site/training/assets/custom.scss

  Line 39 in edbbc2e

  .reveal .slide .overlay, .reveal .footer .overlay {

• There is also an .embed class that takes care of the slide navigation single-source file styling and the callouts within the overlays:
  

  documentation/site/training/assets/custom.scss

  Line 52 in edbbc2e

  .reveal .slide .embed {

Reorganized contents of training folder

• It was gettin' lorg. I've moved things into their own folder and adjusted links and references to accommodate the migration:

Old	New

• There's also a new fundamentals.qmd template in our internal templates folder: internal/templates/fundamentals.qmd

Slide updates

• There were some broken anchor links out to the old version of the training landing page, which I fixed.
• Made sure the styling/text-distribution for the slides looked a bit more balanced where there were two columns.

Administrator fundamentals

I single-sourced the basic workflow setup instructions and inserted them into the Configure workflows section, and removed any references to the outdated model documentation workflow that used to exist:

Old	New

Role & status styling

• There's a new .bubble class to reflect the way roles and statuses are displayed within the UI:
  

  documentation/site/styles.css

  Line 470 in edbbc2e

  .bubble {

Roles	Statuses

• I've updated anywhere that referenced these to use the new style.

Old	New

[github-actions]

A PR preview is available: Preview URL

[github-actions]

A PR preview is available: Preview URL

[github-actions]

A PR preview is available: Preview URL

[github-actions]

A PR preview is available: Preview URL

[github-actions]

A PR preview is available: Preview URL

[github-actions]

PR Summary

This pull request introduces several enhancements and fixes across multiple files related to course templates and documentation within the ValidMind project. Key changes include:

1. Course Template Updates:

   • Added new metadata fields and updated existing ones in course.qmd and fundamentals.qmd files to improve course presentation and functionality.
   • Adjusted layout and styling for better visual consistency and user experience.
   • Updated file paths for included resources to ensure correct linking and loading.

2. Documentation Enhancements:

   • Improved role descriptions and permissions in various documentation files to provide clearer guidance on user roles and their capabilities.
   • Added new sections and updated existing content to enhance the comprehensiveness of the documentation.
   • Introduced new files for workflow configuration, providing detailed instructions on setting up and linking workflow steps.

3. Styling and Asset Management:

   • Updated CSS and SCSS files to refine the visual styling of the platform, ensuring a consistent look and feel across different components.
   • Reorganized assets, including images and stylesheets, to improve maintainability and loading efficiency.

These changes aim to enhance the overall user experience, improve documentation clarity, and ensure the platform's visual consistency.

Test Suggestions

• Verify that all course templates render correctly with the new metadata and layout changes.
• Check that all links and included resources in the documentation are correctly resolved and accessible.
• Test the role-based access and permissions to ensure they align with the updated documentation.
• Validate the new workflow configuration steps to ensure they function as described in the documentation.
• Ensure that all CSS and SCSS changes are reflected correctly across the platform's UI.

[github-actions]

A PR preview is available: Preview URL

[nrichers]

I love this PR. 💖 You made a TON of improvements to our training content that move the needle on the look and feel, introducing that separate-yet-related look we talked about. I also appreciate the many smaller changes you made, like the use of {.bubble}.

My only suggestion would be around the sidebar on the main training page which we talked about a bit already. I agree with your assessment about the look and feel being off if you just use the regular background but my question is: do we NEED a sidebar on that page at all?

I pushed d19bd85 to show what a sidebar-less training landing page might look like. The only useful thing you lose is the search box but with the reimplementation of search on the front page, we could move search into the navbar.

[github-actions]

A PR preview is available: Preview URL

[validbeck]

It still didn't look quite right without the sidebar (so much empty space, and using the page fill options made it worse...), so what I did instead was get rid of the navbar to reduce visual clutter:

EDIT: Caveat that on the preview the sidebar title icon won't take you to the proper index.qmd, but it does indeed do that locally and should online.

[github-actions]

A PR preview is available: Preview URL

[github-actions]

A PR preview is available: Preview URL

[nrichers]

It still didn't look quite right without the sidebar (so much empty space, and using the page fill options made it worse...), so what I did instead was get rid of the navbar to reduce visual clutter

Can we wait with merging this PR until we've had a chance to make some additional changes, please? I think I had revelation while thinking about this and looking at some other training portals for inspiration.

Eventually, that training landing page will morph into something that stands alone as the home page on a separate training portal. That new training portal will feel more like the current home page of our docs site, with:

• Its own hero banner
• Sections with course tiles
• Highlights or video links
• And much more!

In preparation for that future, my preference would be to get rid of the sidebar long before getting rid of the navbar. I'd like there to be some natural progression as we iterate over the training content.

So here's the revelation, though you kinda have to squint and imagine the future ... For now, maybe the answer lies in introducing another item of visual interest, like a hero banner that stretches across to solve the issue you are concerned about. That would solve the empty space problem as the banner can stretch across, and then we list the current content as is.

Take a look at Airtable's academy for an extremely simple example. And I'll even let you make our hero banner somewhat pink — if the docs home site uses pink as the main accent colour with a dark green hero banner, then the training site could invert this colour scheme.

EDIT: Another example to look at is https://graphacademy.neo4j.com/ — extremely simple but visually more interesting hero banner that goes across, with a simple but appealing text CTA.

[nrichers]

Related to my previous comment, I'd like to discuss the new training content layout with Mehdi this coming week. It would be helpful to have that precursor to a new training portal home page in place, even if it requires some squinting and imagination for now.

[validbeck]

Can we wait with merging this PR until we've had a chance to make some additional changes, please? I think I had revelation while thinking about this and looking at some other training portals for inspiration.

It's why I left this as is without merging, yes.

I personally really like the sidebar as opposed to the navbar (and I actually based the entire redesign around it, so to me it doesn't feel cohesive without it), but we'll just have to agree to disagree there and you do happen to have an override if you're really adamant about it. :)

For now, maybe the answer lies in introducing another item of visual interest, like a hero banner that stretches across to solve the issue you are concerned about.

It's not really about "stretching across" for me (as I played around with scretching the page content before I readded the sidebar)... it's just that I think the swap between the nav & sidebar really visually distinct and I like that much more.

[nrichers]

I personally really like the sidebar as opposed to the navbar (and I actually based the entire redesign around it, so to me it doesn't feel cohesive without it), but we'll just have to agree to disagree there and you do happen to have an override if you're really adamant about it. :)

I don't think it works for a training home page and there's a reason we don't use this approach on our home page. But let's let this sit for a few hours and discuss later. I need to focus on some product footage for Kevin for now and won't have time to tinker with alternatives until the afternoon most likely.

[github-actions]

A PR preview is available: Preview URL

[github-actions]

A PR preview is available: Preview URL

[github-actions]

A PR preview is available: Preview URL

[nrichers]

Reorganized contents of training folder

Another item for us to discuss: I like the idea of breaking things down into different paths, but the folder path should reflect the course name. Soon enough, we will have multiple courses for developers, for example, so rather than having to rename existing courses, it would be good to agree on a convention now that does not require future file reshuffling. This will become especially important as we will likely have quite a few links from our CSM org and other places to training content.