fix: adjustments for different window sizes

Author: parthivrh

packages/react-core/src/demos/Animations/AnimationsOverview.tsx

@@ -94,7 +94,7 @@ export const AnimationsOverview: FunctionComponent<AnimationsOverviewProps> = ({
     // Card 4: Image
     <Card isFullHeight isPlain key="card-4">
       <CardBody>
-        <img src={openshiftLogo} alt="OpenShift Logo" />
+        <img src={openshiftLogo} alt="OpenShift Logo" style={{ width: '200px', height: '200px' }} />
       </CardBody>
     </Card>
   ];
@@ -114,7 +114,7 @@ export const AnimationsOverview: FunctionComponent<AnimationsOverviewProps> = ({
       )}
       <PageSection aria-label="Detail status events">
         <Grid hasGutter>
-          <GridItem span={3} rowSpan={4}>
+          <GridItem span={12} sm={12} md={6} lg={4} xl={3} rowSpan={4}>
             <Card isFullHeight>
               <CardTitle>
                 <Title headingLevel="h4" size="xl">
@@ -153,20 +153,20 @@ export const AnimationsOverview: FunctionComponent<AnimationsOverviewProps> = ({
               </CardFooter>
             </Card>
           </GridItem>
-          <GridItem span={3} rowSpan={2}>
+          <GridItem span={12} sm={12} md={6} lg={4} xl={3} rowSpan={2}>
             <AnimationsOverviewClusterInventory />
           </GridItem>
-          <GridItem span={2} rowSpan={2}>
+          <GridItem span={12} sm={12} md={6} lg={4} xl={2} rowSpan={2}>
             <AnimationsOverviewStorage />
           </GridItem>
-          <GridItem span={4} rowSpan={2}>
+          <GridItem span={12} sm={12} md={12} lg={12} xl={4} rowSpan={2}>
             <AnimationsOverviewMemoryUtilization />
           </GridItem>
-          <GridItem span={4} rowSpan={2}>
+          <GridItem span={12} sm={12} md={12} lg={12} xl={4} rowSpan={2}>
             <AnimationsOverviewNetworkActivity />
           </GridItem>
           {recentActivityCard && (
-            <GridItem span={5} rowSpan={2}>
+            <GridItem span={12} sm={12} md={12} lg={8} xl={5} rowSpan={2}>
               {recentActivityCard}
             </GridItem>
           )}

packages/react-core/src/demos/Animations/AnimationsOverviewMemoryUtilization.tsx

@@ -77,15 +77,15 @@ export const MemoryUtilizationCard: React.FunctionComponent = () => {
                 { x: 'Warning at 60%', y: 60 },
                 { x: 'Danger at 90%', y: 90 }
               ]}
-              height={150}
+              height={200}
               labels={({ datum }) => (datum.x ? datum.x : null)}
               padding={{
                 bottom: 0,
                 left: 0,
                 right: 0,
                 top: 10
               }}
-              width={150}
+              width={200}
             >
               <ChartDonutUtilization
                 data={{ x: 'Memory capacity', y: 95 }}
@@ -105,15 +105,15 @@ export const MemoryUtilizationCard: React.FunctionComponent = () => {
                 { x: 'Warning at 60%', y: 60 },
                 { x: 'Danger at 90%', y: 90 }
               ]}
-              height={150}
+              height={200}
               labels={({ datum }) => (datum.x ? datum.x : null)}
               padding={{
                 bottom: 0,
                 left: 0,
                 right: 0,
                 top: 10
               }}
-              width={150}
+              width={200}
             >
               <ChartDonutUtilization
                 data={{ x: 'GPU capacity', y: 55 }}

packages/react-core/src/demos/Animations/examples/Animations.tsx

@@ -710,109 +710,6 @@ const AnimationsPage: FunctionComponent = () => {
 };
 
 // Can't break this into a separate file, seems we need to stay in the examples dir when using '@patternfly/react-table'
-// const AnimationsResourcesTable: FunctionComponent = () => {
-//   const [areAllExpanded, setAreAllExpanded] = useState(false);
-//   const [collapseAllAriaLabel, setCollapseAllAriaLabel] = useState('Expand all');
-//   const [expandedAppNames, setExpandedAppNames] = useState(initialExpandedServerNames);
-//   const [loading, setLoading] = useState(true);
-//   const { tourStep, renderTourStepElement } = useGuidedTour();
-
-//   useEffect(() => {
-//     const timer = setTimeout(() => setLoading(false), 2000);
-
-//     return () => {
-//       if (timer) {
-//         clearTimeout(timer);
-//       }
-//     };
-//   }, [loading, tourStep?.stepId]);
-
-//   useEffect(() => {
-//     const allExpanded = expandedAppNames.length === applicationsData.length;
-//     setAreAllExpanded(allExpanded);
-//     setCollapseAllAriaLabel(allExpanded ? 'Collapse all' : 'Expand all');
-//   }, [expandedAppNames]);
-
-//   const setAppExpanded = (app: Application, isExpanding: boolean) => {
-//     const others = expandedAppNames.filter((n) => n !== app.name);
-//     setExpandedAppNames(isExpanding ? [...others, app.name] : others);
-//   };
-
-//   const isAppExpanded = (app: Application) => expandedAppNames.includes(app.name);
-
-//   const onCollapseAll = (_event: any, _rowIndex: number, isOpen: boolean) => {
-//     setExpandedAppNames(isOpen ? applicationsData.map((app) => app.name) : []);
-//   };
-
-//   return (
-//     <Card component="div">
-//       {loading || tourStep?.stepId === 'skeletonLoader' ? (
-//         <>
-//           {renderTourStepElement(
-//             'skeletonLoader',
-//             <SkeletonTable id="skeleton-table" columns={['', ...expandableColumns]} rows={8} />
-//           )}
-//         </>
-//       ) : (
-//         <Table aria-label="Collapsible table" isExpandable hasAnimations>
-//           <Thead>
-//             {renderTourStepElement(
-//               'expandableComponents',
-//               <div content=" " style={{ width: 10, height: 10, position: 'absolute', left: 40, top: 20 }} />
-//             )}
-//             <Tr>
-//               <Th
-//                 expand={{
-//                   areAllExpanded: !areAllExpanded,
-//                   collapseAllAriaLabel,
-//                   onToggle: onCollapseAll
-//                 }}
-//                 aria-label="Row expansion"
-//               />
-//               {expandableColumns.map((column) => (
-//                 <Th key={column}>{column}</Th>
-//               ))}
-//             </Tr>
-//           </Thead>
-
-//           {applicationsData.map((app, idx) => (
-//             <Tbody key={app.name} isExpanded={isAppExpanded(app)}>
-//               <Tr isExpanded={isAppExpanded(app)}>
-//                 <Td
-//                   expand={
-//                     app.details
-//                       ? {
-//                           rowIndex: idx,
-//                           isExpanded: isAppExpanded(app),
-//                           onToggle: () => setAppExpanded(app, !isAppExpanded(app))
-//                         }
-//                       : undefined
-//                   }
-//                 />
-//                 <Td>{app.name}</Td>
-//                 <Td>{app.header}</Td>
-//                 <Td>{app.branch}</Td>
-//                 <Td>
-//                   {app.status === 'Running' && <Label status="success">Running</Label>}
-//                   {app.status === 'Degraded' && <Label status="warning">Degraded</Label>}
-//                   {app.status === 'Stopped' && <Label status="danger">Stopped</Label>}
-//                   {app.status !== 'Running' && app.status !== 'Degraded' && app.status !== 'Stopped' && app.status}
-//                 </Td>
-//               </Tr>
-//               <Tr isExpandable isExpanded={isAppExpanded(app)}>
-//                 <Td />
-//                 <Td colSpan={expandableColumns.length}>
-//                   <ExpandableRowContent>{app.details}</ExpandableRowContent>
-//                 </Td>
-//               </Tr>
-//             </Tbody>
-//           ))}
-//         </Table>
-//       )}
-//     </Card>
-//   );
-// };
-
 const AnimationsResourcesTable: FunctionComponent = () => {
   const [expandedAppNames, setExpandedAppNames] = useState(initialExpandedServerNames);
   const [loading, setLoading] = useState(true);