modify table css (#2537)

frontend/src/components/dirent-detail/detail-list-view.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import { gettext } from '../../utils/constants';
@@ -45,22 +45,20 @@ class DetailListView extends React.Component {
     let position = this.getDirentPostion();
     if (direntType === 'dir') {
       return (
-        <div className="dirent-table-container">
-          <table>
-            <tbody>
-              <tr><th width="35%"></th><td width="65%"></td></tr>
-              <tr><th>{gettext('Folder')}</th><td>{direntDetail.dir_count}</td></tr>
-              <tr><th>{gettext('File')}</th><td>{direntDetail.file_count}</td></tr>
-              <tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr>
-              <tr><th>{gettext('Position')}</th><td>{position}</td></tr>
-              <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
-            </tbody>
-          </table>
-        </div>
+        <table>
+          <tbody>
+            <tr><th width="35%"></th><td width="65%"></td></tr>
+            <tr><th>{gettext('Folder')}</th><td>{direntDetail.dir_count}</td></tr>
+            <tr><th>{gettext('File')}</th><td>{direntDetail.file_count}</td></tr>
+            <tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr>
+            <tr><th>{gettext('Position')}</th><td>{position}</td></tr>
+            <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
+          </tbody>
+        </table>
       );
     } else {
       return (
-        <div className="dirent-table-container">
+        <Fragment>
           <table>
             <tbody>
               <tr><th width="35%"></th><td width="65%"></td></tr>
@@ -93,7 +91,7 @@ class DetailListView extends React.Component {
               onFileTagChanged={this.props.onFileTagChanged}
             />
           }
-        </div>
+        </Fragment>
       );
     }
   }

frontend/src/components/dirent-detail/dirent-details.js

@@ -81,14 +81,16 @@ class DirentDetail extends React.Component {
             <img src={dirent.type === 'dir' ? serviceUrl + '/media/img/folder-192.png' : serviceUrl + '/media/img/file/192/txt.png'} alt="icon"></img>
           </div>
           {this.state.direntDetail && 
-            <DetailListView 
-              repo={this.state.repo}
-              direntPath={this.props.direntPath}
-              direntType={this.state.direntType}
-              direntDetail={this.state.direntDetail} 
-              fileTagList={this.state.fileTagList}
-              onFileTagChanged={this.props.onFileTagChanged}
-            />
+            <div className="dirent-table-container">
+              <DetailListView 
+                repo={this.state.repo}
+                direntPath={this.props.direntPath}
+                direntType={this.state.direntType}
+                direntDetail={this.state.direntDetail} 
+                fileTagList={this.state.fileTagList}
+                onFileTagChanged={this.props.onFileTagChanged}
+              />
+            </div>
           }
         </div>
       </div>

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, repoID } from '../../utils/constants';
 import URLDecorator from '../../utils/url-decorator';
@@ -140,7 +140,7 @@ class DirentListView extends React.Component {
     }
 
     return (
-      <div className="table-container">
+      <Fragment>
         <table>
           <thead>
             <tr>
@@ -202,7 +202,7 @@ class DirentListView extends React.Component {
             onCancelCopy={this.onCancelCopy} 
           />
         }
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/components/draft-list-view/draft-list-view.js

@@ -14,32 +14,30 @@ class DraftListView extends React.Component {
   render() {
     let drafts = this.props.draftList;
     return (
-      <div className="table-container">
-        <table>
-          <thead>
-            <tr>
-              <th style={{width: '4%'}}>{/*img*/}</th>
-              <th style={{width: '46%'}}>{gettext('Name')}</th>
-              <th style={{width: '20%'}}>{gettext('Library')}</th>
-              <th style={{width: '10%'}}>{gettext('Review')}</th>
-              <th style={{width: '10%'}}>{gettext('Last Update')}</th>
-              <th style={{width: '10%'}}></th>
-            </tr>
-          </thead>
-          <tbody>
-            { drafts && drafts.map((draft) => {
-              return (
-                <DraftListItem 
-                  key={draft.id} 
-                  draft={draft} 
-                  onMenuToggleClick={this.props.onMenuToggleClick} 
-                  isItemFreezed={this.props.isItemFreezed}
-                />
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+      <table>
+        <thead>
+          <tr>
+            <th style={{width: '4%'}}>{/*img*/}</th>
+            <th style={{width: '46%'}}>{gettext('Name')}</th>
+            <th style={{width: '20%'}}>{gettext('Library')}</th>
+            <th style={{width: '10%'}}>{gettext('Review')}</th>
+            <th style={{width: '10%'}}>{gettext('Last Update')}</th>
+            <th style={{width: '10%'}}></th>
+          </tr>
+        </thead>
+        <tbody>
+          { drafts && drafts.map((draft) => {
+            return (
+              <DraftListItem 
+                key={draft.id} 
+                draft={draft} 
+                onMenuToggleClick={this.props.onMenuToggleClick} 
+                isItemFreezed={this.props.isItemFreezed}
+              />
+            );
+          })}
+        </tbody>
+      </table>
     );
   }
 }

frontend/src/components/review-list-view/review-list-view.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Nav, NavItem, NavLink } from 'reactstrap';
 import classnames from 'classnames';
@@ -26,7 +26,7 @@ class ReviewListView extends React.Component {
   render() {
     let items = this.props.itemsList;
     return (
-      <div className="table-container">
+      <Fragment>
         <Nav tabs>
           <NavItem>
             <NavLink
@@ -76,7 +76,7 @@ class ReviewListView extends React.Component {
             })}
           </tbody>
         </table>
-      </div>
+      </Fragment>
     );
   }
 }

frontend/src/components/tree-dir-view/tree-dir-view.js

@@ -15,25 +15,23 @@ class TreeDirView extends React.Component {
     let children = node.hasChildren() ? node.children : null;
 
     return (
-      <div className="table-container">
-        <table>
-          <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>
-          </thead>
-          <tbody>
-            {children && children.map((node, index) => {
-              return (
-                <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
+      <table>
+        <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>
+        </thead>
+        <tbody>
+          {children && children.map((node, index) => {
+            return (
+              <TreeDirList key={index} node={node} onMainNodeClick={this.props.onMainNodeClick}/>
+            );
+          })}
+        </tbody>
+      </table>
     );
   }
 }