Z-index mini framework

[leslieyip02]

Create z-index map in _z-index.scss

• update z-index usage throughout stylesheets

Closes #5397

[leslieyip02]

I'm not too sure what I need to fix. I'm still very inexperienced, so I can try to rework this if anyone has any suggestions or advice.

I think the issue might be because of arbitrary z-index values used by some of the imported libraries. Is it still feasible to implement standardisation in that case?

[pchunky]

Thanks for your active contribution to Coursemology. I would strongly recommend you to refer to our contributing guidelines and front-end development guidelines. Some of your commit messages could have conformed to our conventions. Also, we do not use merge commits; we rebase.

I think the issue might be because of arbitrary z-index values used by some of the imported libraries. Is it still feasible to implement standardisation in that case?

Yes, we must. In fact, this is the one missing part from your changes. We need the front-end to conform to a z-index system, and any third-party libraries will also need to conform to it.

We are also moving away from Sass, so complex mixins and systems in Sass is really not recommended. We are transitioning to Tailwind (see #5049), so we probably will expect solutions around this framework.

Your changes were good attempts, but allow me to mention that it is not really a framework. It looks like an abstraction of raw "magic" z-index numbers to a map in a global style sheet. Not the most performant solution, but I guess it's fine since Sass will compile them to plain CSS either. But this doesn't necessarily solve our problem of being able to harmonise layering of elements in our application.

You may refer to the article that was referenced in the original issue, or come up with a better framework and propose it. And remember the most important thing in software engineering: documentation.

[leslieyip02]

Thanks for the feedback! I'll try my best to stick to the guidelines from now on. I've come up with 2 possible implementations:

Based on original article:

const base = 0;
const above = 1;

// add subsequent elements above the previous
const layer1 = above + base;
const layer2 = above + layer1;
const layer3 = above + layer2;

export const zIndex = {
    'layer-1': `z-[${layer1}]`,
    'layer-2': `z-[${layer2}]`,
    'layer-3': `z-[${layer3}]`
};

Alternative:

// elements are stored in ascending order
const elements = ['layer-1', 'layer-2', 'layer-3'];

// z-{index} tailwind utilities accepts arbitrary values
// map each element's z-index class based on its position in the array
const zIndex = new Map(elements.map((element, i) => [element, `z-[${i}]`]));

export default zIndex;

import zIndex from 'zIndex.js';

for (let [element, index] of zIndex) {
    console.log(element, index);
}

// output:
// layer-1 z-[0]
// layer-2 z-[1]
// layer-3 z-[2]

Would something like this be better?