diff options
Diffstat (limited to 'FrontEnd/src/views/center')
| -rw-r--r-- | FrontEnd/src/views/center/CenterBoards.tsx | 25 | ||||
| -rw-r--r-- | FrontEnd/src/views/center/TimelineBoard.tsx | 4 | ||||
| -rw-r--r-- | FrontEnd/src/views/center/TimelineCreateDialog.tsx | 4 | ||||
| -rw-r--r-- | FrontEnd/src/views/center/index.tsx | 24 |
4 files changed, 26 insertions, 31 deletions
diff --git a/FrontEnd/src/views/center/CenterBoards.tsx b/FrontEnd/src/views/center/CenterBoards.tsx index f5200415..392c2d08 100644 --- a/FrontEnd/src/views/center/CenterBoards.tsx +++ b/FrontEnd/src/views/center/CenterBoards.tsx @@ -1,5 +1,4 @@ import React from "react"; -import { Row, Col } from "react-bootstrap"; import { useTranslation } from "react-i18next"; import { pushAlert } from "@/services/alert"; @@ -18,10 +17,10 @@ const CenterBoards: React.FC = () => { return ( <> - <Row className="justify-content-center"> - <Col xs="12" md="6"> - <Row> - <Col xs="12" className="my-2"> + <div className="row justify-content-center"> + <div className="col col-12 col-md-6"> + <div className="row"> + <div className="col col-12 my-2"> <TimelineBoard title={t("home.bookmarkTimeline")} load={() => getHttpBookmarkClient().list()} @@ -52,8 +51,8 @@ const CenterBoards: React.FC = () => { }, }} /> - </Col> - <Col xs="12" className="my-2"> + </div> + <div className="col col-12 my-2"> <TimelineBoard title={t("home.highlightTimeline")} load={() => getHttpHighlightClient().list()} @@ -88,18 +87,18 @@ const CenterBoards: React.FC = () => { : undefined } /> - </Col> - </Row> - </Col> - <Col xs="12" md="6" className="my-2"> + </div> + </div> + </div> + <div className="col-12 col-md-6 my-2"> <TimelineBoard title={t("home.relatedTimeline")} load={() => getHttpTimelineClient().listTimeline({ relate: user.username }) } /> - </Col> - </Row> + </div> + </div> </> ); }; diff --git a/FrontEnd/src/views/center/TimelineBoard.tsx b/FrontEnd/src/views/center/TimelineBoard.tsx index d6f6228d..d7aa39ab 100644 --- a/FrontEnd/src/views/center/TimelineBoard.tsx +++ b/FrontEnd/src/views/center/TimelineBoard.tsx @@ -1,7 +1,6 @@ import React from "react"; import classnames from "classnames"; import { Link } from "react-router-dom"; -import { Spinner } from "react-bootstrap"; import { HttpTimelineInfo } from "@/http/timeline"; @@ -10,6 +9,7 @@ import UserTimelineLogo from "../common/UserTimelineLogo"; import LoadFailReload from "../common/LoadFailReload"; import FlatButton from "../common/button/FlatButton"; import Card from "../common/Card"; +import Spinner from "../common/Spinner"; interface TimelineBoardItemProps { timeline: HttpTimelineInfo; @@ -249,7 +249,7 @@ const TimelineBoardUI: React.FC<TimelineBoardUIProps> = (props) => { if (timelines === "loading") { return ( <div className="d-flex flex-grow-1 justify-content-center align-items-center"> - <Spinner variant="primary" animation="border" /> + <Spinner /> </div> ); } else if (timelines === "offline") { diff --git a/FrontEnd/src/views/center/TimelineCreateDialog.tsx b/FrontEnd/src/views/center/TimelineCreateDialog.tsx index b4e25ba1..4871a5e0 100644 --- a/FrontEnd/src/views/center/TimelineCreateDialog.tsx +++ b/FrontEnd/src/views/center/TimelineCreateDialog.tsx @@ -2,7 +2,7 @@ import React from "react"; import { useHistory } from "react-router"; import { validateTimelineName } from "@/services/timeline"; -import OperationDialog from "../common/OperationDialog"; +import OperationDialog from "../common/dailog/OperationDialog"; import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline"; interface TimelineCreateDialogProps { @@ -16,7 +16,7 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => { return ( <OperationDialog open={props.open} - close={props.close} + onClose={props.close} themeColor="success" title="home.createDialog.title" inputScheme={ diff --git a/FrontEnd/src/views/center/index.tsx b/FrontEnd/src/views/center/index.tsx index 28d8b372..77bb6ec8 100644 --- a/FrontEnd/src/views/center/index.tsx +++ b/FrontEnd/src/views/center/index.tsx @@ -1,11 +1,10 @@ import React from "react"; import { useHistory } from "react-router"; -import { useTranslation } from "react-i18next"; -import { Row, Container, Button, Col } from "react-bootstrap"; import { useUserLoggedIn } from "@/services/user"; import SearchInput from "../common/SearchInput"; +import Button from "../common/button/Button"; import CenterBoards from "./CenterBoards"; import TimelineCreateDialog from "./TimelineCreateDialog"; @@ -14,8 +13,6 @@ import "./index.css"; const HomePage: React.FC = () => { const history = useHistory(); - const { t } = useTranslation(); - const user = useUserLoggedIn(); const [navText, setNavText] = React.useState<string>(""); @@ -24,9 +21,9 @@ const HomePage: React.FC = () => { return ( <> - <Container> - <Row className="my-3 justify-content-center"> - <Col xs={12} sm={8} lg={6}> + <div className="container"> + <div className="row my-3 justify-content-center"> + <div className="col col-12 col-sm-8 col-lg-6"> <SearchInput className="justify-content-center" value={navText} @@ -37,20 +34,19 @@ const HomePage: React.FC = () => { additionalButton={ user != null && ( <Button - variant="outline-success" + text="home.createButton" + color="success" onClick={() => { setDialog("create"); }} - > - {t("home.createButton")} - </Button> + /> ) } /> - </Col> - </Row> + </div> + </div> <CenterBoards /> - </Container> + </div> {dialog === "create" && ( <TimelineCreateDialog open |