Changed to a left-center-right aligned project tiles on main page

ibm-client-engineering · Jul 5, 2024 · c1d4a82 · c1d4a82
1 parent 9e7b60d
commit c1d4a82
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/src/app/home/RecentProjectsTiles.js b/src/app/home/RecentProjectsTiles.js
@@ -8,11 +8,13 @@ import {
   Column,
 } from "@carbon/react";
 
+const alignment = ['left', 'center', 'right'];
+
 const RecentProjectsTiles = ({ data }) => {
   return (
     <>
       {data.map((repo, index) => (
-        <Column lg={4} md={2} sm={1} key={index} className='centered-col'><ClickableTile id={repo.name} className="projectTile-home" key={index} href={repo.homepageUrl} target="_blank" rel="noopener noreferrer" renderIcon={Launch} style={{ height: '400px' }}>
+        <Column lg={4} md={2} sm={1} key={index} className='project-col' style={{justifyContent: alignment[index], alignItems: alignment[index]}}><ClickableTile id={repo.name} className="projectTile-home" key={index} href={repo.homepageUrl} target="_blank" rel="noopener noreferrer" renderIcon={Launch} style={{ height: '400px' }}>
           <RecentlyViewed size={32} />
           <h6 className="projectTile__title">{repo.title}</h6>
           <p3 className="projectTile__description">{repo.description}</p3>

diff --git a/src/app/home/_landing-page.scss b/src/app/home/_landing-page.scss
@@ -77,13 +77,11 @@
 
 .projectTile-home {
   height: 400px;
-  width: 95% !important;
+  width: 370px;
 }
 
-.centered-col {
+.project-col {
   display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .subheading-text {

diff --git a/src/app/home/page.js b/src/app/home/page.js
@@ -92,7 +92,7 @@ export default function LandingPage() {
           <br />
           <h4 className='subheading-text'>Highly valuable and most used projects</h4>
         </Column>
-        <Column lg={4} md={2} sm={1} className='centered-col'>
+        <Column lg={4} md={2} sm={1} className='project-col' style={{justifyContent: 'left', alignItems: 'left'}}>
           <ClickableTile className="projectTile-home" href={"https://ibm-client-engineering.github.io/solution-sfg-aws/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch}>
             <WatsonHealthEdgeEnhancement_01 size={34} />
             <h6 className="projectTile__title">Sterling File Gateway on AWS EKS</h6>
@@ -105,7 +105,7 @@ export default function LandingPage() {
             </Tag>
           </ClickableTile>
         </Column>
-        <Column lg={4} md={2} sm={1} className='centered-col'>
+        <Column lg={4} md={2} sm={1} className='project-col' style={{justifyContent: 'center', alignItems: 'center'}}>
           <ClickableTile className="projectTile-home" href={"https://ibm-client-engineering.github.io/solution-watsonx-assistant/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch}>
             <WatsonHealthEdgeEnhancement_02 size={34} />
             <h6 className="projectTile__title">Customer Care Virtual Agents</h6>
@@ -118,7 +118,7 @@ export default function LandingPage() {
             </Tag>
           </ClickableTile>
         </Column>
-        <Column lg={4} md={2} sm={1} className='centered-col'>
+        <Column lg={4} md={2} sm={1} className='project-col' style={{justifyContent: 'right', alignItems: 'right'}}>
           <ClickableTile className="projectTile-home" href={"https://ibm-client-engineering.github.io/solution-processmining/"} target="_blank" rel="noopener noreferrer" renderIcon={Launch}>
             <WatsonHealthEdgeEnhancement_03 size={34} />
             <h6 className="projectTile__title">Process Mining on Red Hat OpenShift</h6>