Optimize wiki style (#5223)

* optimize style

* repair code bug

* optimize code

frontend/src/css/layout.css

@@ -139,10 +139,6 @@
   padding: 40px;
 }
 
-.wiki-main-panel .cur-view-content .article {
-  padding: 0 10px;
-}
-
 .cur-view-content .hd {
   padding-bottom: 0;
   margin-bottom: .5em;

frontend/src/css/wiki.css

@@ -43,6 +43,12 @@
   margin-top: 14px;
 }
 
+.wiki-pages-container .wiki-index-page {
+  margin-top: 20px;
+  margin-left: 2rem;
+  color: #eb8205;
+}
+
 .wiki-md-viewer-rendered-content {
   padding: 30px 0 0;
 }
@@ -72,14 +78,22 @@ img[src=""] {
 }
 
 .cur-view-content .wiki-page-container {
-  margin: -0.625rem -1rem -1.25rem;
-  padding: 0.625rem 1rem 1.25rem;
+  margin: 0 -1rem -1.25rem;
+  padding: 30px 1rem 1.25rem;
   display: flex;
   flex: 1;
   padding-left: 30px;
   overflow-y: auto;
 }
 
+.wiki-main-panel .cur-view-content .article {
+  padding: 0 10px;
+}
+
+.wiki-main-panel .cur-view-content .article h1 {
+  margin-top: 0;
+}
+
 .cur-view-content .wiki-page-container .outline-h2,
 .cur-view-content .wiki-page-container .outline-h3 {
   height: 24px;
@@ -106,10 +120,10 @@ img[src=""] {
   padding-right: 30px;
 }
 
-.cur-view-content .markdown-outline {
+.cur-view-content .wiki-page-content .seafile-markdown-outline {
   position: fixed;
   padding-right: 1rem;
-  top: 97px;
+  top: 79px;
   right: 0;
   width: 200px;
   overflow: hidden;

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

@@ -119,12 +119,6 @@ class MainPanel extends Component {
           )}
         </div>
         <div className="main-panel-center">
-          <div className="cur-view-path">
-            <div className="path-container">
-              <a href={siteRoot + 'published/' + slug} className="normal">{slug}</a>
-              {this.renderNavPath()}
-            </div>
-          </div>
           <div className={`cur-view-content ${isViewingFile ? 'o-hidden' : ''}`}>
             {!this.props.pathExist && errMessage}
             {this.props.pathExist && this.props.isDataLoading && <Loading />}

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

@@ -30,10 +30,8 @@ class SidePanel extends Component {
   renderIndexView = () => {
     return (
       <Fragment>
-        <h3 className="wiki-pages-heading">
-          {gettext('Contents')}
-        </h3>
         <div className="wiki-pages-container">
+          <div className='wiki-index-page'>{gettext('Index')}</div>
           <IndexContentViewer
             indexContent={this.props.indexContent}
             onLinkClick={this.props.onLinkClick}
@@ -46,7 +44,6 @@ class SidePanel extends Component {
   renderTreeView = () => {
     return (
       <Fragment>
-        <h3 className="wiki-pages-heading">{gettext('Contents')}</h3>
         <div className="wiki-pages-container">
           {this.props.treeData && (
             <TreeView

frontend/src/wiki.js

@@ -122,6 +122,7 @@ class Wiki extends Component {
   }
 
   showDir = (dirPath) => {
+    this.removePythonWrapper();
     this.loadDirentList(dirPath);
 
     // update location url

media/css/seahub_react.css

@@ -1226,7 +1226,8 @@ a.table-sort-op:hover {
     right: 0;
     bottom: 0;
     left: 20%;
-    top: 90px;
+    top: 49px;
+    padding: 30px 16px 20px 30px;
     z-index: 2;
     background: #fff;
     overflow: auto;
@@ -1235,18 +1236,27 @@ a.table-sort-op:hover {
 
 #wiki-file-content .article {
     margin-right: 200px;
-    padding: 10px 30px 20px;
+    padding-left: 10px;
+    padding-right: 40px;
+}
+
+#wiki-file-content .article h1 {
+    margin-top: 0;
 }
 
 #wiki-file-content .seafile-markdown-outline {
     position: fixed;
-    top: 97px;
+    top: 79px;
     right: 0;
     width: 200px;
     overflow: auto;
     height: 80%;
 }
 
+#wiki-file-content .seafile-markdown-outline .seafile-editor-outline {
+    padding-right: 16px;
+}
+
 @media (max-width: 767px) {
     #wiki-file-content {
         left: 0;