From ec6535af8a629e998b2324b4c295547aacb87d9a Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Thu, 12 Dec 2019 22:34:53 +0800
Subject: [PATCH] [wiki] dir view: redesigned the UI for mobile; fixed 'can not
 scroll' bug (#4352)

---
 .../wiki-dir-list-view/wiki-dir-list-item.js  | 17 ++++++++++++--
 .../wiki-dir-list-view/wiki-dir-list-view.js  | 23 +++++++++++++------
 frontend/src/css/wiki.css                     |  6 -----
 frontend/src/pages/wiki/main-panel.js         |  6 +++--
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js b/frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js
index c9be38d194..4d22b63229 100644
--- a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-item.js
+++ b/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>
     );
   }
diff --git a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js b/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js
index f1069e2719..fc525bbccc 100644
--- a/frontend/src/components/wiki-dir-list-view/wiki-dir-list-view.js
+++ b/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>
-            <th style={{width: '4%'}}></th>
-            <th style={{width: '66%'}}>{gettext('Name')}</th>
-            <th style={{width: '15%'}}>{gettext('Size')}</th>
-            <th style={{width: '15%'}}>{gettext('Last Update')}</th>
-          </tr>
+          {isDesktop ? (
+            <tr>
+              <th style={{width: '4%'}}></th>
+              <th style={{width: '66%'}}>{gettext('Name')}</th>
+              <th style={{width: '15%'}}>{gettext('Size')}</th>
+              <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) => {
diff --git a/frontend/src/css/wiki.css b/frontend/src/css/wiki.css
index 274440e380..81ca40a14b 100644
--- a/frontend/src/css/wiki.css
+++ b/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;
diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js
index 59d7e07672..84e9f2e105 100644
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/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}