Merge branch 'dev/5.0.x' into fix/83827-83852-remove-warning

packages/app/src/client/app.jsx

@@ -111,6 +111,10 @@ Object.assign(componentMappings, {
   'duplicated-alert': <DuplicatedAlert />,
   'redirected-alert': <RedirectedAlert />,
   'renamed-alert': <RenamedAlert />,
+  'not-found-alert': <NotFoundAlert
+    isGuestUserMode={appContainer.isGuestUser}
+    isHidden={pageContainer.state.pageId != null ? (pageContainer.state.isNotCreatable || pageContainer.state.isTrashPage) : false} // !!DO NOT MOVE THIS!! https://github.com/weseek/growi/pull/4899
+  />,
 });
 
 // additional definitions if data exists
@@ -124,10 +128,6 @@ if (pageContainer.state.pageId != null) {
 
     'recent-created-icon': <RecentlyCreatedIcon />,
     'user-bookmark-icon': <BookmarkIcon />,
-    'not-found-alert': <NotFoundAlert
-      isGuestUserMode={appContainer.isGuestUser}
-      isHidden={pageContainer.state.isNotCreatable || pageContainer.state.isTrashPage}
-    />,
   });
 
   // show the Page accessory modal when query of "compare" is requested

packages/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -28,10 +28,10 @@ const PageItemControl: FC<PageItemControlProps> = (props: PageItemControlProps)
     <>
       <button
         type="button"
-        className="btn-link nav-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management py-0"
+        className="btn-link dropdown-toggle dropdown-toggle-no-caret border-0 rounded grw-btn-page-management py-0 px-2"
         data-toggle="dropdown"
       >
-        <i className="fa fa-ellipsis-v text-muted"></i>
+        <i className="fa fa-ellipsis-v text-muted p-1"></i>
       </button>
       <div className="dropdown-menu dropdown-menu-right">
 

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 align-self-center"
+        className="custom-control custom-checkbox ml-2 align-self-center"
         disabled={props.isSelectAllCheckboxDisabled}
         onClick={onClickCheckbox}
         checked={selectAllCheckboxType !== CheckboxType.NONE_CHECKED}

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

@@ -80,7 +80,7 @@ const SearchControl: FC <Props> = (props: Props) => {
   };
 
   return (
-    <div className="position-sticky fixed-top">
+    <div className="position-sticky fixed-top shadow-sm">
       <div className="search-page-nav d-flex py-3 align-items-center">
         <div className="flex-grow-1 mx-4">
           <SearchPageFormTypeAny

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

@@ -63,7 +63,7 @@ const SearchPageLayout: FC<Props> = (props: Props) => {
             </div>
 
             <div className="page-list">
-              <ul className="page-list-ul page-list-ul-flat pl-4 nav nav-pills"><SearchResultList></SearchResultList></ul>
+              <ul className="page-list-ul page-list-ul-flat px-md-4 nav nav-pills"><SearchResultList></SearchResultList></ul>
             </div>
           </div>
         </div>

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

@@ -4,6 +4,7 @@ import Clamp from 'react-multiline-clamp';
 
 import { UserPicture, PageListMeta, PagePathLabel } from '@growi/ui';
 import { pagePathUtils } from '@growi/core';
+import { useIsDeviceSmallerThanMd } from '~/stores/ui';
 
 import { IPageSearchResultData } from '../../interfaces/search';
 import PageItemControl from '../Common/Dropdown/PageItemControl';
@@ -27,6 +28,8 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     page: { pageData, pageMeta }, isSelected, onClickSearchResultItem, onClickCheckbox, isChecked, isEnableActions, shortBody,
   } = 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}`;
 
@@ -46,18 +49,23 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
     />
   );
 
+  const responsiveListStyleClass = `${isDeviceSmallerThanMd ? '' : `list-group-item-action ${isSelected ? 'active' : ''}`}`;
+
   return (
-    <li key={pageData._id} className={`page-list-li search-page-item w-100 list-group-item-action pl-2 ${isSelected ? 'active' : ''}`}>
+    <li
+      key={pageData._id}
+      className={`w-100 page-list-li search-result-item border-bottom ${responsiveListStyleClass}`}
+    >
       <a
-        className="d-block py-4 h-100"
+        className="d-block h-100"
         href={pageId}
         onClick={() => onClickSearchResultItem != null && onClickSearchResultItem(pageData._id)}
       >
-        <div className="d-flex">
+        <div className="d-flex h-100">
           {/* checkbox */}
-          <div className="form-check my-auto mr-3">
+          <div className="form-check d-flex align-items-center justify-content-center px-md-2 pl-3 pr-2 search-item-checkbox">
             <input
-              className="form-check-input my-auto"
+              className="form-check-input position-relative m-0"
               type="checkbox"
               id="flexCheckDefault"
               onChange={() => {
@@ -68,24 +76,27 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
               checked={isChecked}
             />
           </div>
-          <div className="w-100">
+          <div className="search-item-text p-md-3 pl-2 py-3 pr-3 flex-grow-1">
             {/* page path */}
-            <small className="mb-1">
+            <h6 className="mb-1 py-1">
               <i className="icon-fw icon-home"></i>
               {pagePathElem}
-            </small>
-            <div className="d-flex my-1 align-items-center">
+            </h6>
+            <div className="d-flex align-items-center mb-2">
+              {/* Picture */}
+              <span className="mr-2 d-none d-md-block">
+                <UserPicture user={pageData.lastUpdateUser} size="sm" />
+              </span>
               {/* page title */}
-              <h3 className="mb-0">
-                <UserPicture user={pageData.lastUpdateUser} />
-                <span className="mx-2 search-result-page-title">{pageTitle}</span>
-              </h3>
+              <span className="py-1 h5 mr-2 mb-0">
+                {pageTitle}
+              </span>
               {/* page meta */}
-              <div className="d-flex mx-2">
+              <div className="d-none d-md-flex item-meta py-0 px-1">
                 <PageListMeta page={pageData} bookmarkCount={pageMeta.bookmarkCount} />
               </div>
               {/* doropdown icon includes page control buttons */}
-              <div className="ml-auto">
+              <div className="item-control ml-auto">
                 <PageItemControl
                   page={pageData}
                   onClickDeleteButton={props.onClickDeleteButton}
@@ -94,13 +105,13 @@ const SearchResultListItem: FC<Props> = memo((props:Props) => {
                 />
               </div>
             </div>
-            <div className="my-2 search-result-list-snippet">
+            <div className="search-result-list-snippet py-1">
               <Clamp lines={2}>
                 {
                   pageMeta.elasticSearchResult != null && pageMeta.elasticSearchResult?.snippet.length !== 0 ? (
-                    <div className="mt-1" dangerouslySetInnerHTML={{ __html: pageMeta.elasticSearchResult.snippet }}></div>
+                    <div dangerouslySetInnerHTML={{ __html: pageMeta.elasticSearchResult.snippet }}></div>
                   ) : (
-                    <div className="mt-1">{ shortBody != null ? shortBody : 'Loading ...' }</div> // TODO: improve indicator
+                    <div>{ shortBody != null ? shortBody : 'Loading ...' }</div> // TODO: improve indicator
                   )
                 }
               </Clamp>

packages/app/src/styles/_search.scss

@@ -191,10 +191,12 @@
     .nav.nav-pills {
       > .page-list-li {
         &.active {
-          // add this negative margin to avoid inner elements of .page-list-li.active
-          // moving to right side by border-left's px size.
-          margin-left: -3px;
           border-left: solid 3px transparent;
+          .search-item-checkbox {
+            // subtract 3px from padding left applied by .search-item-checkbox
+            // as 3px of border-left is added above
+            padding-left: 4px !important;
+          }
         }
         > a {
           word-break: break-all;
@@ -208,8 +210,10 @@
           }
         }
         .page-list-meta {
-          > span {
-            margin-right: 12px;
+          .meta-icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 14px;
           }
           .footstamp-icon {
             margin-right: 2px;
@@ -217,6 +221,9 @@
         }
       }
     }
+    .search-result-item {
+      min-height: 136px;
+    }
 
     .search-result-meta {
       font-weight: bold;
@@ -231,7 +238,17 @@
       vertical-align: middle;
     }
   }
-
+  .search-item-text {
+    .picture-sm {
+      width: 20px;
+      height: 20px;
+    }
+    .item-meta {
+      .top-label {
+        display: none; // not show top label in search result list
+      }
+    }
+  }
   .search-result-content {
     padding-bottom: 36px;
 
@@ -293,10 +310,6 @@ body.on-search {
   }
 }
 
-.search-page-item {
-  height: 130px;
-}
-
 @include media-breakpoint-down(sm) {
   .grw-search-table {
     th {

packages/ui/src/components/PagePath/PageListMeta.jsx

@@ -14,34 +14,34 @@ export class PageListMeta extends React.Component {
     // top check
     let topLabel;
     if (isTopPage(page.path)) {
-      topLabel = <span className="badge badge-info">TOP</span>;
+      topLabel = <span className="badge badge-info meta-icon top-label">TOP</span>;
     }
 
     // template check
     let templateLabel;
     if (checkTemplatePath(page.path)) {
-      templateLabel = <span className="badge badge-info">TMPL</span>;
+      templateLabel = <span className="badge badge-info meta-icon">TMPL</span>;
     }
 
     let commentCount;
     if (page.commentCount != null && page.commentCount > 0) {
-      commentCount = <span><i className="icon-bubble" />{page.commentCount}</span>;
+      commentCount = <span className="meta-icon"><i className="icon-bubble" />{page.commentCount}</span>;
     }
 
     let likerCount;
     if (page.liker != null && page.liker.length > 0) {
-      likerCount = <span><i className="icon-like" />{page.liker.length}</span>;
+      likerCount = <span className="meta-icon"><i className="icon-like" />{page.liker.length}</span>;
     }
 
     let locked;
     if (page.grant !== 1) {
-      locked = <span><i className="icon-lock" /></span>;
+      locked = <span className="meta-icon"><i className="icon-lock" /></span>;
     }
 
     let seenUserCount;
     if (page.seenUserCount > 0) {
       seenUserCount = (
-        <span>
+        <span className="meta-icon">
           <i className="footstamp-icon"><FootstampIcon /></i>
           {page.seenUsers.length}
         </span>
@@ -50,7 +50,7 @@ export class PageListMeta extends React.Component {
 
     let bookmarkCount;
     if (this.props.bookmarkCount > 0) {
-      bookmarkCount = <span><i className="icon-star" />{this.props.bookmarkCount}</span>;
+      bookmarkCount = <span className="meta-icon"><i className="icon-star" />{this.props.bookmarkCount}</span>;
     }
 
     return (