From 3091f9023ad41bafa0e55ecc3f9eb39ef1970601 Mon Sep 17 00:00:00 2001 From: ananyaspatil <106994008+ananyaspatil@users.noreply.github.com> Date: Mon, 27 Nov 2023 18:42:06 -0500 Subject: [PATCH] Ap/refactor zindexes (#228) * Revert "Update .gitignore (#220)" This reverts commit f935a376334bde3f5e35ce47d20d954ae1a01185. * refactored zindexes on all frontend style files * removed reverting of .gitignore --- styles/_AlertBanner.scss | 3 ++- styles/_DropdownFilter.scss | 3 ++- styles/_FeedbackModal.scss | 2 -- styles/_InfoIconTooltip.scss | 3 ++- styles/_Modal.scss | 3 ++- styles/_PhoneModal.scss | 3 ++- styles/_SearchHeader.scss | 8 ++++---- styles/_zIndexes.scss | 21 +++++++++++++++++++++ styles/pages/_Down.scss | 5 +++-- styles/pages/_Error.scss | 3 ++- styles/pages/_Home.scss | 13 +++++++------ styles/pages/_Results.scss | 9 +++++---- styles/panels/_SplashPage.scss | 23 ++++++++++++----------- 13 files changed, 64 insertions(+), 35 deletions(-) create mode 100644 styles/_zIndexes.scss diff --git a/styles/_AlertBanner.scss b/styles/_AlertBanner.scss index 53b205c7..32ffc6ec 100644 --- a/styles/_AlertBanner.scss +++ b/styles/_AlertBanner.scss @@ -1,7 +1,8 @@ @use 'variables' as Colors; +@use 'zIndexes' as Indexes; .alertBannerContainer { - z-index: 100000; + z-index: Indexes.$Thirteen; top: 0px; width: 100%; } diff --git a/styles/_DropdownFilter.scss b/styles/_DropdownFilter.scss index bdbcaf3f..0742dfe8 100644 --- a/styles/_DropdownFilter.scss +++ b/styles/_DropdownFilter.scss @@ -1,4 +1,5 @@ @use 'variables' as Colors; +@use 'zIndexes' as Indexes; .DropdownFilter { font-family: lato, sans-serif; //TO-DO: Change all fonts in filter sidebar @@ -111,7 +112,7 @@ &__selectable { position: absolute; overflow-y: auto; - z-index: 100000000; + z-index: Indexes.$Fifteen; max-height: 180px; border-radius: 0 0 7px 7px; width: 100%; diff --git a/styles/_FeedbackModal.scss b/styles/_FeedbackModal.scss index ee9fba0e..68e379e3 100644 --- a/styles/_FeedbackModal.scss +++ b/styles/_FeedbackModal.scss @@ -5,7 +5,6 @@ position: fixed; bottom: 2%; right: 2%; - z-index: 30; display: flex; align-items: center; height: 32px; @@ -43,7 +42,6 @@ position: fixed; display: flex; flex-direction: column; - z-index: 31; bottom: 7%; right: 1.5%; width: 224px; diff --git a/styles/_InfoIconTooltip.scss b/styles/_InfoIconTooltip.scss index 818d1f78..dbc843b8 100644 --- a/styles/_InfoIconTooltip.scss +++ b/styles/_InfoIconTooltip.scss @@ -1,4 +1,5 @@ @use 'variables' as Colors; +@use 'zIndexes' as Indexes; .InfoIconTooltip { background: transparent; @@ -19,7 +20,7 @@ white-space: wrap; width: 225px; padding: 7px; - z-index: 100000; + z-index: Indexes.$Thirteen; line-height: 20px; margin-left: -5px; diff --git a/styles/_Modal.scss b/styles/_Modal.scss index a73cd6eb..f40a0d9f 100644 --- a/styles/_Modal.scss +++ b/styles/_Modal.scss @@ -1,4 +1,5 @@ @use 'variables' as Colors; +@use 'zIndexes' as Indexes; .modal-wrapper { position: fixed; @@ -6,7 +7,7 @@ left: 0; height: 100vh; width: 100vw; - z-index: 999999; + z-index: Indexes.$Fourteen; background: Colors.$Light_Grey; display: flex; align-items: center; diff --git a/styles/_PhoneModal.scss b/styles/_PhoneModal.scss index be50eb3f..a07b29f4 100644 --- a/styles/_PhoneModal.scss +++ b/styles/_PhoneModal.scss @@ -1,4 +1,5 @@ @use 'variables' as Colors; +@use 'zIndexes' as Indexes; .phone-modal { position: relative; @@ -11,7 +12,7 @@ align-items: center; justify-content: center; background: Colors.$White; - z-index: 99; + z-index: Indexes.$Seven; } &__body { diff --git a/styles/_SearchHeader.scss b/styles/_SearchHeader.scss index 6534402e..defa6c2b 100644 --- a/styles/_SearchHeader.scss +++ b/styles/_SearchHeader.scss @@ -1,11 +1,11 @@ @use 'variables' as Colors; - +@use 'zIndexes' as Indexes; .SearchHeader { width: 100%; height: 88px; left: 0; top: 0; - z-index: 9999; + z-index: Indexes.$Twelve; background: Colors.$White; box-shadow: 0 2px 4px Colors.$Grey; flex-direction: row; @@ -21,7 +21,7 @@ transition: all 300ms ease; border: 1px solid Colors.$Grey; border-radius: 9px; - z-index: 9999; + z-index: Indexes.$Twelve; order: 0; width: 539px; height: 53px; @@ -54,7 +54,7 @@ .SearchHeader_Logo { height: 30px; - z-index: 10; + z-index: Indexes.$Five; cursor: pointer; order: 2; } diff --git a/styles/_zIndexes.scss b/styles/_zIndexes.scss new file mode 100644 index 00000000..c6c40936 --- /dev/null +++ b/styles/_zIndexes.scss @@ -0,0 +1,21 @@ +/* +This file contains global variables for z-indexes, +meant to be used accross all styles. +*/ + +//Levels of Z-indexes +$One: 10; +$Two: 20; +$Three: 30; +$Four: 40; +$Five: 50; +$Six: 60; +$Seven: 70; +$Eight: 80; +$Nine: 90; +$Ten: 100; +$Eleven: 110; +$Twelve: 120; +$Thirteen: 130; +$Fourteen: 140; +$Fifteen: 150; diff --git a/styles/pages/_Down.scss b/styles/pages/_Down.scss index 7f07acdd..f3092293 100644 --- a/styles/pages/_Down.scss +++ b/styles/pages/_Down.scss @@ -1,4 +1,5 @@ @use '../variables' as Colors; +@use '../zIndexes' as Indexes; @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&display=swap'); /* Styles for Down Page. */ @@ -8,7 +9,7 @@ position: absolute; right: -260px; bottom: 0px; - z-index: 100; + z-index: Indexes.$Eight; } .huskyDollar { @@ -17,7 +18,7 @@ position: absolute; right: -90px; bottom: -150px; - z-index: 100; + z-index: Indexes.$Eight; } .down-text-container { diff --git a/styles/pages/_Error.scss b/styles/pages/_Error.scss index c7cd4c00..c8f680ae 100644 --- a/styles/pages/_Error.scss +++ b/styles/pages/_Error.scss @@ -1,4 +1,5 @@ @use '../variables' as Colors; +@use '../zIndexes' as Indexes; @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@700&display=swap'); /* Styles for ApiError Page. */ @@ -108,7 +109,7 @@ .crying-husky-2 { width: 400px; height: auto; - z-index: 102; + z-index: Indexes.$Ten; } @media only screen and (max-width: 1000px) { diff --git a/styles/pages/_Home.scss b/styles/pages/_Home.scss index f186eb67..4a90dbe1 100644 --- a/styles/pages/_Home.scss +++ b/styles/pages/_Home.scss @@ -4,6 +4,7 @@ */ @use '../variables' as Colors; +@use '../zIndexes' as Indexes; @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700'); .home-container { @@ -71,7 +72,7 @@ .logo { height: 60px; - z-index: 10; + z-index: Indexes.$Five; margin-bottom: 10px; @media only screen and (min-width: 830px) { @@ -87,7 +88,7 @@ position: absolute; right: -20px; bottom: -50px; - z-index: 102; + z-index: Indexes.$Ten; // there is definitely a better way to scale the width/position // but for now there is just a bunch of media queries @@ -118,7 +119,7 @@ bottom: 0; text-align: center; line-height: 0; - z-index: 8; + z-index: Indexes.$Four; pointer-events: none; } @@ -175,7 +176,7 @@ top: 0; border: 0; right: 0; - z-index: 101; + z-index: Indexes.$Nine; display: none; } @@ -184,7 +185,7 @@ top: 0; border: 0; left: 0; - z-index: 101; + z-index: Indexes.$Nine; margin-left: 15px; margin-top: 15px; width: 30px; @@ -263,7 +264,7 @@ /* Styles on tooltips that appear on desktop in the ClassPanel.js. Need to pass in the styles once, in Home.js, and not in every ClassPanel that appears. */ .listIconTooltip { font-size: 14px !important; - z-index: 999999; + z-index: Indexes.$Fourteen; padding-top: 6px !important; padding-bottom: 6px !important; padding-left: 10px !important; diff --git a/styles/pages/_Results.scss b/styles/pages/_Results.scss index bf116c4b..edfadefd 100644 --- a/styles/pages/_Results.scss +++ b/styles/pages/_Results.scss @@ -1,4 +1,5 @@ @use '../variables' as Colors; +@use '../zIndexes' as Indexes; $TOPNAV_HEIGHT: 60px; $SIDEBAR_WIDTH: 268px; @@ -8,7 +9,7 @@ $SIDEBAR_WIDTH: 268px; height: $TOPNAV_HEIGHT; left: 0; top: 0; - z-index: 9999; + z-index: Indexes.$Twelve; background: Colors.$White; flex-direction: row; display: flex; @@ -63,7 +64,7 @@ $SIDEBAR_WIDTH: 268px; .Results__Logo { height: 40px; - z-index: 10; + z-index: Indexes.$Five; cursor: pointer; margin-left: 17px; margin-right: 2px; @@ -104,7 +105,7 @@ $SIDEBAR_WIDTH: 268px; bottom: 0; overflow-y: scroll; scrollbar-width: none; - z-index: 21; + z-index: Indexes.$Six; &::-webkit-scrollbar { display: none; @@ -209,7 +210,7 @@ $SIDEBAR_WIDTH: 268px; } &__dropdown { - z-index: 999999; + z-index: Indexes.$Fourteen; position: absolute; background: Colors.$White; border-radius: 3px; diff --git a/styles/panels/_SplashPage.scss b/styles/panels/_SplashPage.scss index 5edea455..cc92e3cd 100644 --- a/styles/panels/_SplashPage.scss +++ b/styles/panels/_SplashPage.scss @@ -4,6 +4,7 @@ */ @use '../variables' as Colors; +@use '../zIndexes' as Indexes; #splash-page { margin: 0; @@ -78,7 +79,7 @@ .row-first { background: Colors.$Grey; - z-index: 105; + z-index: Indexes.$Eleven; position: relative; .text { @@ -114,7 +115,7 @@ #cs2510-desktop { width: 89%; - z-index: 2; + z-index: Indexes.$Two; position: relative; } } @@ -147,13 +148,13 @@ #engw1111-desktop { width: 67%; - z-index: 2; + z-index: Indexes.$Two; position: relative; } #lerner-mobile { position: absolute; - z-index: 3; + z-index: Indexes.$Three; } } @@ -272,7 +273,7 @@ #engw1111-desktop { margin-top: 0; width: 132%; - z-index: 2; + z-index: Indexes.$Two; position: relative; margin-left: 100px; } @@ -291,7 +292,7 @@ top: 0%; left: 12.8%; width: 35%; - z-index: 2; + z-index: Indexes.$Two; } #oodMobile2 { @@ -299,7 +300,7 @@ top: 17%; left: 3%; width: 35%; - z-index: 1; + z-index: Indexes.$One; } #cs2500Mobile { @@ -307,7 +308,7 @@ top: 0%; left: 60%; width: 35%; - z-index: 2; + z-index: Indexes.$Two; } #cs2500Resultsmobile { @@ -315,7 +316,7 @@ top: 17%; left: 50%; width: 35%; - z-index: 1; + z-index: Indexes.$One; } @media only screen and (max-width: 767px) { @@ -356,7 +357,7 @@ position: absolute; top: 5%; left: 30%; - z-index: 2; + z-index: Indexes.$Two; width: 65%; } @@ -364,7 +365,7 @@ position: absolute; left: 3%; width: 65%; - z-index: 1; + z-index: Indexes.$One; top: initial; bottom: 25px; }