From d3508f1f5f105fe3edb7c196ab2fb99c84b145f8 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 16 Apr 2021 18:13:28 +0800
Subject: ...

---
 FrontEnd/src/app/views/common/SearchInput.tsx | 18 +++++++--
 FrontEnd/src/app/views/home/index.tsx         | 58 +++++++--------------------
 2 files changed, 29 insertions(+), 47 deletions(-)

diff --git a/FrontEnd/src/app/views/common/SearchInput.tsx b/FrontEnd/src/app/views/common/SearchInput.tsx
index 12e2126a..76e7884c 100644
--- a/FrontEnd/src/app/views/common/SearchInput.tsx
+++ b/FrontEnd/src/app/views/common/SearchInput.tsx
@@ -12,10 +12,11 @@ export interface SearchInputProps {
   buttonText?: string;
   placeholder?: string;
   additionalButton?: React.ReactNode;
+  alwaysOneline?: boolean;
 }
 
 const SearchInput: React.FC<SearchInputProps> = (props) => {
-  const { onChange, onButtonClick } = props;
+  const { onChange, onButtonClick, alwaysOneline } = props;
 
   const { t } = useTranslation();
 
@@ -37,7 +38,13 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
   );
 
   return (
-    <Form inline className={classnames(" flex-sm-nowrap", props.className)}>
+    <Form
+      inline
+      className={classnames(
+        alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap",
+        props.className
+      )}
+    >
       <Form.Control
         className="mr-sm-2 flex-grow-1"
         value={props.value}
@@ -50,7 +57,12 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
           {props.additionalButton}
         </div>
       ) : null}
-      <div className="mt-2 mt-sm-0 flex-shrink-0 ml-auto ml-sm-0">
+      <div
+        className={classnames(
+          alwaysOneline ? "mt-0 ml-2" : "mt-2 mt-sm-0 ml-auto ml-sm-0",
+          "flex-shrink-0"
+        )}
+      >
         {props.loading ? (
           <Spinner variant="primary" animation="border" />
         ) : (
diff --git a/FrontEnd/src/app/views/home/index.tsx b/FrontEnd/src/app/views/home/index.tsx
index a0df6a5a..519d59f8 100644
--- a/FrontEnd/src/app/views/home/index.tsx
+++ b/FrontEnd/src/app/views/home/index.tsx
@@ -1,15 +1,10 @@
 import React from "react";
 import { useHistory } from "react-router";
-import { useTranslation } from "react-i18next";
-import { Container, Button, Row, Col } from "react-bootstrap";
 
 import { HttpTimelineInfo } from "@/http/timeline";
 import { getHttpHighlightClient } from "@/http/highlight";
 
-import { useUser } from "@/services/user";
-
 import SearchInput from "../common/SearchInput";
-import TimelineCreateDialog from "../center/TimelineCreateDialog";
 import TimelineListView from "./TimelineListView";
 import WebsiteIntroduction from "./WebsiteIntroduction";
 
@@ -22,14 +17,8 @@ const highlightTimelineMessageMap = {
 const HomeV2: React.FC = () => {
   const history = useHistory();
 
-  const { t } = useTranslation();
-
-  const user = useUser();
-
   const [navText, setNavText] = React.useState<string>("");
 
-  const [dialog, setDialog] = React.useState<"create" | null>(null);
-
   const [highlightTimelineState, setHighlightTimelineState] = React.useState<
     "loading" | "done" | "error"
   >("loading");
@@ -64,39 +53,20 @@ const HomeV2: React.FC = () => {
 
   return (
     <>
-      <Container fluid className="px-0">
-        <Row className="mx-0 my-3 px-2 justify-content-end">
-          <Col xs="12" sm="auto">
-            <SearchInput
-              value={navText}
-              onChange={setNavText}
-              onButtonClick={() => {
-                history.push(`search?q=${navText}`);
-              }}
-              additionalButton={
-                user != null && (
-                  <Button
-                    variant="outline-success"
-                    onClick={() => {
-                      setDialog("create");
-                    }}
-                  >
-                    {t("home.createButton")}
-                  </Button>
-                )
-              }
-            />
-          </Col>
-        </Row>
-        <WebsiteIntroduction className="p-2" />
-        <TimelineListView
-          headerText={highlightTimelineMessageMap[highlightTimelineState]}
-          timelines={highlightTimelines}
-        />
-      </Container>
-      {dialog === "create" && (
-        <TimelineCreateDialog open close={() => setDialog(null)} />
-      )}
+      <SearchInput
+        className="mx-2 my-3 float-sm-right"
+        value={navText}
+        onChange={setNavText}
+        onButtonClick={() => {
+          history.push(`search?q=${navText}`);
+        }}
+        alwaysOneline
+      />
+      <WebsiteIntroduction className="m-2" />
+      <TimelineListView
+        headerText={highlightTimelineMessageMap[highlightTimelineState]}
+        timelines={highlightTimelines}
+      />
     </>
   );
 };
-- 
cgit v1.2.3