Merge remote-tracking branch 'origin/feat/77515-display-search-result-with-snippet' into feat/create-snippet

packages/app/src/components/SearchPage.jsx

@@ -92,13 +92,14 @@ class SearchPage extends React.Component {
   render() {
     return (
       <div>
-        <div className="search-page-input sps sps--abv">
+        {/* 2021/9/22 TODO: Move to SearchResult */}
+        {/* <div className="search-page-input sps sps--abv">
           <SearchPageForm
             t={this.props.t}
             onSearchFormChanged={this.search}
             keyword={this.state.searchingKeyword}
           />
-        </div>
+        </div> */}
         <SearchResult
           pages={this.state.searchedPages}
           searchingKeyword={this.state.searchingKeyword}

packages/app/src/components/SearchPage/SearchResult.jsx

@@ -184,8 +184,11 @@ class SearchResult extends React.Component {
       // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
       const pageId = `#id_${page._id}`;
       return (
-        <li key={page._id} className="nav-item page-list-li w-100 m-1">
+        <li key={page._id} className="nav-item page-list-li w-100 m-0 border-bottom">
           <a className="nav-link page-list-link d-flex align-items-baseline" href={pageId}>
+            <div className="form-check my-auto">
+              <input className="form-check-input my-auto" type="checkbox" value="" id="flexCheckDefault" />
+            </div>
             <Page page={page} noLink />
             <div className="ml-auto d-flex">
               { this.state.deletionMode
@@ -292,7 +295,7 @@ class SearchResult extends React.Component {
     return (
       <div className="content-main">
         <div className="search-result row" id="search-result">
-          <div className="col-lg-4 d-none d-lg-block page-list search-result-list pr-0" id="search-result-list">
+          <div className="col-lg-6 d-none d-lg-block page-list search-result-list pr-0" id="search-result-list">
             <nav>
               <div className="d-flex align-items-start justify-content-between mt-1">
                 <div className="search-result-meta">
@@ -309,7 +312,7 @@ class SearchResult extends React.Component {
               </div>
             </nav>
           </div>
-          <div className="col-lg-8 search-result-content" id="search-result-content">
+          <div className="col-lg-6 search-result-content" id="search-result-content">
             <SearchResultList pages={this.props.pages} searchingKeyword={this.props.searchingKeyword} />
           </div>
         </div>

packages/app/src/styles/_search.scss

@@ -165,6 +165,7 @@
     .nav.nav-pills {
       > li {
         > a {
+          height: 123px;
           padding: 2px 8px;
           word-break: break-all;
           border-radius: 0;
@@ -175,7 +176,7 @@
           }
           &.active {
             padding-right: 5px;
-            border-right: solid 3px transparent;
+            border-left: solid 3px transparent;
           }
           > * {
             margin-right: 3px;
@@ -222,6 +223,7 @@
   }
 }
 
+// 2021/9/22 TODO: Remove after moving to SearchResult
 .search-page-input {
   position: sticky;
   top: 15px;