diff --git a/package.json b/package.json index 32742bd9b..2ef92fbc4 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,6 @@ "react-redux": "^8.0.4", "react-redux-toastr": "^7.6.10", "react-responsive": "^9.0.0-beta.5", - "react-responsive-masonry": "^2.1.7", "react-responsive-modal": "^6.2.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", @@ -160,7 +159,6 @@ "@types/react-gtm-module": "^2.0.1", "@types/react-helmet": "^6.1.6", "@types/react-redux-toastr": "^7.6.2", - "@types/react-responsive-masonry": "^2.1.1", "@types/react-router-dom": "^5.3.3", "@types/redux-actions": "2.6.2", "@types/redux-logger": "^3.0.9", diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss index 32162ff66..f07d5098f 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss +++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss @@ -22,30 +22,13 @@ justify-content: space-between; align-items: center; margin-bottom: $sp-6; - - .skillActions { - display: flex; - align-items: center; - - @include ltemd { - flex-direction: column; - align-items: flex-end; - } - - > button:nth-child(2) { - margin-left: $sp-4; - - @include ltemd { - margin-left: 0; - } - } - } } .skillsWrap { - display: flex; - flex-wrap: wrap; - column-gap: $sp-1; - row-gap: $sp-2; + padding-bottom: $sp-8; + + @include ltemd { + padding-bottom: $sp-4; + } } } diff --git a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx index 10bd07516..622574f0d 100644 --- a/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx +++ b/src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.tsx @@ -35,6 +35,7 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp const groupedSkillsByCategory: { [key: string]: UserSkill[] } = useMemo(() => { const grouped: { [key: string]: UserSkill[] } = {} + const sortedGroupedSkillsByCategory: { [key: string]: UserSkill[] } = {} memberSkills.forEach((skill: UserSkill) => { if (grouped[skill.category.name]) { @@ -44,11 +45,14 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp } }) - return grouped - }, [memberSkills]) + Object.keys(grouped) + .sort() + .forEach(key => { + sortedGroupedSkillsByCategory[key] = grouped[key] + }) - const [skillsCatsCollapsed, setSkillsCatsCollapsed]: [boolean, Dispatch>] - = useState(true) + return sortedGroupedSkillsByCategory + }, [memberSkills]) const [isEditMode, setIsEditMode]: [boolean, Dispatch>] = useState(false) @@ -87,10 +91,6 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp setHowSkillsWorkVisible(false) } - function handleExpandAllClick(): void { - setSkillsCatsCollapsed(!skillsCatsCollapsed) - } - return (
{ @@ -119,16 +119,6 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp onClick={handleHowSkillsWorkClick} variant='linkblue' /> - { - memberSkills.length > 0 && ( -
@@ -136,7 +126,6 @@ const MemberSkillsInfo: FC = (props: MemberSkillsInfoProp {memberSkills.length > 0 && ( )} {!memberSkills.length && ( diff --git a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx b/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx deleted file mode 100644 index e51149905..000000000 --- a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Dispatch, FC, ReactNode, SetStateAction, useEffect, useState } from 'react' -import classNames from 'classnames' - -import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/outline' -import { Button } from '~/libs/ui' - -import styles from './CollapsibleSkillsList.module.scss' - -interface CollapsibleSkillsListProps { - children?: ReactNode[] - header?: ReactNode - containerClass?: string - headerClass?: string - contentClass?: string - isCollapsed: boolean -} - -const CollapsibleSkillsList: FC = (props: CollapsibleSkillsListProps) => { - const [isCollapsed, setIsCollapsed]: [boolean, Dispatch>] - = useState(props.isCollapsed) - - useEffect(() => { - setIsCollapsed(props.isCollapsed) - }, [props.isCollapsed]) - - function toggleCollapse(): void { - setIsCollapsed(!isCollapsed) - } - - return ( -
-
- { - !isCollapsed - ?
- -
- {props.children} -
-
- ) -} - -export default CollapsibleSkillsList diff --git a/src/libs/shared/lib/components/collapsible-skills-list/index.ts b/src/libs/shared/lib/components/collapsible-skills-list/index.ts deleted file mode 100644 index 8e5ba427d..000000000 --- a/src/libs/shared/lib/components/collapsible-skills-list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as CollapsibleSkillsList } from './CollapsibleSkillsList' diff --git a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.module.scss b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.module.scss index ccf913e1b..dbb5d26c3 100644 --- a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.module.scss +++ b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.module.scss @@ -2,4 +2,13 @@ .skillsCategories { flex: 1; + columns: 3 auto; + + @include xl { + columns: 2 auto; + } + + @include ltelg { + columns: 1 auto; + } } \ No newline at end of file diff --git a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx index e9a6d87bf..39b2a07bb 100644 --- a/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx +++ b/src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx @@ -1,47 +1,41 @@ import { FC } from 'react' -import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry' import { UserSkill } from '~/libs/core' import { SkillPill } from '~/libs/shared' -import { CollapsibleSkillsList } from '../collapsible-skills-list' +import { SkillsList } from '../skills-list' import styles from './GroupedSkillsUI.module.scss' interface GroupedSkillsUIProps { groupedSkillsByCategory: { [key: string]: UserSkill[] } - skillsCatsCollapsed: boolean } const GroupedSkillsUI: FC = (props: GroupedSkillsUIProps) => ( - - - { - Object.keys(props.groupedSkillsByCategory) - .map((categoryName: string) => ( + { + Object.keys(props.groupedSkillsByCategory) + .map((categoryName: string) => ( - - { - props.groupedSkillsByCategory[categoryName] - .map((skill: UserSkill) => ( - - )) - } - - )) - } - - + + { + props.groupedSkillsByCategory[categoryName] + .map((skill: UserSkill) => ( + + )) + } + + )) + } + ) export default GroupedSkillsUI diff --git a/src/libs/shared/lib/components/index.ts b/src/libs/shared/lib/components/index.ts index 016d36443..ac827849a 100644 --- a/src/libs/shared/lib/components/index.ts +++ b/src/libs/shared/lib/components/index.ts @@ -6,4 +6,4 @@ export * from './member-skill-editor' export * from './skill-pill' export * from './expandable-list' export * from './grouped-skills-ui' -export * from './collapsible-skills-list' +export * from './skills-list' diff --git a/src/libs/shared/lib/components/skill-pill/SkillPill.tsx b/src/libs/shared/lib/components/skill-pill/SkillPill.tsx index 725b06373..2800850f9 100644 --- a/src/libs/shared/lib/components/skill-pill/SkillPill.tsx +++ b/src/libs/shared/lib/components/skill-pill/SkillPill.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames' import { IconOutline } from '~/libs/ui' import { UserSkill } from '~/libs/core' -import { isSkillVerified } from '../../services' +import { isSkillVerified } from '../../services/standard-skills' import styles from './SkillPill.module.scss' diff --git a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss b/src/libs/shared/lib/components/skills-list/SkillsList.module.scss similarity index 75% rename from src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss rename to src/libs/shared/lib/components/skills-list/SkillsList.module.scss index b5bacf1c0..251cafd2e 100644 --- a/src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss +++ b/src/libs/shared/lib/components/skills-list/SkillsList.module.scss @@ -25,25 +25,12 @@ display: flex; justify-content: flex-start; align-items: flex-start; - cursor: pointer; .title { font-weight: 700; font-size: 14px; } - .btn { - padding-left: 0; - padding-right: $sp-2; - color: $turq-120; - - svg { - flex: 0 0 auto; - color: $turq-120; - @include icon-size(16); - } - } - .badgeCount { background-color: $black-10; border-radius: 50%; @@ -58,11 +45,11 @@ transition: opacity 0.3s ease-in-out; max-height: auto; opacity: 1; - padding-left: $sp-8; + padding-left: $sp-4; margin-top: $sp-1; @include ltemd { - padding-left: $sp-4; + padding-left: $sp-2; } } } \ No newline at end of file diff --git a/src/libs/shared/lib/components/skills-list/SkillsList.tsx b/src/libs/shared/lib/components/skills-list/SkillsList.tsx new file mode 100644 index 000000000..2a2f13971 --- /dev/null +++ b/src/libs/shared/lib/components/skills-list/SkillsList.tsx @@ -0,0 +1,29 @@ +import { FC, ReactNode } from 'react' +import classNames from 'classnames' + +import styles from './SkillsList.module.scss' + +interface SkillsListProps { + children?: ReactNode[] + header?: ReactNode + containerClass?: string + headerClass?: string + contentClass?: string +} + +const SkillsList: FC = (props: SkillsListProps) => ( +
+
+
{props.header}
+
+ {props.children && props.children.length} +
+
+ +
+ {props.children} +
+
+) + +export default SkillsList diff --git a/src/libs/shared/lib/components/skills-list/index.ts b/src/libs/shared/lib/components/skills-list/index.ts new file mode 100644 index 000000000..ee1dfc41d --- /dev/null +++ b/src/libs/shared/lib/components/skills-list/index.ts @@ -0,0 +1 @@ +export { default as SkillsList } from './SkillsList' diff --git a/yarn.lock b/yarn.lock index 6a6a6f881..8954e2c9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5402,13 +5402,6 @@ "@types/react" "*" redux "^3.6.0 || ^4.0.0" -"@types/react-responsive-masonry@^2.1.1": - version "2.1.1" - resolved "https://registry.yarnpkg.com/@types/react-responsive-masonry/-/react-responsive-masonry-2.1.1.tgz#694fc86964f37b991c3b85ac99a253a04ecb8f6b" - integrity sha512-sFzNsxYugWO8G4d3ObhpcJCiqiYthWp9Udr9phDzy5BYxW78uMF8yK2IJ8+7bQLbmQz2xaIey1ZogbW3ATIo+A== - dependencies: - "@types/react" "*" - "@types/react-router-dom@^5.3.3": version "5.3.3" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83" @@ -16335,11 +16328,6 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== -react-responsive-masonry@^2.1.7: - version "2.1.7" - resolved "https://registry.yarnpkg.com/react-responsive-masonry/-/react-responsive-masonry-2.1.7.tgz#9b4a8d63b296a6265bea720c9d7da89754548346" - integrity sha512-/jOqnTVNtO8zRJMTl6ZXBex7EFYEIFBLVlkIFjiCT7omfm0CgNF2z4ST8RIr0v2ut15NWAQs7Q3kJJPhMoe3Ew== - react-responsive-modal@^6.2.0: version "6.2.0" resolved "https://registry.yarnpkg.com/react-responsive-modal/-/react-responsive-modal-6.2.0.tgz#339226b911d8ffaba4e0afce83387a65221b8e29"