feature: Mobile Adaptation

Signed-off-by: Qi Zhang <[email protected]>
goodrain · Oct 8, 2022 · f87aae4 · f87aae4
1 parent 8e6be0c
commit f87aae4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/src/components/HomePage/Command/index.tsx b/src/components/HomePage/Command/index.tsx
@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from "react";
+import React, { useState } from "react";
 import { animated, useTrail } from "react-spring";
 import CodeBlock from '@theme/CodeBlock';
 import { Tabs, TabPane } from '@douyinfe/semi-ui';
+import {useWindowSize} from '@docusaurus/theme-common';
 
 export default function Command() {
 
@@ -21,10 +22,9 @@ export default function Command() {
       tension: 460,
     },
   })
+  const windowSize = useWindowSize();
+  const tabPosition = windowSize === 'desktop' ? "left" : "top";
 
-  const ScreenWidth = window.screen.width;
-  const tabPosition = ScreenWidth < 1000 ? "top" : "left";
-
   return (
     <animated.div style={animatedTexts[0]}>
       <Tabs type="line" tabPosition={tabPosition}>

diff --git a/src/components/HomePage/HowRainbond/index.tsx b/src/components/HomePage/HowRainbond/index.tsx
@@ -75,7 +75,7 @@ export default function HowRainbond() {
       </h1>
       <div className="row">
         {Cards().map(({header, content, link},index) => (
-          <div className={clsx("col col--6", styles.col)}>
+          <div className={clsx("col col--6", styles.col)} key={index}>
             <Link to={link} className={ styles.link }>
               <div className={clsx("card", styles.card)}>
                 <div className={clsx("card__header", styles.header)}>

diff --git a/src/components/HomePage/JoinCommunity/index.tsx b/src/components/HomePage/JoinCommunity/index.tsx
@@ -50,7 +50,7 @@ export default function JoinCommunity() {
                 <Link to="https://github.com/goodrain/rainbond/issues" className={styles.icon}>
                   <Github fill="#191717"/>
                 </Link>
-                <OverlayTrigger trigger="hover" placement="bottom" overlay={
+                <OverlayTrigger placement="bottom" overlay={
                   <div className="card">
                     <div className="card__body">
                       <img width="200px" height="200px" src="/wechat/wechat-public.jpg" />
@@ -61,7 +61,7 @@ export default function JoinCommunity() {
                     <Wechat />
                   </span>
                 </OverlayTrigger>
-                <OverlayTrigger trigger="hover" placement="bottom" overlay={
+                <OverlayTrigger placement="bottom" overlay={
                   <div className="card">
                     <div className="card__body">
                       搜索钉钉群号 <b>31096419</b> 加入 Rainbond 钉钉技术交流群

diff --git a/src/components/HomePage/Users/index.tsx b/src/components/HomePage/Users/index.tsx
@@ -125,8 +125,8 @@ export default function Users() {
     <animated.div style={animatedTexts[0]}>
       <h2 className={ styles.title }>我们的用户</h2>
       <div className={clsx("row", styles.row)}>
-        {Cards().map(({image}) => (
-          <div className={clsx("col col--2", styles.col)}>
+        {Cards().map(({image},index) => (
+          <div className={clsx("col col--2", styles.col)} key={index}>
               <div className={clsx("card", styles.card)}>
                 <div className={clsx("card__image", styles.card_image)}>
                   <img src={image} className={styles.image}/>