From 387b2f63665de54f9f5f052d0dbfd840c360cbc8 Mon Sep 17 00:00:00 2001
From: "yongen.loong" <yongen.loong@aelf.io>
Date: Tue, 27 Aug 2024 11:28:42 +0800
Subject: [PATCH] feat: mobile footer

---
 config/footer-links.json                     |  2 +-
 src/css/custom.css                           | 10 ++++++++
 src/theme/Footer/Copyright/index.module.css  | 18 --------------
 src/theme/Footer/Copyright/index.tsx         | 22 ++++-------------
 src/theme/Footer/Links/MultiColumn/index.tsx |  6 +++++
 src/theme/Footer/Social/index.module.css     | 17 +++++++++++++
 src/theme/Footer/Social/index.tsx            | 25 ++++++++++++++++++++
 7 files changed, 63 insertions(+), 37 deletions(-)
 create mode 100644 src/theme/Footer/Social/index.module.css
 create mode 100644 src/theme/Footer/Social/index.tsx

diff --git a/config/footer-links.json b/config/footer-links.json
index 5fb96300..9e518a95 100644
--- a/config/footer-links.json
+++ b/config/footer-links.json
@@ -26,7 +26,7 @@
       ]
     },
     {
-      "title": "Developer Resources",
+      "title": "Developer",
       "items": [
         {
           "label": "Quick Start",
diff --git a/src/css/custom.css b/src/css/custom.css
index e1942c46..e65fc459 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -60,4 +60,14 @@
   .mobile-hidden {
     display: none;
   }
+
+  .col.footer__col {
+    --ifm-col-width: 50%;
+  }
+}
+
+@media screen and (min-width: 996px) {
+  .mobile-only {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/theme/Footer/Copyright/index.module.css b/src/theme/Footer/Copyright/index.module.css
index 280b0198..3f5d8e51 100644
--- a/src/theme/Footer/Copyright/index.module.css
+++ b/src/theme/Footer/Copyright/index.module.css
@@ -3,17 +3,6 @@
   justify-content: space-between;
 }
 
-span.icon {
-  width: 15px;
-  height: 15px;
-  margin: 0 10px;
-  padding: 3px;
-}
-
-.img {
-  margin: 0 0 0 10px;
-}
-
 .logo {
   display: none;
 }
@@ -24,13 +13,6 @@ span.icon {
     text-align: left;
   }
 
-  .social {
-    order: -1;
-    padding-bottom: 0.5rem;
-    margin-bottom: 1rem;
-    border-bottom: 1px solid #ccc;
-  }
-
   .logo {
     display: block;
     width: 4rem;
diff --git a/src/theme/Footer/Copyright/index.tsx b/src/theme/Footer/Copyright/index.tsx
index 5da3da0d..42cf3ef0 100644
--- a/src/theme/Footer/Copyright/index.tsx
+++ b/src/theme/Footer/Copyright/index.tsx
@@ -3,8 +3,8 @@ import Copyright from "@theme-original/Footer/Copyright";
 import type CopyrightType from "@theme/Footer/Copyright";
 import type { WrapperProps } from "@docusaurus/types";
 import styles from "./index.module.css";
-import socialLinks from "@site/config/social-links.json";
 import Logo from "@site/src/theme/logo";
+import Social from "../Social";
 
 type Props = WrapperProps<typeof CopyrightType>;
 
@@ -12,29 +12,15 @@ export default function CopyrightWrapper(props: Props): JSX.Element {
   return (
     <>
       <div className={styles.wrap}>
+        <div className="mobile-hidden">
+          <Social />
+        </div>
         <div className={styles.copyright}>
           <div className={styles.logo}>
             <Logo />
           </div>
           <Copyright {...props} />
         </div>
-        <div className={styles.social}>
-          {socialLinks.links.map((i, key) => (
-            <a
-              key={key}
-              href={i.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={i.label}
-            >
-              {i.icon ? (
-                <img src={i.icon} className={styles.img} />
-              ) : (
-                <span className={styles.icon}>?</span>
-              )}
-            </a>
-          ))}
-        </div>
       </div>
     </>
   );
diff --git a/src/theme/Footer/Links/MultiColumn/index.tsx b/src/theme/Footer/Links/MultiColumn/index.tsx
index 5c6cc070..2964f635 100644
--- a/src/theme/Footer/Links/MultiColumn/index.tsx
+++ b/src/theme/Footer/Links/MultiColumn/index.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import LinkItem from "@theme/Footer/LinkItem";
 import type { Props } from "@theme/Footer/Links/MultiColumn";
 import Logo from "@site/src/theme/logo";
+import Social from "../../Social";
 
 type ColumnType = Props["columns"][number];
 type ColumnItemType = ColumnType["items"][number];
@@ -30,6 +31,11 @@ function Column({ column }: { column: ColumnType }) {
           <ColumnLinkItem key={i} item={item} />
         ))}
       </ul>
+      {column.title === "Connect" ? (
+        <div className="mobile-only" style={{ marginTop: 10, marginLeft: -10 }}>
+          <Social />
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/src/theme/Footer/Social/index.module.css b/src/theme/Footer/Social/index.module.css
new file mode 100644
index 00000000..e4ba89c6
--- /dev/null
+++ b/src/theme/Footer/Social/index.module.css
@@ -0,0 +1,17 @@
+span.icon {
+  width: 15px;
+  height: 15px;
+  margin: 0 10px;
+  padding: 3px;
+}
+
+.img {
+  margin: 0 0 0 10px;
+}
+
+@media screen and (max-width: 996px) {
+  .social {
+    order: -1;
+    padding-bottom: 0.5rem;
+  }
+}
\ No newline at end of file
diff --git a/src/theme/Footer/Social/index.tsx b/src/theme/Footer/Social/index.tsx
new file mode 100644
index 00000000..b735fb66
--- /dev/null
+++ b/src/theme/Footer/Social/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import styles from "./index.module.css";
+import socialLinks from "@site/config/social-links.json";
+
+export default function Social(): JSX.Element {
+  return (
+    <div className={styles.social}>
+      {socialLinks.links.map((i, key) => (
+        <a
+          key={key}
+          href={i.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={i.label}
+        >
+          {i.icon ? (
+            <img src={i.icon} className={styles.img} />
+          ) : (
+            <span className={styles.icon}>?</span>
+          )}
+        </a>
+      ))}
+    </div>
+  );
+}