diff options
Diffstat (limited to 'FrontEnd/src/app/views/home')
-rw-r--r-- | FrontEnd/src/app/views/home/BoardWithUser.tsx | 8 | ||||
-rw-r--r-- | FrontEnd/src/app/views/home/BoardWithoutUser.tsx | 2 | ||||
-rw-r--r-- | FrontEnd/src/app/views/home/TimelineCreateDialog.tsx | 39 | ||||
-rw-r--r-- | FrontEnd/src/app/views/home/index.tsx | 4 |
4 files changed, 27 insertions, 26 deletions
diff --git a/FrontEnd/src/app/views/home/BoardWithUser.tsx b/FrontEnd/src/app/views/home/BoardWithUser.tsx index dcd39cbe..fbe1dd89 100644 --- a/FrontEnd/src/app/views/home/BoardWithUser.tsx +++ b/FrontEnd/src/app/views/home/BoardWithUser.tsx @@ -62,9 +62,9 @@ const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => { }, [user, joinTimelines]); return ( - <Row className="my-2 justify-content-center"> + <Row className="my-3 justify-content-center"> {ownTimelines === "offline" && joinTimelines === "offline" ? ( - <Col className="py-2" sm="8" lg="6"> + <Col sm="8" lg="6"> <OfflineBoard onReload={() => { setOwnTimelines("loading"); @@ -74,7 +74,7 @@ const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => { </Col> ) : ( <> - <Col sm="6" lg="5" className="py-2"> + <Col sm="6" lg="5" className="mb-3 mb-sm-0"> <TimelineBoard title={t("home.ownTimeline")} timelines={ownTimelines} @@ -83,7 +83,7 @@ const BoardWithUser: React.FC<{ user: UserWithToken }> = ({ user }) => { }} /> </Col> - <Col sm="6" lg="5" className="py-2"> + <Col sm="6" lg="5"> <TimelineBoard title={t("home.joinTimeline")} timelines={joinTimelines} diff --git a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx index ebfddb50..7e30f799 100644 --- a/FrontEnd/src/app/views/home/BoardWithoutUser.tsx +++ b/FrontEnd/src/app/views/home/BoardWithoutUser.tsx @@ -34,7 +34,7 @@ const BoardWithoutUser: React.FC = () => { }, [publicTimelines]); return ( - <Row className="my-2 justify-content-center"> + <Row className="my-3 justify-content-center"> {publicTimelines === "offline" ? ( <Col sm="8" lg="6"> <OfflineBoard diff --git a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx index d9467719..786ebb5d 100644 --- a/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx +++ b/FrontEnd/src/app/views/home/TimelineCreateDialog.tsx @@ -20,27 +20,28 @@ const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => { close={props.close} titleColor="success" title="home.createDialog.title" - inputScheme={[ - { - type: "text", - label: "home.createDialog.name", - helperText: "home.createDialog.nameFormat", - validator: (name) => { - if (name.length === 0) { - return "home.createDialog.noEmpty"; - } else if (name.length > 26) { - return "home.createDialog.tooLong"; - } else if (!validateTimelineName(name)) { - return "home.createDialog.badFormat"; - } else { - return null; - } + inputScheme={ + [ + { + type: "text", + label: "home.createDialog.name", + helperText: "home.createDialog.nameFormat", }, - }, - ]} + ] as const + } + inputValidator={([name]) => { + if (name.length === 0) { + return { 0: "home.createDialog.noEmpty" }; + } else if (name.length > 26) { + return { 0: "home.createDialog.tooLong" }; + } else if (!validateTimelineName(name)) { + return { 0: "home.createDialog.badFormat" }; + } else { + return null; + } + }} onProcess={([name]) => { - nameSaved = name as string; - return timelineService.createTimeline(nameSaved).toPromise(); + return timelineService.createTimeline(name).toPromise(); }} onSuccessAndClose={() => { history.push(`timelines/${nameSaved}`); diff --git a/FrontEnd/src/app/views/home/index.tsx b/FrontEnd/src/app/views/home/index.tsx index 760adcea..0c36545c 100644 --- a/FrontEnd/src/app/views/home/index.tsx +++ b/FrontEnd/src/app/views/home/index.tsx @@ -34,8 +34,8 @@ const HomePage: React.FC = () => { return ( <> <Container fluid> - <Row className="justify-content-center"> - <Col xs={12} sm={10} md={8} lg={6}> + <Row className="my-3 justify-content-center"> + <Col xs={12} sm={8} lg={6}> <SearchInput className="justify-content-center" value={navText} |