Przeglądaj źródła

improve subnav styles

Yuki Takei 4 lat temu
rodzic
commit
105681669e

+ 6 - 1
packages/app/src/components/Navbar/GrowiSubNavigationSwitcher.jsx

@@ -110,7 +110,12 @@ const GrowiSubNavigationSwitcher = (props) => {
 
 
   return (
   return (
     <div className={`grw-subnav-switcher ${isVisible ? '' : 'grw-subnav-switcher-hidden'}`}>
     <div className={`grw-subnav-switcher ${isVisible ? '' : 'grw-subnav-switcher-hidden'}`}>
-      <div id="grw-subnav-fixed-container" className="grw-subnav-fixed-container position-fixed" ref={fixedContainerRef} style={{ width }}>
+      <div
+        id="grw-subnav-fixed-container"
+        className="grw-subnav-fixed-container position-fixed grw-subnav-append-shadow-container"
+        ref={fixedContainerRef}
+        style={{ width }}
+      >
         <GrowiContextualSubNavigation isCompactMode isLinkSharingDisabled />
         <GrowiContextualSubNavigation isCompactMode isLinkSharingDisabled />
       </div>
       </div>
     </div>
     </div>

+ 9 - 6
packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -153,12 +153,15 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
   if (page == null) return <></>;
   if (page == null) return <></>;
 
 
   return (
   return (
-    <div key={page._id} className="search-result-page grw-page-path-text-muted-container d-flex flex-column">
-      <GrowiSubNavigation
-        page={page}
-        controls={ControlComponents}
-      />
-      <div className="search-result-page-content" ref={scrollElementRef}>
+    <div key={page._id} className="search-result-content grw-page-path-text-muted-container d-flex flex-column">
+      <div className="grw-subnav-append-shadow-container">
+        <GrowiSubNavigation
+          page={page}
+          controls={ControlComponents}
+          isCompactMode
+        />
+      </div>
+      <div className="search-result-content-body-container" ref={scrollElementRef}>
         <RevisionLoader
         <RevisionLoader
           growiRenderer={growiRenderer}
           growiRenderer={growiRenderer}
           pageId={page._id}
           pageId={page._id}

+ 1 - 1
packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -107,7 +107,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll, Props> =
 
 
   return (
   return (
     <div className="content-main">
     <div className="content-main">
-      <div className="search-result d-flex" id="search-result">
+      <div className="search-result-base d-flex">
 
 
         <div className="mw-0 flex-grow-1 flex-basis-0 border boder-gray search-result-list" id="search-result-list">
         <div className="mw-0 flex-grow-1 flex-basis-0 border boder-gray search-result-list" id="search-result-list">
 
 

+ 2 - 3
packages/app/src/styles/_search.scss

@@ -193,7 +193,7 @@
       }
       }
     }
     }
 
 
-    .search-result-page {
+    .search-result-content {
       height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width));
       height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width));
 
 
       > h2 {
       > h2 {
@@ -206,13 +206,12 @@
         margin-top: 0;
         margin-top: 0;
       }
       }
 
 
-      .search-result-page-content {
+      .search-result-content-body-container {
         overflow-y: auto;
         overflow-y: auto;
 
 
         .wiki {
         .wiki {
           padding: 16px;
           padding: 16px;
           font-size: 13px;
           font-size: 13px;
-          border: solid 1px $gray-300;
         }
         }
       }
       }
     }
     }

+ 9 - 4
packages/app/src/styles/_subnav.scss

@@ -137,6 +137,15 @@
   }
   }
 }
 }
 
 
+/*
+ * shadow
+ */
+.grw-subnav-append-shadow-container {
+  .grw-subnav {
+    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
+  }
+}
+
 /*
 /*
  * Fixed ver
  * Fixed ver
  */
  */
@@ -145,10 +154,6 @@ $easeInOutCubic: cubic-bezier(0.65, 0, 0.35, 1);
 .grw-subnav-fixed-container {
 .grw-subnav-fixed-container {
   top: $grw-navbar-border-width;
   top: $grw-navbar-border-width;
   z-index: $zindex-sticky - 5;
   z-index: $zindex-sticky - 5;
-
-  .grw-subnav {
-    box-shadow: 0px 0px 6px 3px rgba(black, 0.15);
-  }
 }
 }
 
 
 /*
 /*

+ 1 - 1
packages/app/src/styles/theme/_apply-colors.scss

@@ -638,7 +638,7 @@ body.pathname-sidebar {
 /*
 /*
  * GROWI search result
  * GROWI search result
  */
  */
-.search-result {
+.search-result-base {
   .grw-search-page-nav {
   .grw-search-page-nav {
     background-color: $bgcolor-subnav;
     background-color: $bgcolor-subnav;
   }
   }