Markup changes to improve css targeting

Interested In Contributing?
1

This is the dashboard of our latest cluster.

image
image1408×815 105 KB

Sooo, I lost my mind a little bit and ripped the OOD dashboard down to the studs and made some changes to the partials to add more markup that I could use for targeting the custom CSS. Would any of this be of interest to others?

Some examples:

  • I used the tile: values in the app manifests to add the app name as a class, so I can hit them with their branding colors.

  • I added some structural divs to the Interactive Apps card so that I can show a minimal version of it on the dashboard by suppressing the stuff in the middle.

  • The large app launch buttons and the “recently used” app buttons are the same markup, the CSS is targeted to their position in the main well or the sidebar.

  • I added some structure to the section headings so that I can flex the main heading and the ‘see all’ links apart.

  • The utilities box in the sidebar is a custom widget; if I’m being honest, it’s just there to have something in the sidebar if the sections above it are empty.

  • The CSS changes are all in a custom.css file; I got frustrated trying to incorporate a custom scss file, so I gave up and did vanilla CSS like it’s 1999.

I have some things I want to go back in and fix, like adding the app color to the finished session cards, and reducing the vertical space in the dashboard session card, so this isn’t a finished product. I also still need to set up link tracking to see if anyone is even using the additional dashboard items.

This repo is private because it controls the entire cluster, but I could extract my hacked view/css/yml files if you’d like to see what a couple months of my life look like.

2

Dear sparkles,
I think you did a really great job. The dashboard looks pretty good and is a clear improvement over the original.
We also decided to go with the custom.css file, partly because that’s what the documentation says to do. But actually, I couldn’t get the Custom SCSS files to work either. However, we only made minor changes to adapt the look and feel to our corporate branding. I would be interested in seeing and understanding how you implemented your solution.