Merge branch '7.0'

frontend/src/components/cur-dir-path/dir-path.js

@@ -43,10 +43,10 @@ class DirPath extends React.Component {
       } else {
         nodePath += '/' + item;
         return (
-          <span key={index} >
+          <Fragment key={index} >
             <span className="path-split">/</span>
             <a className="path-link" data-path={nodePath} onClick={this.onPathClick}>{item}</a>
-          </span>
+          </Fragment>
         );
       }
     });

frontend/src/css/index-viewer.css

@@ -1,8 +1,9 @@
 .wiki-nav-content {
-  margin-bottom: 5px;
+  margin-top: 18px;
 }
 .wiki-nav-content a, .wiki-nav-content span {
-  color: #333;
+  color: #4d5156;
+  font-size: 14px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -17,10 +18,10 @@
   color: #eb8205;
 }
 .switch-btn {
-  width: 1rem;
   position: absolute;
   left: 0;
-  top: 0;
+  top: 4px;
   color: #c0c0c0;
   cursor: pointer;
+  font-size: 12px;
 }

frontend/src/css/layout.css

@@ -286,3 +286,20 @@ img[src=""],img:not([src]){ /* for first loading img*/
   color: #999;
 }
 
+.path-container {
+  display: flex;
+  word-break: keep-all;
+  width: 90%;
+}
+.path-container a {
+  max-height: 50px;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+} 
+.path-container span, .path-container a {
+  flex-shrink: 1;
+} 
+.path-container span:first-child, .path-container span:last-child {
+  flex-shrink: 0;
+} 

frontend/src/css/wiki.css

@@ -4,18 +4,18 @@
   flex-direction:column;
   overflow:hidden; /* for ff */
   border-right:1px solid #eee;
-  background: #f5f7fa;
 }
 
 .wiki-pages-heading {
   position: relative;
   font-size: 1rem;
   font-weight: normal;
-  text-align:center;
-  padding:.5rem 0rem;
+  padding: 0.5rem 0 0.5rem 2rem;
   border-bottom: 1px solid #e8e8e8;
   line-height: 1.5;
-  height:40px;
+  height: 38px;
+  background-color: #f9f9f9;
+  margin-bottom: 0;
 }
 .heading-icon {
   position: absolute;
@@ -72,12 +72,33 @@ img[src=""] {
   padding: 0.625rem 1rem 1.25rem;
   display: flex;
   flex: 1;
-  overflow: auto;
+  padding-left: 30px;
+}
+
+.cur-view-content .wiki-page-container .outline-h2,
+.cur-view-content .wiki-page-container .outline-h3 {
+  height: 24px;
+  font-size: 12px;
+  color: #4d5156;
+}
+
+.cur-view-content .wiki-page-container .outline-h2.active,
+.cur-view-content .wiki-page-container .outline-h3.active { 
+  color: #eb8205;
+}
+
+.cur-view-content .wiki-page-container .seafile-markdown-outline {
+  overflow-y: hidden;
+  margin-right: 10px;
+}
+
+.cur-view-content .wiki-page-container .seafile-markdown-outline:hover {
+  overflow-y: auto;
 }
 
 .cur-view-content .wiki-page-content {
-  width: calc(100% - 160px);
-  padding-right: 40px;
+  width: calc(100% - 200px);
+  padding-right: 30px;
 }
 
 .cur-view-content .markdown-outline {

frontend/src/pages/wiki/main-panel.js

@@ -57,7 +57,7 @@ class MainPanel extends Component {
       } else {
         nodePath += '/' + item;
         return (
-          <span key={index} >
+          <Fragment key={index} >
             <span className="path-split">/</span>
             <a 
               className="path-link" 
@@ -65,7 +65,7 @@ class MainPanel extends Component {
               onClick={this.onMainNavBarClick}>
               {item}
             </a>
-          </span>
+          </Fragment>
         );
       }
     });
@@ -116,7 +116,7 @@ class MainPanel extends Component {
         </div>
         <div className="main-panel-center">
           <div className="cur-view-path">
-            <div className="path-containter">
+            <div className="path-container">
               <a href={siteRoot + 'published/' + slug} className="normal">{slug}</a>
               {this.renderNavPath()}
             </div>