Merge pull request #2072 from sumitdaga/mil-53-issue-2064

project details secondary toolbar fixed at top on desktop #2064

Author: gondzo

src/projects/detail/components/ProjectLayout.jsx

@@ -12,7 +12,7 @@ class ProjectViewLayout extends React.Component {
     const location = this.props.location.pathname
     const isAddPhasePage = location && (location.substr(location.lastIndexOf('/') + 1) === 'add-phase')
     return (
-      <div>
+      <div styleName="container">
         <div styleName="secondary-toolbar">
           {!isAddPhasePage && (<SecondaryToolBarContainer />)}
         </div>

src/projects/detail/components/ProjectLayout.scss

@@ -1,4 +1,22 @@
+@import '~tc-ui/src/styles/tc-includes';
+
+.container {
+
+  @media screen and (min-width: $screen-md) {
+    padding-top: 50px;
+  }
+}
+
 .secondary-toolbar {
   position: relative;
   z-index: 1;
+
+  @media  screen and (min-width: $screen-md) {
+    position: fixed;
+    top: 60px;
+    left: 0;
+    right: 0;
+    width: 100%;
+  }
 }
+

src/projects/detail/containers/DashboardContainer.jsx

@@ -97,7 +97,7 @@ class DashboardContainer extends React.Component {
           <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
-                return <Sticky top={60}>{leftArea}</Sticky>
+                return <Sticky top={110}>{leftArea}</Sticky>
               } else {
                 return leftArea
               }

src/projects/detail/containers/ProjectPlanContainer.jsx

@@ -40,7 +40,7 @@ const ProjectPlanContainer = (props) => {
         <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
           {(matches) => {
             if (matches) {
-              return <Sticky top={60}>{leftArea}</Sticky>
+              return <Sticky top={110}>{leftArea}</Sticky>
             } else {
               return leftArea
             }

src/projects/detail/containers/ScopeAndSpecificationContainer.jsx

@@ -82,7 +82,7 @@ class SpecificationContainer extends Component {
           <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
             {(matches) => {
               if (matches) {
-                return <Sticky top={60}>{leftArea}</Sticky>
+                return <Sticky top={110}>{leftArea}</Sticky>
               } else {
                 return leftArea
               }