Fixed overflow and alignment issues on homepage (#970)

Signed-off-by: eeshaanSA <eeshaans1@gmail.com>
apache · May 21, 2023 · 0bdb7fe · 0bdb7fe
1 parent a1fa074
commit 0bdb7fe
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 17 deletions.
diff --git a/home/i18n/en/code.json b/home/i18n/en/code.json
@@ -268,8 +268,8 @@
   "slogan": {
     "message": "Open Source Real-time Monitoring Tool"
   },
-  "Who Use HertzBeat?": {
-    "message": "Who Use HertzBeat?"
+  "Who uses HertzBeat?": {
+    "message": "Who uses HertzBeat?"
   },
   "Dromara Friends": {
     "message": "Dromara Friends"

diff --git a/home/src/pages/components/DiaLog.js b/home/src/pages/components/DiaLog.js
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Modal, Button } from '@douyinfe/semi-ui';
-import Translate from '@docusaurus/Translate'
+import Translate from '@docusaurus/Translate';
+import styles from './DiaLog.module.css';
 
 // from rainbond: https://github.com/goodrain/rainbond-docs/blob/main/src/components/DiaLog/index.tsx
 export default function DiaLog() {
@@ -22,7 +23,7 @@ export default function DiaLog() {
       <>
         <Modal
           title={
-            <p style={{ fontSize: "22px" }}><Translate>support hertzbeat</Translate></p>
+            <p style={{ fontSize: "22px" }}><Translate>Support HertzBeat</Translate></p>
           }
           visible={Visible}
           // onOk={handleOk}
@@ -35,18 +36,18 @@ export default function DiaLog() {
             <img src="/img/tancloud-logo.svg" alt="logo" />
           }
           footer={
-            <div>
-              <p style={{paddingRight: "20px"}}>
+            <div className={styles.goToGithubWrapper}>
+              <p >
                 👇  <b style={{ color: "#26B226"}}><Translate>click</Translate></b>
               </p>
               <a href="https://github.com/dromara/hertzbeat" target="_blank">
                 <Button type="primary" theme="solid">
-                  <Translate>go github</Translate>
+                  <Translate>Go to Github</Translate>
                 </Button>
               </a>
             </div>
           }>
-          <p style={{lineHeight: 1.5}}>
+          <p style={{lineHeight: 1.5, textAlign: "center"}}>
             <Translate>If you like HertzBeat, give us a star on GitHub</Translate>
           </p>
           <p style={{lineHeight: 1.5}}>

diff --git a/home/src/pages/components/DiaLog.module.css b/home/src/pages/components/DiaLog.module.css
@@ -0,0 +1,7 @@
+.goToGithubWrapper{
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/home/src/pages/components/LogoCarousel.js b/home/src/pages/components/LogoCarousel.js
@@ -12,7 +12,7 @@ const iconCommonUrl = '/img/icons/'
 var settings = {
     dots: false,
     infinite: true,
-    speed: 800,
+    speed: 1200,
     slidesToShow: 6,
     slidesToScroll: 1,
     autoplay: true,

diff --git a/home/src/pages/components/LogoCarousel.module.css b/home/src/pages/components/LogoCarousel.module.css
@@ -15,7 +15,7 @@ body .companyUsage h3 {
 .logos ul {
     display: flex;
     justify-content: space-around;
-    /*width: 3200px;*/
+    /* width: 3200px; */
     margin: 0;
     transition: transform 1000ms ease;
 }
@@ -26,7 +26,7 @@ body .companyUsage h3 {
     }
     .logos ul {
         padding: 0;
-        width: 3000px;
+        /* width: 3000px; */
     }
     .logos ul li {
         min-width: 125px;

diff --git a/home/src/pages/components/Sponsor.module.css b/home/src/pages/components/Sponsor.module.css
@@ -1,13 +1,14 @@
 .cardList {
     margin: -0.35rem;
     display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
+    justify-content: center;
+    /* flex-wrap: wrap; */
+    /* align-items: flex-start; */
     width: 100%;
 }
 
 .cardItem {
-    width: calc(33.33333% - .7rem);
+    /* width: calc(33.33333% - .7rem); */
     margin: 0.35rem;
     background: var(--bodyBg);
     border-radius: 3px;
@@ -20,8 +21,8 @@
 
 .cardItemTextBody {
     flex: 1;
-    display: inline-block;
-    float: right;
+    /* display: inline-block; */
+    /* float: right; */
     padding: 1rem 0;
 }
 

diff --git a/home/src/pages/index.js b/home/src/pages/index.js
@@ -192,7 +192,7 @@ function Home() {
             {/*who is using*/}
             <Section isDark>
               <LogoCarousel logos={usersLink}
-                            headerTitle={translate({ message: 'Who Use HertzBeat?' })}>
+                            headerTitle={translate({ message: 'Who uses HertzBeat?' })}>
               </LogoCarousel>
             </Section>
             {features && features.length > 0 && (