Merge pull request #6529 from weseek/feat/102121-modularization-search-scss

feat: Modularization _search.scss

packages/app/src/components/Admin/UserManagement.jsx

@@ -14,6 +14,8 @@ import InviteUserControl from './Users/InviteUserControl';
 import PasswordResetModal from './Users/PasswordResetModal';
 import UserTable from './Users/UserTable';
 
+import styles from './UserManagement.module.scss';
+
 class UserManagement extends React.Component {
 
   constructor(props) {
@@ -129,7 +131,7 @@ class UserManagement extends React.Component {
       adminUsersContainer.state.searchText.length > 0
         ? (
           <i
-            className="icon-close search-clear"
+            className={`icon-close ${styles['search-clear']}`}
             onClick={() => {
               adminUsersContainer.clearSearchText();
               this.searchUserElement.value = '';

packages/app/src/components/Admin/UserManagement.module.scss

@@ -0,0 +1,5 @@
+// styles for admin user search
+.search-clear :global {
+  top: 90px;
+  right: 4px;
+}

packages/app/src/components/Layout/SearchResultLayout.module.scss

@@ -0,0 +1,92 @@
+@use '~/styles/variables' as var;
+@use '~/styles/bootstrap/init' as bs;
+
+.on-search :global {
+  .page-wrapper {
+    padding-bottom: unset;
+  }
+
+  .search-control-include-options {
+    .card-body {
+      padding: 5px 10px;
+    }
+  }
+  .search-result-list {
+    .search-result-list-scroll {
+      // subtract the height of GrowiNavbar + (SearchControl component + other factors)
+      height: calc(100vh - ((var.$grw-navbar-height + var.$grw-navbar-border-width) + 110px));
+      overflow-y: scroll;
+
+      @include bs.media-breakpoint-down(sm) {
+        height: calc(100vh - ((var.$grw-navbar-height + var.$grw-navbar-border-width + var.$grw-navbar-bottom-height) + 123px));
+      }
+    }
+
+    .search-result-keyword {
+      font-size: 17.5px;
+      font-weight: bold;
+    }
+    .search-result-select-group {
+      > select {
+        max-width: 8rem;
+      }
+    }
+
+    // list group
+    .page-list {
+      // not show top label in search result list
+      .page-list-meta {
+        .top-label {
+          display: none;
+        }
+      }
+    }
+  }
+
+  .search-result-content {
+    .search-result-content-nav {
+      min-height: var.$grw-subnav-search-preview-min-height;
+      overflow: auto;
+
+      .grw-subnav {
+        min-height: inherit;
+      }
+    }
+
+    .search-result-content {
+      height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width));
+
+      > h2 {
+        margin-right: 10px;
+        font-size: 22px;
+        line-height: 1em;
+      }
+
+      &:first-child > h2 {
+        margin-top: 0;
+      }
+
+      .search-result-content-body-container {
+        overflow-y: auto;
+
+        .wiki {
+          padding: 16px;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+}
+
+// style to apply when displaying search page
+.on-search :global {
+  // set sidebar height shown in search page
+  $search-page-sidebar-height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width));
+
+  .grw-sidebar {
+    height: $search-page-sidebar-height;
+    .data-layout-container {
+      height: 100%;
+    }
+  }
+}

packages/app/src/components/Layout/SearchResultLayout.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+
+import { BasicLayout } from '~/components/Layout/BasicLayout';
+
+import commonStyles from './SearchResultLayout.module.scss';
+
+type Props = {
+  title: string,
+  className?: string,
+  children?: ReactNode,
+}
+
+const SearchResultLayout = ({
+  children, title, className,
+}: Props): JSX.Element => {
+
+  const classNames: string[] = [];
+  if (className != null) {
+    classNames.push(className);
+  }
+
+  return (
+    <div className={`${commonStyles['on-search']}`}>
+      <BasicLayout title={title} className={classNames.join(' ')}>
+        <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
+        <div id="main" className="main search-page mt-0">
+          { children }
+        </div>
+      </BasicLayout>
+    </div>
+  );
+};
+
+export default SearchResultLayout;

packages/app/src/components/SearchForm.module.scss

@@ -0,0 +1,36 @@
+@use '~/styles/bootstrap/init' as bs;
+
+.grw-search-table {
+  caption {
+    display: table-header-group;
+  }
+}
+
+@include bs.media-breakpoint-down(sm) {
+  .grw-search-table {
+    th {
+      text-align: right;
+    }
+
+    td {
+      overflow-wrap: anywhere;
+      white-space: normal !important;
+    }
+
+    @include bs.media-breakpoint-down(xs) {
+      th,
+      td {
+        display: block;
+      }
+
+      th {
+        text-align: left;
+      }
+
+      td {
+        padding-top: 0 !important;
+        border-top: none !important;
+      }
+    }
+  }
+}

packages/app/src/components/SearchForm.tsx

@@ -11,6 +11,8 @@ import { IPageWithSearchMeta } from '~/interfaces/search';
 
 import SearchTypeahead from './SearchTypeahead';
 
+import styles from './SearchForm.module.scss';
+
 
 type SearchFormHelpProps = {
   isReachable: boolean,
@@ -31,7 +33,7 @@ const SearchFormHelp: FC<SearchFormHelpProps> = React.memo((props: SearchFormHel
   }
 
   return (
-    <table className="table grw-search-table search-help m-0">
+    <table className={`${styles['grw-search-table']} table grw-search-table search-help m-0`}>
       <caption className="text-left text-primary p-2">
         <h5 className="h6"><i className="icon-magnifier pr-2 mb-2" />{ t('search_help.title') }</h5>
       </caption>

packages/app/src/pages/_private-legacy-pages.page.tsx

@@ -21,11 +21,12 @@ import {
   useCurrentSidebarContents, useCurrentProductNavWidth,
 } from '~/stores/ui';
 
-
 import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
+const SearchResultLayout = dynamic(() => import('~/components/Layout/SearchResultLayout'), { ssr: false });
+
 type Props = CommonProps & {
   currentUser: IUser,
 
@@ -77,19 +78,12 @@ const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
         {renderScriptTagByName('highlight-addons')}
         */}
       </Head>
-      <div className="on-search">
-        <BasicLayout title={useCustomTitle(props, 'GROWI')}>
-
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-          <div id="main" className="main search-page mt-0">
-
-            <div id="private-regacy-pages">
-              <PrivateLegacyPages />
-            </div>
 
-          </div>
-        </BasicLayout>
-      </div>
+      <SearchResultLayout title={useCustomTitle(props, 'GROWI')}>
+        <div id="private-regacy-pages">
+          <PrivateLegacyPages />
+        </div>
+      </SearchResultLayout>
     </>
   );
 };

packages/app/src/pages/_search.page.tsx

@@ -28,6 +28,8 @@ import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
+const SearchResultLayout = dynamic(() => import('~/components/Layout/SearchResultLayout'), { ssr: false });
+
 type Props = CommonProps & {
   currentUser: IUser,
 
@@ -87,20 +89,14 @@ const SearchResultPage: NextPage<Props> = (props: Props) => {
         {renderScriptTagByName('highlight-addons')}
         */}
       </Head>
-      <div className="on-search">
-        <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
-
-          <div id="grw-fav-sticky-trigger" className="sticky-top"></div>
-          <div id="main" className="main search-page mt-0">
 
-            <div id="search-page">
-              <SearchPage />
-            </div>
+      <SearchResultLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
+        <div id="search-page">
+          <SearchPage />
+        </div>
+      </SearchResultLayout>
 
-          </div>
-          <PutbackPageModal />
-        </BasicLayout>
-      </div>
+      <PutbackPageModal />
     </>
   );
 };