[wiki] dir view: redesigned the UI for mobile; fixed 'can not scroll' bug (#4352)

frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js

@@ -41,7 +41,8 @@ class WikiDirListItem extends React.Component {
     let href = siteRoot + 'published' + Utils.joinPath(path, dirent.name);
     let iconUrl = Utils.getDirentIcon(dirent);
 
-    return (
+    const isDesktop = Utils.isDesktop();
+    return isDesktop ? (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onContextMenu={this.onContextMenu}>
         <td className="text-center">
           <img src={iconUrl} width="24" alt="" />
@@ -50,7 +51,19 @@ class WikiDirListItem extends React.Component {
           <a href={href} onClick={this.onDirentClick}>{dirent.name}</a>
         </td>
         <td>{dirent.size}</td>
-        <td title={dirent.mtime_relative}>{dirent.mtime_relative}</td>
+        <td>{dirent.mtime_relative}</td>
+      </tr>
+    ) : (
+      <tr>
+        <td className="text-center">
+          <img src={iconUrl} width="24" alt="" />
+        </td>
+        <td>
+          <a href={href} onClick={this.onDirentClick}>{dirent.name}</a>
+          <br />
+          <span className="item-meta-info">{dirent.size}</span>
+          <span className="item-meta-info">{dirent.mtime_relative}</span>
+        </td>
       </tr>
     );
   }

frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 import WikiDirListItem from './wiki-dir-list-item';
 
 const propTypes = {
@@ -12,15 +13,23 @@ const propTypes = {
 class WikiDirListView extends React.Component {
 
   render() {
+    const isDesktop = Utils.isDesktop();
     return (
-      <table>
+      <table className={`table-hover ${isDesktop ? '': 'table-thead-hidden'}`}>
         <thead>
-          <tr>
+          {isDesktop ? (
-            <th style={{width: '4%'}}></th>
+            <tr>
-            <th style={{width: '66%'}}>{gettext('Name')}</th>
+              <th style={{width: '4%'}}></th>
-            <th style={{width: '15%'}}>{gettext('Size')}</th>
+              <th style={{width: '66%'}}>{gettext('Name')}</th>
-            <th style={{width: '15%'}}>{gettext('Last Update')}</th>
+              <th style={{width: '15%'}}>{gettext('Size')}</th>
-          </tr>
+              <th style={{width: '15%'}}>{gettext('Last Update')}</th>
+            </tr>
+          ) : (
+            <tr>
+              <th width="12%"></th>
+              <th width="88%"></th>
+            </tr>
+          )}
         </thead>
         <tbody>
           {this.props.direntList.length !== 0 && this.props.direntList.map((dirent, index) => {

frontend/src/css/wiki.css

@@ -65,12 +65,6 @@ img[src=""] {
   min-height: 0;
 }
 
-.cur-view-content {
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
 .cur-view-content .wiki-page-container {
   margin: -0.625rem -1rem -1.25rem;
   padding: 0.625rem 1rem 1.25rem;

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

@@ -77,6 +77,8 @@ class MainPanel extends Component {
 
   render() {
     const errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
+
+    const isViewingFile = this.props.pathExist && !this.props.isDataLoading && this.props.isViewFile;
     return (
       <div className="main-panel wiki-main-panel o-hidden">
         <div className={`main-panel-north panel-top ${this.props.permission === 'rw' ? 'border-left-show' : ''}`}>
@@ -120,10 +122,10 @@ class MainPanel extends Component {
               {this.renderNavPath()}
             </div>
           </div>
-          <div className="cur-view-content">
+          <div className={`cur-view-content ${isViewingFile ? 'o-hidden' : ''}`}>
             {!this.props.pathExist && errMessage}
             {this.props.pathExist && this.props.isDataLoading && <Loading />}
-            {(this.props.pathExist && !this.props.isDataLoading && this.props.isViewFile) && (
+            {isViewingFile && (
               <WikiMarkdownViewer
                 markdownContent={this.props.content}
                 isFileLoading={this.props.isDataLoading}