From 577dba5def17032b4723672b09f8bbdcd11d71b2 Mon Sep 17 00:00:00 2001 From: Nithika Dias Date: Wed, 5 Feb 2025 16:13:08 +0530 Subject: [PATCH 1/4] Improve Language Selector dropdowns --- src/components/LanguageSelector.tsx | 72 +++++++++++++------------- src/components/SubLanguageSelector.tsx | 35 ++++++------- src/styles/main.css | 31 +++++++++-- 3 files changed, 79 insertions(+), 59 deletions(-) diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index c7c1ecfd..e057a251 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -186,43 +186,41 @@ const LanguageSelector = () => { - {isOpen && ( - - )} + ); }; diff --git a/src/components/SubLanguageSelector.tsx b/src/components/SubLanguageSelector.tsx index 7b0d271c..3735a926 100644 --- a/src/components/SubLanguageSelector.tsx +++ b/src/components/SubLanguageSelector.tsx @@ -78,24 +78,23 @@ const SubLanguageSelector = ({ - {opened && - parentLanguage.subLanguages.map((sl) => ( -
  • - -
    • - ))} + {parentLanguage.subLanguages.map((sl) => ( +
  • + +
    • + ))} ); }; diff --git a/src/styles/main.css b/src/styles/main.css index 843f8a88..3bd37b28 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -400,7 +400,7 @@ abbr { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--clr-text-primary); /* [1] */ - transition: transform 100ms ease; + transition: transform 300ms ease; } .selector--open .selector__arrow { @@ -413,7 +413,7 @@ abbr { position: absolute; width: 100%; - max-height: 20rem; + height: 20rem; overflow-y: auto; background-color: var(--clr-bg-secondary); @@ -426,10 +426,15 @@ abbr { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); z-index: 1; + transition: all 300ms ease; } -.selector__dropdown:focus-within { - border-color: var(--clr-accent); +.selector__dropdown.hidden { + border: none; + padding: 0; + height: 0; + opacity: 0; + overflow: hidden; } .selector__item { @@ -439,10 +444,19 @@ abbr { gap: 1rem; align-items: center; border-radius: var(--br-md); + transition: all 300ms ease; } .sublanguage__item { + height: 3rem; margin-left: 1.5rem; + transition: all 300ms ease; +} + +.sublanguage__item.hidden { + height: 0; + opacity: 0; + overflow: hidden; } .sublanguage__button{ @@ -462,6 +476,11 @@ abbr { transform: rotate(-90deg); transition: transform 100ms ease; cursor: pointer; + transition: all 200ms ease; +} + +.sublanguage__arrow:hover { + border-top-color: var(--clr-accent); } [aria-expanded="true"] .sublanguage__arrow { @@ -472,6 +491,10 @@ abbr { border-top-color: var(--clr-text-tertiary); } +.selector__item.selected .sublanguage__arrow:hover { + border-top-color: var(--clr-text-primary); +} + .selector__item label { width: 100%; padding: 0.25em 0.75em; From 9a892b432132452986a2ecfc142b96fa8cd80cdd Mon Sep 17 00:00:00 2001 From: Nithika Dias Date: Thu, 6 Feb 2025 11:44:25 +0530 Subject: [PATCH 2/4] Fixed keyboard navigation bug --- src/components/LanguageSelector.tsx | 12 ++++++------ src/components/SubLanguageSelector.tsx | 5 +++-- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index e057a251..ade97987 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -152,10 +152,10 @@ const LanguageSelector = () => { useEffect(() => { if (isOpen && focusedIndex >= 0) { - const element = document.querySelector( - `.selector__item:nth-child(${focusedIndex + 1})` - ) as HTMLElement; - element?.focus(); + const elements = Array.from(document.querySelectorAll('.selector__item')) as HTMLElement[]; + const focusableElements = elements.filter(el => el.getAttribute('tabIndex') !== '-1'); + const element = focusableElements[focusedIndex]; + element?.focus(); } }, [isOpen, focusedIndex]); @@ -190,7 +190,7 @@ const LanguageSelector = () => { className={`selector__dropdown ${isOpen ? "" : " hidden"}`} role="listbox" onKeyDown={handleKeyDown} - tabIndex={-1} + tabIndex={0} > {fetchedLanguages.map((lang, index) => lang.subLanguages.length > 0 ? ( @@ -206,7 +206,7 @@ const LanguageSelector = () => {
  • handleSelect(lang)} className={`selector__item ${ language.name === lang.name ? "selected" : "" diff --git a/src/components/SubLanguageSelector.tsx b/src/components/SubLanguageSelector.tsx index 3735a926..db104afc 100644 --- a/src/components/SubLanguageSelector.tsx +++ b/src/components/SubLanguageSelector.tsx @@ -47,7 +47,7 @@ const SubLanguageSelector = ({ <>
  • Date: Thu, 6 Feb 2025 11:46:39 +0530 Subject: [PATCH 3/4] Prettier change --- src/components/LanguageSelector.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx index ade97987..b43d3916 100644 --- a/src/components/LanguageSelector.tsx +++ b/src/components/LanguageSelector.tsx @@ -152,10 +152,14 @@ const LanguageSelector = () => { useEffect(() => { if (isOpen && focusedIndex >= 0) { - const elements = Array.from(document.querySelectorAll('.selector__item')) as HTMLElement[]; - const focusableElements = elements.filter(el => el.getAttribute('tabIndex') !== '-1'); + const elements = Array.from( + document.querySelectorAll(".selector__item") + ) as HTMLElement[]; + const focusableElements = elements.filter( + (el) => el.getAttribute("tabIndex") !== "-1" + ); const element = focusableElements[focusedIndex]; - element?.focus(); + element?.focus(); } }, [isOpen, focusedIndex]); From 26c60914163aeb570dc952bc8b1caeb8c54cde35 Mon Sep 17 00:00:00 2001 From: Nithika Dias Date: Thu, 6 Feb 2025 15:14:18 +0530 Subject: [PATCH 4/4] Changed dropdown height to be more responsive and used same scrollbar as other components --- src/styles/main.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/styles/main.css b/src/styles/main.css index 3bd37b28..42636d1e 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -413,7 +413,7 @@ abbr { position: absolute; width: 100%; - height: 20rem; + height: 50vh; overflow-y: auto; background-color: var(--clr-bg-secondary); @@ -437,6 +437,19 @@ abbr { overflow: hidden; } +.selector__dropdown::-webkit-scrollbar { + width: 8px; +} + +.selector__dropdown::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: 4px; +} + +.selector__dropdown::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb); +} + .selector__item { position: relative; cursor: pointer;