Merge branch 'feat/80324-adjust-design-for-left-pane' into feat/80324-82891-desing-include-path-button

* feat/80324-adjust-design-for-left-pane:
  add a class to body in search.html
  add comment
  hide nav
  82319 add class to body
  hide nav bar content
  82470 adjust list item position
  82470 delete unnecessary code

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

@@ -38,9 +38,9 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   );
 
   return (
-    <li key={pageData._id} className={`page-list-li search-page-item w-100 list-group-item-action ${isSelected ? 'active' : ''}`}>
+    <li key={pageData._id} className={`page-list-li search-page-item w-100 list-group-item-action pl-2 ${isSelected ? 'active' : ''}`}>
       <a
-        className="d-block pt-3"
+        className="d-block py-4 h-100"
         href={pageId}
         onClick={() => onClickSearchResultItem != null && onClickSearchResultItem(pageData._id)}
       >

packages/app/src/server/views/search.html

@@ -11,6 +11,9 @@
   data-target="#search-result-list"
 {% endblock %}
 
+<!-- add .on-search to body tag class in layout -->
+{% set additionalBodyClass = 'on-search' %}
+
 {% block layout_main %}
 <div id="grw-fav-sticky-trigger" class="sticky-top"></div>
 

packages/app/src/styles/_search.scss

@@ -176,18 +176,19 @@
     top: 0px;
 
     .search-result-list-scroll {
-      height: calc(100vh - 125px); // subtract the height of SearchControl component
+      // subtract the height of SearchControl component + a gap made above #page-wrapper and below #main
+      height: calc(100vh - 117px);
       overflow-y: scroll;
     }
     .nav.nav-pills {
       > .page-list-li {
         &.active {
-          padding-right: 5px;
+          // 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;
         }
         > a {
-          height: 123px;
-          padding: 2px 4px;
           word-break: break-all;
 
           &:hover {
@@ -250,6 +251,18 @@
   }
 }
 
+// class to add to .grw-navbar to hide its navbar above the displaying page
+body.on-search {
+  .grw-navbar {
+    position: fixed !important;
+    width: 100vw;
+  }
+  .page-wrapper {
+    position: relative;
+    top: $grw-navbar-border-width;
+  }
+}
+
 // 2021/9/22 TODO: Remove after moving to SearchResult
 .search-page-input {
   position: sticky;