Task 217 centralize lists (#392)

odigos-io · Aug 10, 2023 · b97342e · b97342e
1 parent ed874b3
commit b97342e
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 9 deletions.
diff --git a/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/overview/destination/destination.list/destination.list.styled.tsx
@@ -1,11 +1,23 @@
 import { styled } from "styled-components";
 
 export const ManagedListWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
   gap: 24px;
   padding: 0px 36px;
   padding-bottom: 50px;
+  grid-template-columns: repeat(4, 1fr);
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  @media screen and (max-width: 1850px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 1450px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `;
 
 export const MenuWrapper = styled.div`

diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.styled.tsx
@@ -10,14 +10,21 @@ export const DestinationTypeTitleWrapper = styled.div`
 
 export const DestinationListWrapper = styled.div`
   width: 100%;
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
   gap: 24px;
   ::-webkit-scrollbar {
     display: none;
   }
   -ms-overflow-style: none;
   scrollbar-width: none;
+
+  @media screen and (max-width: 1500px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 1150px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `;
 
 export const EmptyListWrapper = styled.div`

diff --git a/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx b/frontend/webapp/components/setup/destination/destination.list/destination.list.tsx
@@ -6,6 +6,7 @@ import {
   DestinationTypeTitleWrapper,
 } from "./destination.list.styled";
 import { capitalizeFirstLetter } from "@/utils/functions";
+import { ROUTES } from "@/utils/constants";
 
 export function DestinationList({
   data: { items, name },

diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.styled.tsx
@@ -17,15 +17,32 @@ export const SourcesTitleWrapper = styled.div`
   margin: 24px 0;
 `;
 
-export const SourcesListWrapper = styled.div`
+export const SourcesListWrapper = styled.div<{ repeat: number }>`
   width: 100%;
   height: 400px;
   padding-bottom: 300px;
-  display: flex;
-  flex-wrap: wrap;
   gap: 24px;
   overflow-y: scroll;
   scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  display: grid;
+  grid-template-columns: ${({ repeat }) => `repeat(${repeat},1fr)`};
+
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  @media screen and (max-width: 1750px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @media screen and (max-width: 1500px) {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  @media screen and (max-width: 1150px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 `;
 
 export const EmptyListWrapper = styled.div`

diff --git a/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx b/frontend/webapp/components/setup/sources/sources.list/sources.list.tsx
@@ -7,7 +7,7 @@ import {
 } from "./sources.list.styled";
 import { SourceCard } from "../source.card/source.card";
 import { KeyvalLink, KeyvalText } from "@/design.system";
-import { SETUP } from "@/utils/constants";
+import { ROUTES, SETUP } from "@/utils/constants";
 import Empty from "@/assets/images/empty-list.svg";
 
 export function SourcesList({
@@ -37,13 +37,16 @@ export function SourcesList({
 
   const isListEmpty = () => data?.length === 0;
 
+  const getNumberOfItemsRepeated = () =>
+    window.location.pathname.includes(ROUTES.CREATE_SOURCE) ? 5 : 4;
+
   return !data ? null : (
     <SourcesListContainer>
       <SourcesTitleWrapper>
         <KeyvalText>{`${data?.length} ${SETUP.APPLICATIONS}`}</KeyvalText>
         <KeyvalLink onClick={onClearClick} value={SETUP.CLEAR_SELECTION} />
       </SourcesTitleWrapper>
-      <SourcesListWrapper>
+      <SourcesListWrapper repeat={getNumberOfItemsRepeated()}>
         {isListEmpty() ? (
           <EmptyListWrapper>
             <Empty />