Merge branch 'dev/5.0.x' into feat/84145-84230-add-clamp

packages/app/src/components/SearchPage/DeleteSelectedPageGroup.tsx

@@ -34,7 +34,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         id="check-all-pages"
         type="checkbox"
         name="check-all-pages"
-        className="custom-control custom-checkbox ml-2 align-self-center"
+        className="custom-control custom-checkbox align-self-center"
         disabled={props.isSelectAllCheckboxDisabled}
         onClick={onClickCheckbox}
         checked={selectAllCheckboxType !== CheckboxType.NONE_CHECKED}

packages/app/src/components/SearchPage/SearchControl.tsx

@@ -79,6 +79,16 @@ const SearchControl: FC <Props> = (props: Props) => {
     );
   };
 
+  const renderSortControl = () => {
+    return (
+      <SortControl
+        sort={props.sort}
+        order={props.order}
+        onChangeSortInvoked={onChangeSortInvoked}
+      />
+    );
+  };
+
   return (
     <div className="position-sticky fixed-top shadow-sm">
       <div className="search-page-nav d-flex py-3 align-items-center">
@@ -89,16 +99,14 @@ const SearchControl: FC <Props> = (props: Props) => {
             onSearchFormChanged={props.onSearchInvoked}
           />
         </div>
-        <div className="mr-4 d-flex">
-          <SortControl
-            sort={props.sort}
-            order={props.order}
-            onChangeSortInvoked={onChangeSortInvoked}
-          />
+
+        {/* sort option: show when screen is larger than lg */}
+        <div className="mr-4 d-lg-flex d-none">
+          {renderSortControl()}
         </div>
       </div>
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
-      <div className="search-control d-flex align-items-center py-md-2 py-3 px-md-3 px-3 border-bottom border-gray">
+      <div className="search-control d-flex align-items-center py-md-2 py-3 px-md-4 px-3 border-bottom border-gray">
         <div className="d-flex pl-md-2">
           {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
           <DeleteSelectedPageGroup
@@ -108,8 +116,12 @@ const SearchControl: FC <Props> = (props: Props) => {
             onClickSelectAllCheckbox={props.onClickSelectAllCheckbox}
           />
         </div>
-        {/** filter option */}
-        <div className="d-lg-none ml-auto">
+        {/* sort option: show when screen is smaller than lg */}
+        <div className="mr-md-4 mr-2 d-flex d-lg-none ml-auto">
+          {renderSortControl()}
+        </div>
+        {/* filter option */}
+        <div className="d-lg-none">
           <button
             type="button"
             className="btn"

packages/app/src/components/SearchPage/SearchPageLayout.tsx

@@ -45,7 +45,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
                 {/* Todo: replace "1-10" to the appropriate value */}
                 {renderShowingPageCountInfo()}
               </div>
-              <div className="input-group search-result-select-group ml-4">
+              <div className="input-group search-result-select-group ml-4 d-lg-flex d-none">
                 <div className="input-group-prepend">
                   <label className="input-group-text text-secondary" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
                 </div>

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -3,7 +3,7 @@ import React, { FC, memo } from 'react';
 import Clamp from 'react-multiline-clamp';
 
 import { UserPicture, PageListMeta, PagePathLabel } from '@growi/ui';
-import { pagePathUtils } from '@growi/core';
+import { pagePathUtils, DevidedPagePath } from '@growi/core';
 import { useIsDeviceSmallerThanMd } from '~/stores/ui';
 
 import { IPageSearchResultData } from '../../interfaces/search';
@@ -30,8 +30,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
 
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
 
-  // 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 = `#${pageData._id}`;
+  const pagePath: DevidedPagePath = new DevidedPagePath(pageData.path, true);
 
   const pageTitle = (
     <PagePathLabel
@@ -56,9 +55,8 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
       key={pageData._id}
       className={`w-100 page-list-li search-result-item border-bottom ${responsiveListStyleClass}`}
     >
-      <a
-        className="d-block h-100"
-        href={pageId}
+      <div
+        className="h-100 text-break"
         onClick={() => onClickSearchResultItem != null && onClickSearchResultItem(pageData._id)}
       >
         <div className="d-flex h-100">
@@ -80,7 +78,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
             {/* page path */}
             <h6 className="mb-1 py-1">
               <i className="icon-fw icon-home"></i>
-              {pagePathElem}
+              <a href={pagePath.isRoot ? pagePath.latter : pagePath.former}>{pagePathElem}</a>
             </h6>
             <div className="d-flex align-items-center mb-2">
               {/* Picture */}
@@ -89,10 +87,11 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
               </span>
               {/* page title */}
               <Clamp lines={1}>
-                <span className="h5 mr-2 mb-0">
-                  {pageTitle}
+                <span className="py-1 h5 mr-2 mb-0">
+                  <a href={`/${pageData._id}`}>{pageTitle}</a>
                 </span>
               </Clamp>
+
               {/* page meta */}
               <div className="d-none d-md-flex item-meta py-0 px-1">
                 <PageListMeta page={pageData} bookmarkCount={pageMeta.bookmarkCount} />
@@ -121,7 +120,7 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
           </div>
         </div>
         {/* TODO: adjust snippet position */}
-      </a>
+      </div>
     </li>
   );
 });