retrive the tutorial hight in the tutorial header page.

diff --git a/src/features/shared/components/PageTitle/PageTitle.jsx b/src/features/shared/components/PageTitle/PageTitle.jsx
index 56972e4..efdf0e3 100644 (file)
--- a/src/features/shared/components/PageTitle/PageTitle.jsx
+++ b/src/features/shared/components/PageTitle/PageTitle.jsx
@@ -17,7 +17,7 @@ class PageTitle extends React.Component {
 
     return(
       <div className={componentClassNames(this)}>
-        <div className={className}>
+        <div className={className} style={{marginTop: this.props.margintop+'px'}}>
           <div className={styles.navigation}>
             <ul className={styles.crumbs}>
               {this.props.breadcrumbs.map(crumb =>

diff --git a/src/features/shared/components/PageTitle/PageTitle.scss b/src/features/shared/components/PageTitle/PageTitle.scss
index e83c6d7..14f5dfd 100644 (file)
--- a/src/features/shared/components/PageTitle/PageTitle.scss
+++ b/src/features/shared/components/PageTitle/PageTitle.scss
@@ -7,6 +7,8 @@
   align-items: center;
   left: $sidebar-width;
   z-index: 100;
+  position:fixed;
+  right:0;
   code {
     display: inline-block;
     font-size: $font-size-code;

diff --git a/src/features/tutorial/components/TutorialHeader/TutorialHeader.jsx b/src/features/tutorial/components/TutorialHeader/TutorialHeader.jsx
index ef7a9c7..4363e84 100644 (file)
--- a/src/features/tutorial/components/TutorialHeader/TutorialHeader.jsx
+++ b/src/features/tutorial/components/TutorialHeader/TutorialHeader.jsx
@@ -3,6 +3,23 @@ import { Link } from 'react-router'
 import styles from './TutorialHeader.scss'
 
 class TutorialHeader extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      tutorialHeight: 0
+    }
+    this.handleTutorialHeight = this.handleTutorialHeight.bind(this)
+  }
+
+  componentDidUpdate() {
+    this.handleTutorialHeight()
+  }
+
+  handleTutorialHeight() {
+    if (this.state.tutorialHeight != this.tutorialContainer.clientHeight){
+      this.setState({tutorialHeight: this.tutorialContainer.clientHeight})
+    }
+  }
 
   render() {
     if(!this.props.tutorial.isShowing || this.props.currentStep.component == 'TutorialModal'){
@@ -13,7 +30,7 @@ class TutorialHeader extends React.Component {
       )
     } else {
       return (
-        <div className={`${styles.main} ${this.props.showTutorial && styles.collapsed}`}>
+        <div className={`${styles.main} ${this.props.showTutorial && styles.collapsed}`} ref={element => this.tutorialContainer = element}>
           <div className={styles.header}>
             {this.props.currentStep.title}
             <div className={styles.skip}>

diff --git a/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss b/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss
index 8ee7dc8..67b57cc 100644 (file)
--- a/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss
+++ b/src/features/tutorial/components/TutorialHeader/TutorialHeader.scss
@@ -2,6 +2,10 @@
   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.25);
   margin-bottom: $gutter-size/2;
   border-bottom: solid $highlight-tutorial 1px;
+  position: fixed;
+  left: $sidebar-width;
+  right: 0;
+  z-index: 101;
 }
 
 .collapsed {