From 31d0e850fa95eabc591f1f7f7ec4a90534b4dada Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Sun, 5 Feb 2023 11:08:46 +0800 Subject: [PATCH 1/8] feat(stylesheets): create z-index mini framework Create z-index map in _z-index.scss - update z-index usage throughout stylesheets Closes #5397 --- app/assets/stylesheets/_z-index.scss | 19 +++++++++++++++++++ app/assets/stylesheets/course/layout.scss | 2 +- app/assets/stylesheets/layout.scss | 1 + .../fields/{CKEditor.css => CKEditor.scss} | 2 +- .../lib/components/core/layouts/layout.scss | 6 +++--- 5 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 app/assets/stylesheets/_z-index.scss rename client/app/lib/components/core/fields/{CKEditor.css => CKEditor.scss} (73%) diff --git a/app/assets/stylesheets/_z-index.scss b/app/assets/stylesheets/_z-index.scss new file mode 100644 index 00000000000..2c812776d8a --- /dev/null +++ b/app/assets/stylesheets/_z-index.scss @@ -0,0 +1,19 @@ +@use "sass:map"; + +// elements are stored in ascending order +$elements: ( + 'sidebar-container', + 'footer', + 'show-sidebar', + 'body-nav', + 'ck-body-wrapper' +); + +// z-index values can be accessed with map-get($z-index, {element}) +$z-index: (); +$current-z-index: 0; +@each $element in $elements { + $current-z-index: $current-z-index + 1; + $z-index-entry: (#{$element}: $current-index); + $z-index: map-merge($z-index, $z-index-entry); +} diff --git a/app/assets/stylesheets/course/layout.scss b/app/assets/stylesheets/course/layout.scss index 949211b6cf7..cfdd6c9dcfc 100644 --- a/app/assets/stylesheets/course/layout.scss +++ b/app/assets/stylesheets/course/layout.scss @@ -124,7 +124,7 @@ $sidebar-margin-side: 1.5rem; #show-sidebar { border: 0; position: absolute; - z-index: 999; + z-index: map-get($z-index, 'show-sidebar'); } #full-sidebar { diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index e013accda8e..179ca7a99e7 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2,6 +2,7 @@ @import 'bootstrap'; @import 'variables'; +@import 'z-index'; @import 'bootstrap-datetimepicker'; @import 'bootstrap-select'; @import 'tokenfield-typeahead'; diff --git a/client/app/lib/components/core/fields/CKEditor.css b/client/app/lib/components/core/fields/CKEditor.scss similarity index 73% rename from client/app/lib/components/core/fields/CKEditor.css rename to client/app/lib/components/core/fields/CKEditor.scss index 6d725bc25bb..47039700de7 100644 --- a/client/app/lib/components/core/fields/CKEditor.css +++ b/client/app/lib/components/core/fields/CKEditor.scss @@ -3,5 +3,5 @@ is rendered properly in MUI dialog */ .ck-body-wrapper { position: absolute; - z-index: 1500; + z-index: map-get($z-index, 'ck-body-wrapper'); } diff --git a/client/app/lib/components/core/layouts/layout.scss b/client/app/lib/components/core/layouts/layout.scss index bee0769fb06..0d56f7c9ef6 100644 --- a/client/app/lib/components/core/layouts/layout.scss +++ b/client/app/lib/components/core/layouts/layout.scss @@ -2,13 +2,13 @@ body { padding-top: 60px; & > nav { - z-index: 1201 !important; + z-index: map-get($z-index, 'body-nav'); } } .sidebarContainer { & > div { - z-index: 1; + z-index: map-get($z-index, 'sidebar-container-div'); @media (min-width: 600px) { flex-basis: 33.33333%; @@ -29,7 +29,7 @@ body { footer { background-color: #ffffff; - z-index: 2; + z-index: map-get($z-index, 'footer'); } img { From adf461334b8dd1cb444e9ecaf74793e77e5ad839 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Sun, 5 Feb 2023 11:13:53 +0800 Subject: [PATCH 2/8] style(stylesheets): remove whitespace --- app/assets/stylesheets/_z-index.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/_z-index.scss b/app/assets/stylesheets/_z-index.scss index 2c812776d8a..a9bd66e658d 100644 --- a/app/assets/stylesheets/_z-index.scss +++ b/app/assets/stylesheets/_z-index.scss @@ -2,18 +2,18 @@ // elements are stored in ascending order $elements: ( - 'sidebar-container', - 'footer', - 'show-sidebar', - 'body-nav', - 'ck-body-wrapper' + 'sidebar-container', + 'footer', + 'show-sidebar', + 'body-nav', + 'ck-body-wrapper' ); // z-index values can be accessed with map-get($z-index, {element}) $z-index: (); $current-z-index: 0; @each $element in $elements { - $current-z-index: $current-z-index + 1; - $z-index-entry: (#{$element}: $current-index); - $z-index: map-merge($z-index, $z-index-entry); + $current-z-index: $current-z-index + 1; + $z-index-entry: (#{$element}: $current-index); + $z-index: map-merge($z-index, $z-index-entry); } From 812e3bd9c3bb6f4f99bc5cd4a9d2605e551621c0 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Sun, 5 Feb 2023 11:29:19 +0800 Subject: [PATCH 3/8] fix(stylesheets): fixed typo --- app/assets/stylesheets/_z-index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/_z-index.scss b/app/assets/stylesheets/_z-index.scss index a9bd66e658d..42b8cfd9369 100644 --- a/app/assets/stylesheets/_z-index.scss +++ b/app/assets/stylesheets/_z-index.scss @@ -14,6 +14,6 @@ $z-index: (); $current-z-index: 0; @each $element in $elements { $current-z-index: $current-z-index + 1; - $z-index-entry: (#{$element}: $current-index); + $z-index-entry: (#{$element}: $current-z-index); $z-index: map-merge($z-index, $z-index-entry); } From 57c142f8c6f208d618d41b2bd1303cb3dfb25a8e Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Mon, 6 Feb 2023 00:51:39 +0800 Subject: [PATCH 4/8] fix(stylesheets): update scss imports --- app/assets/stylesheets/_z-index.scss | 2 +- .../lib/components/core/fields/CKEditor.scss | 1 + .../core/fields/CKEditorRichText.tsx | 2 +- .../lib/components/core/layouts/layout.scss | 2 ++ client/webpack.common.js | 28 +++++++++++++++++-- 5 files changed, 31 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/_z-index.scss b/app/assets/stylesheets/_z-index.scss index 42b8cfd9369..b637d6b8954 100644 --- a/app/assets/stylesheets/_z-index.scss +++ b/app/assets/stylesheets/_z-index.scss @@ -1,4 +1,4 @@ -@use "sass:map"; +@use 'sass:map'; // elements are stored in ascending order $elements: ( diff --git a/client/app/lib/components/core/fields/CKEditor.scss b/client/app/lib/components/core/fields/CKEditor.scss index 47039700de7..bffac50ef31 100644 --- a/client/app/lib/components/core/fields/CKEditor.scss +++ b/client/app/lib/components/core/fields/CKEditor.scss @@ -1,5 +1,6 @@ /* Below are needed to ensure ckeditor popup (eg link) is rendered properly in MUI dialog */ +@import 'z-index'; .ck-body-wrapper { position: absolute; diff --git a/client/app/lib/components/core/fields/CKEditorRichText.tsx b/client/app/lib/components/core/fields/CKEditorRichText.tsx index ddba783f3d7..3a74c491d85 100644 --- a/client/app/lib/components/core/fields/CKEditorRichText.tsx +++ b/client/app/lib/components/core/fields/CKEditorRichText.tsx @@ -7,7 +7,7 @@ import { cyan } from '@mui/material/colors'; import axios from 'lib/axios'; -import './CKEditor.css'; +import './CKEditor.scss'; interface Props { inputId: string; diff --git a/client/app/lib/components/core/layouts/layout.scss b/client/app/lib/components/core/layouts/layout.scss index 0d56f7c9ef6..eda5a8188fd 100644 --- a/client/app/lib/components/core/layouts/layout.scss +++ b/client/app/lib/components/core/layouts/layout.scss @@ -1,3 +1,5 @@ +@import 'z-index'; + body { padding-top: 60px; diff --git a/client/webpack.common.js b/client/webpack.common.js index 749e15d9a81..9773e4eeb0e 100644 --- a/client/webpack.common.js +++ b/client/webpack.common.js @@ -82,8 +82,7 @@ module.exports = { resolve( __dirname, 'node_modules/react-image-crop/dist/ReactCrop.css', - ), - resolve(__dirname, 'app/lib/components/core/fields/CKEditor.css'), + ) ], }, { @@ -112,6 +111,31 @@ module.exports = { }, 'sass-loader', ], + exclude: [ + /node_modules/, + resolve(__dirname, 'app/lib/styles'), + resolve(__dirname, 'app/lib/components/core/layouts/layout.scss'), + resolve(__dirname, 'app/lib/components/core/fields/CKEditor.scss'), + ], + }, + { + test: /\.scss$/, + use: [ + 'style-loader', + 'css-loader', + { + loader: 'sass-loader', + options: { + sassOptions: { + includePaths: [join(__dirname, '..', 'app/assets/stylesheets')] + }, + }, + }, + ], + include: [ + resolve(__dirname, 'app/lib/components/core/layouts/layout.scss'), + resolve(__dirname, 'app/lib/components/core/fields/CKEditor.scss'), + ], exclude: [/node_modules/, resolve(__dirname, 'app/lib/styles')], }, { From 548a3817941565282f0c926bf8b4b7be6baa046a Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Mon, 6 Feb 2023 20:06:05 +0800 Subject: [PATCH 5/8] fix(stylesheets): fix linting issues --- client/webpack.common.js | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/client/webpack.common.js b/client/webpack.common.js index 9773e4eeb0e..c79a2758f3d 100644 --- a/client/webpack.common.js +++ b/client/webpack.common.js @@ -4,6 +4,10 @@ const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); const Dotenv = require('dotenv-webpack'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const styleLoader = 'style-loader'; +const cssLoader = 'css-loader'; +const sassLoader = 'sass-loader'; + module.exports = { entry: { coursemology: [ @@ -76,32 +80,32 @@ module.exports = { }, { test: /\.css$/, - use: ['style-loader', 'css-loader'], + use: [styleLoader, cssLoader], include: [ resolve(__dirname, 'node_modules/rc-slider/assets'), resolve( __dirname, 'node_modules/react-image-crop/dist/ReactCrop.css', - ) + ), ], }, { test: /\.css$/, - use: ['style-loader', 'css-loader', 'postcss-loader'], + use: [styleLoader, cssLoader, 'postcss-loader'], include: [resolve(__dirname, 'app/theme/index.css')], }, { test: /\.scss$/, - use: ['style-loader', 'css-loader', 'sass-loader'], + use: [styleLoader, cssLoader, sassLoader], include: [resolve(__dirname, 'app/lib/styles')], exclude: /node_modules/, }, { test: /\.scss$/, use: [ - 'style-loader', + styleLoader, { - loader: 'css-loader', + loader: cssLoader, options: { importLoaders: 1, modules: { @@ -109,7 +113,7 @@ module.exports = { }, }, }, - 'sass-loader', + sassLoader, ], exclude: [ /node_modules/, @@ -121,13 +125,13 @@ module.exports = { { test: /\.scss$/, use: [ - 'style-loader', - 'css-loader', + styleLoader, + cssLoader, { - loader: 'sass-loader', + loader: sassLoader, options: { sassOptions: { - includePaths: [join(__dirname, '..', 'app/assets/stylesheets')] + includePaths: [join(__dirname, '..', 'app/assets/stylesheets')], }, }, }, From 6662de34edc2f4072a36820054a7023eb7fa0f98 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Mon, 6 Feb 2023 21:57:34 +0800 Subject: [PATCH 6/8] Fix(stylesheets): z-index values from libraries --- app/assets/stylesheets/_z-index.scss | 36 ++++++++++++++++------------ 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/_z-index.scss b/app/assets/stylesheets/_z-index.scss index b637d6b8954..cb0503f329e 100644 --- a/app/assets/stylesheets/_z-index.scss +++ b/app/assets/stylesheets/_z-index.scss @@ -1,19 +1,25 @@ @use 'sass:map'; -// elements are stored in ascending order -$elements: ( - 'sidebar-container', - 'footer', - 'show-sidebar', - 'body-nav', - 'ck-body-wrapper' -); +@function above($element) { + @return $element + 1; +} -// z-index values can be accessed with map-get($z-index, {element}) -$z-index: (); -$current-z-index: 0; -@each $element in $elements { - $current-z-index: $current-z-index + 1; - $z-index-entry: (#{$element}: $current-z-index); - $z-index: map-merge($z-index, $z-index-entry); +@function below($element) { + @return $element - 1; } + +// z-index values from libraries +$navbar-static-top: 1000; +$mui-app-bar: 1100; +$mui-tooltip-popper: 1500; + +$base: 0; + +// z-index values can be accessed with map-get($z-index, {element}) +$z-index: ( + 'sidebar-container': above($base), + 'footer': above(above($base)), + 'show-sidebar': below($navbar-static-top), + 'body-nav': above($mui-app-bar), + 'ck-body-wrapper': $mui-tooltip-popper, +); From b8d603ec95cb36bdf5c4641c96bd4f158e087bd0 Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Mon, 6 Feb 2023 23:22:21 +0800 Subject: [PATCH 7/8] Fix(stylesheets): adjust z-index values --- app/assets/stylesheets/_z-index.scss | 3 +-- client/app/lib/components/core/layouts/layout.scss | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/_z-index.scss b/app/assets/stylesheets/_z-index.scss index cb0503f329e..3622f12ad38 100644 --- a/app/assets/stylesheets/_z-index.scss +++ b/app/assets/stylesheets/_z-index.scss @@ -10,7 +10,6 @@ // z-index values from libraries $navbar-static-top: 1000; -$mui-app-bar: 1100; $mui-tooltip-popper: 1500; $base: 0; @@ -20,6 +19,6 @@ $z-index: ( 'sidebar-container': above($base), 'footer': above(above($base)), 'show-sidebar': below($navbar-static-top), - 'body-nav': above($mui-app-bar), + 'body-nav': below($mui-tooltip-popper), 'ck-body-wrapper': $mui-tooltip-popper, ); diff --git a/client/app/lib/components/core/layouts/layout.scss b/client/app/lib/components/core/layouts/layout.scss index eda5a8188fd..f10b5d3f8b8 100644 --- a/client/app/lib/components/core/layouts/layout.scss +++ b/client/app/lib/components/core/layouts/layout.scss @@ -10,7 +10,7 @@ body { .sidebarContainer { & > div { - z-index: map-get($z-index, 'sidebar-container-div'); + z-index: map-get($z-index, 'sidebar-container'); @media (min-width: 600px) { flex-basis: 33.33333%; From 93e91672e8cecb8fdd211f1cd3c31c4347ac6ddf Mon Sep 17 00:00:00 2001 From: Leslie Yip Date: Mon, 6 Feb 2023 23:39:22 +0800 Subject: [PATCH 8/8] Fix(stylesheets): adjust z-index values --- app/assets/stylesheets/_z-index.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/stylesheets/_z-index.scss b/app/assets/stylesheets/_z-index.scss index 3622f12ad38..cf9f236598a 100644 --- a/app/assets/stylesheets/_z-index.scss +++ b/app/assets/stylesheets/_z-index.scss @@ -19,6 +19,6 @@ $z-index: ( 'sidebar-container': above($base), 'footer': above(above($base)), 'show-sidebar': below($navbar-static-top), - 'body-nav': below($mui-tooltip-popper), + 'body-nav': 1201, 'ck-body-wrapper': $mui-tooltip-popper, );