Home css Fixes (#852)

Condense homepage css, remove some padding and break lines so that footer is more easily seen on smaller screen sizes. Also fixes the footer wrapping bug
hpcc-systems · Sep 5, 2024 · 06c052f · 06c052f
1 parent c3e3271
commit 06c052f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/Tombolo/client-reactjs/src/components/application/home/home.css b/Tombolo/client-reactjs/src/components/application/home/home.css
@@ -2,27 +2,26 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  flex-wrap: wrap;
   width: 100%;
   height: calc(100% + 55px);
   text-align: center;
   font-size: 1.5rem;
-  min-height: 1300px;
 }
 
 .container ul {
   list-style: none;
   padding-left: 0;
+  margin-bottom: 0;
 }
 
 .container ul li {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .header {
   background: rgb(8, 85, 127);
   color: white;
-  padding: 6rem;
+  padding: 3rem;
   width: 100%;
   margin-bottom: 3rem;
 }

diff --git a/Tombolo/client-reactjs/src/components/application/home/index.js b/Tombolo/client-reactjs/src/components/application/home/index.js
@@ -25,9 +25,9 @@ const Home = () => {
         <div className="middle">
           <Card>
             <h2>Workflows</h2>
-            <br />
+
             <p>Get started with creating your own workflows and jobs to process data.</p>
-            <br />
+
             <ul>
               <li>
                 <Link to={`/${applicationId}/assets`}>Assets</Link>
@@ -42,9 +42,9 @@ const Home = () => {
           </Card>
           <Card>
             <h2>Monitoring</h2>
-            <br />
+
             <p>Set up monitoring and alerts for when things go awry with your data processing jobs and files.</p>
-            <br />
+
             <ul>
               <li>
                 <Link to={`/${applicationId}/fileMonitoring`}>File Monitoring</Link>
@@ -64,9 +64,9 @@ const Home = () => {
 
           <Card>
             <h2>Dashboards</h2>
-            <br />
+
             <p>Visualize all of the notifications produced by Tombolo, and cluster usage with dashboards.</p>
-            <br />
+
             <ul>
               <li>
                 <Link to={`/${applicationId}/dashboard/clusterUsage`}>Cluster Usage Dashboards</Link>