Modularization

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/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.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 {
+  // 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/pages/_private-legacy-pages.page.tsx

@@ -21,11 +21,12 @@ import {
   useCurrentSidebarContents, useCurrentProductNavWidth,
 } from '~/stores/ui';
 
-
 import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
+import styles from './_private-legacy-pages.page.module.scss';
+
 type Props = CommonProps & {
   currentUser: IUser,
 
@@ -77,7 +78,7 @@ const PrivateLegacyPage: NextPage<Props> = (props: Props) => {
         {renderScriptTagByName('highlight-addons')}
         */}
       </Head>
-      <div className="on-search">
+      <div className={`${styles['on-search']}`}>
         <BasicLayout title={useCustomTitle(props, 'GROWI')}>
 
           <div id="grw-fav-sticky-trigger" className="sticky-top"></div>

packages/app/src/pages/_search.page.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 {
+  // 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/pages/_search.page.tsx

@@ -28,6 +28,8 @@ import {
   CommonProps, getNextI18NextConfig, getServerSideCommonProps, useCustomTitle,
 } from './utils/commons';
 
+import styles from './_search.page.module.scss';
+
 type Props = CommonProps & {
   currentUser: IUser,
 
@@ -87,7 +89,7 @@ const SearchResultPage: NextPage<Props> = (props: Props) => {
         {renderScriptTagByName('highlight-addons')}
         */}
       </Head>
-      <div className="on-search">
+      <div className={`${styles['on-search']}`}>
         <BasicLayout title={useCustomTitle(props, 'GROWI')} className={classNames.join(' ')}>
 
           <div id="grw-fav-sticky-trigger" className="sticky-top"></div>