TSJR-169 columns layout

Author: kkartunov

src/apps/profiles/src/member-profile/skills/MemberSkillsInfo.module.scss

@@ -25,9 +25,10 @@
     }
 
     .skillsWrap {
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: $sp-1;
-        row-gap: $sp-2;
+        padding-bottom: $sp-8;
+
+        @include ltemd {
+            padding-bottom: $sp-4;
+        }
     }
 }

src/libs/shared/lib/components/collapsible-skills-list/index.ts

@@ -2,4 +2,13 @@
 
 .skillsCategories {
     flex: 1;
+    columns: 3 auto;
+
+    @include xl {
+        columns: 2 auto;
+    }
+
+    @include ltelg {
+        columns: 1 auto;
+    }
 }

src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.module.scss

@@ -1,45 +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[] }
 }
 const GroupedSkillsUI: FC<GroupedSkillsUIProps> = (props: GroupedSkillsUIProps) => (
-    <ResponsiveMasonry
+    <div
         className={styles.skillsCategories}
-        columnsCountBreakPoints={{ 350: 1, 750: 2, 1368: 3 }}
     >
-        <Masonry>
-            {
-                Object.keys(props.groupedSkillsByCategory)
-                    .map((categoryName: string) => (
+        {
+            Object.keys(props.groupedSkillsByCategory)
+                .map((categoryName: string) => (
 
-                        <CollapsibleSkillsList
-                            key={categoryName}
-                            header={categoryName}
-                        >
-                            {
-                                props.groupedSkillsByCategory[categoryName]
-                                    .map((skill: UserSkill) => (
-                                        <SkillPill
-                                            skill={skill}
-                                            key={skill.id}
-                                            theme='catList'
-                                        />
-                                    ))
-                            }
-                        </CollapsibleSkillsList>
-                    ))
-            }
-        </Masonry>
-    </ResponsiveMasonry>
+                    <SkillsList
+                        key={categoryName}
+                        header={categoryName}
+                    >
+                        {
+                            props.groupedSkillsByCategory[categoryName]
+                                .map((skill: UserSkill) => (
+                                    <SkillPill
+                                        skill={skill}
+                                        key={skill.id}
+                                        theme='catList'
+                                    />
+                                ))
+                        }
+                    </SkillsList>
+                ))
+        }
+    </div>
 )
 
 export default GroupedSkillsUI

src/libs/shared/lib/components/grouped-skills-ui/GroupedSkillsUI.tsx

@@ -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'

src/libs/shared/lib/components/index.ts

@@ -45,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;
         }
     }
 }

src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.module.scss renamed to src/libs/shared/lib/components/skills-list/SkillsList.module.scss

@@ -1,17 +1,17 @@
 import { FC, ReactNode } from 'react'
 import classNames from 'classnames'
 
-import styles from './CollapsibleSkillsList.module.scss'
+import styles from './SkillsList.module.scss'
 
-interface CollapsibleSkillsListProps {
+interface SkillsListProps {
     children?: ReactNode[]
     header?: ReactNode
     containerClass?: string
     headerClass?: string
     contentClass?: string
 }
 
-const CollapsibleSkillsList: FC<CollapsibleSkillsListProps> = (props: CollapsibleSkillsListProps) => (
+const SkillsList: FC<SkillsListProps> = (props: SkillsListProps) => (
     <div className={classNames(styles.container, props.containerClass)}>
         <div className={classNames(styles.header, props.headerClass)}>
             <div className={styles.title}>{props.header}</div>
@@ -26,4 +26,4 @@ const CollapsibleSkillsList: FC<CollapsibleSkillsListProps> = (props: Collapsibl
     </div>
 )
 
-export default CollapsibleSkillsList
+export default SkillsList

src/libs/shared/lib/components/collapsible-skills-list/CollapsibleSkillsList.tsx renamed to src/libs/shared/lib/components/skills-list/SkillsList.tsx

@@ -0,0 +1 @@
+export { default as SkillsList } from './SkillsList'