From a581cf642fa0ff06c27e3d3d95af02aec3abd87d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 3 Nov 2020 23:37:28 +0800
Subject: feat: Enhance home page layout.

---
 FrontEnd/src/app/views/common/SearchInput.tsx    | 12 +++++++-----
 FrontEnd/src/app/views/home/BoardWithUser.tsx    |  8 ++++----
 FrontEnd/src/app/views/home/BoardWithoutUser.tsx |  2 +-
 FrontEnd/src/app/views/home/index.tsx            |  4 ++--
 4 files changed, 14 insertions(+), 12 deletions(-)

(limited to 'FrontEnd/src')

diff --git a/FrontEnd/src/app/views/common/SearchInput.tsx b/FrontEnd/src/app/views/common/SearchInput.tsx
index 9833d515..1373bd68 100644
--- a/FrontEnd/src/app/views/common/SearchInput.tsx
+++ b/FrontEnd/src/app/views/common/SearchInput.tsx
@@ -36,7 +36,7 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
   );
 
   return (
-    <Form inline className={clsx("my-2", props.className)}>
+    <Form inline className={clsx(" flex-sm-nowrap", props.className)}>
       <Form.Control
         className="mr-sm-2 flex-grow-1"
         value={props.value}
@@ -44,10 +44,12 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
         onKeyPress={onInputKeyPress}
         placeholder={props.placeholder}
       />
-      <div className="mt-2 mt-sm-0 order-sm-last ml-sm-3">
-        {props.additionalButton}
-      </div>
-      <div className="mt-2 mt-sm-0 ml-auto ml-sm-0">
+      {props.additionalButton ? (
+        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ml-sm-2">
+          {props.additionalButton}
+        </div>
+      ) : null}
+      <div className="mt-2 mt-sm-0 flex-shrink-0 ml-auto ml-sm-0">
         {props.loading ? (
           <Spinner variant="primary" animation="border" />
         ) : (
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/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}
-- 
cgit v1.2.3