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,7 +45,6 @@ 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>
@@ -56,11 +55,10 @@ class DetailListView extends React.Component {
             <tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
           </tbody>
         </table>
-        </div>
       );
     } 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,6 +81,7 @@ 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 && 
+            <div className="dirent-table-container">
               <DetailListView 
                 repo={this.state.repo}
                 direntPath={this.props.direntPath}
@@ -89,6 +90,7 @@ class DirentDetail extends React.Component {
                 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,7 +14,6 @@ class DraftListView extends React.Component {
   render() {
     let drafts = this.props.draftList;
     return (
-      <div className="table-container">
       <table>
         <thead>
           <tr>
@@ -39,7 +38,6 @@ class DraftListView extends React.Component {
           })}
         </tbody>
       </table>
-      </div>
     );
   }
 }

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,7 +15,6 @@ class TreeDirView extends React.Component {
     let children = node.hasChildren() ? node.children : null;
 
     return (
-      <div className="table-container">
       <table>
         <thead>
           <tr>
@@ -33,7 +32,6 @@ class TreeDirView extends React.Component {
           })}
         </tbody>
       </table>
-      </div>
     );
   }
 }

frontend/src/css/layout.css

@@ -95,7 +95,7 @@
 }
 
 .cur-view-content {
-  padding: 0;
+  padding: 0.625rem 1rem 1.25rem;
   height: calc(100% - 40px);
   flex: 1;
   min-height: 0;

frontend/src/css/react-resumable.css

@@ -1,13 +0,0 @@
-.sf-resumable-input-container {
-  display: flex;
-  flex: 1;
-}
-
-.sf-resumable-input-container .resumable-input {
-  display: none;
-}
-
-.sf-resumable-input-container .input-placeholder {
-  display: flex;
-  flex: 1;
-}

frontend/src/css/wiki.css

@@ -58,7 +58,7 @@ img[src=""] {
 }
 
 .cur-view-content .markdown-container{
-  padding: 10px 40px 20px;
+  padding: 0 1.5rem;
   display: flex;
   flex: 1;
   overflow: auto;
@@ -71,7 +71,7 @@ img[src=""] {
 
 .cur-view-content .markdown-outline {
   position: fixed;
-  padding-right: 18px;
+  padding-right: 1rem;
   top: 97px;
   right: 0;
   width: 200px;
@@ -84,7 +84,7 @@ img[src=""] {
 
 @media (max-width: 991.98px) {
   .cur-view-content .markdown-container {
-    padding-right: 40px;
+    padding-right: 1.5rem;
   }
   .cur-view-content .markdown-content {
     width: 100%;

frontend/src/pages/linked-devices/linked-devices.js

@@ -38,7 +38,7 @@ class Content extends Component {
       );
 
       return (
-        <table className="table table-hover table-vcenter">
+        <table>
           {window.innerWidth >= 768 ? desktopThead : mobileThead}
           <TableBody items={items} />
         </table>
@@ -201,11 +201,9 @@ class LinkedDevices extends Component {
           <h3 className="sf-heading">{gettext('Linked Devices')}</h3>
         </div>
         <div className="cur-view-content">
-          <div className="table-container">
           <Content data={this.state} />
         </div>
       </div>
-      </div>
     );
   }
 }

frontend/src/pages/starred/starred.js

@@ -35,7 +35,7 @@ class Content extends Component {
       );
 
       return ( 
-        <table className="table table-hover table-vcenter">
+        <table>
           {window.innerWidth >= 768 ? desktopThead : mobileThead}
           <TableBody items={items} />
         </table>
@@ -267,11 +267,9 @@ class Starred extends Component {
           <h3 className="sf-heading">{gettext('Favorites')}</h3>
         </div>
         <div className="cur-view-content">
-          <div className="table-container">
           <Content data={this.state} />
         </div>
       </div>
-      </div>
     );
   }
 }

media/css/seahub_react.css

@@ -752,7 +752,7 @@ a.op-icon:focus {
 
 /* begin path navigation */
 .path-containter { /* for the real path */
-    font-size:16px;
+    font-size: 1rem;
     word-break: break-all;
 }
 .path-split {
@@ -771,46 +771,53 @@ a.op-icon:focus {
 /* end path navigation */
 
 /* begin main table list style */
-.table-container {
+table {
-    flex: 1;
-    padding: 10px 16px 20px;
-    overflow: auto;
-}
-.table-container table {
     width: 100%;
     table-layout: fixed;
 }
-.table-container table th {
+table th, table td {
+    padding: 5px 3px;
+    border-bottom: 1px solid #eee;
+}
+table th {
+    padding-top: 1rem;
     text-align: left;
     font-weight: normal;
     font-size: 13px;
     line-height: 1.6;
     color: #9c9c9c;
 }
-.table-container table td {
+table td {
     color: #333;
     font-size: 14px;
     word-break: break-all;
 }
-.table-container table th, .table-container table td {
+
-    padding: 5px 3px;
+table .select,
-    border-bottom: 1px solid #eee;
+table .star,
-}
+table .icon {
-.table-container table th {
-    padding-top: 1rem;
-}
-.table-container table .select,
-.table-container table .star,
-.table-container table .icon {
     position: relative;
     text-align: center;
 }
 
-.table-container table .star {
+table .icon img {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+table .dir-icon {
+    position: relative;
+}
+
+table .star {
     cursor: pointer;
 }
 
-.table-container table .rename-container input {
+table .star .empty {
+    color: #d0d0d0;
+}
+
+table .rename-container input {
     box-sizing: content-box;
     padding: 2px 3px;
     width: 16.25rem;
@@ -822,14 +829,14 @@ a.op-icon:focus {
     border: 1px solid #ccc;
 }
 
-.table-container table .rename-container input:focus {
+table .rename-container input:focus {
     background-color: #fff;
     border-color: #1991eb;
     outline: 0;
     box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }
 
-.table-container table .rename-container button {
+table .rename-container button {
     margin-left: 0.25rem;
     padding: 5px 6px;
     font-size: 1rem;
@@ -838,25 +845,11 @@ a.op-icon:focus {
     min-width: 0;
 }
 
-.table-container table .rename-container .confirm {
+table .rename-container .confirm {
     color: green;
 }
 
-
+table .dir-icon .locked {
-.table-container table .star .empty {
-    color: #d0d0d0;
-}
-
-.table-container table .icon img {
-    width: 1.5rem;
-    height: 1.5rem;
-}
-
-.table-container table .dir-icon {
-    position: relative;
-}
-
-.table-container table .dir-icon .locked {
     position: absolute;
     width: 1rem;
     height: 1rem;
@@ -864,14 +857,14 @@ a.op-icon:focus {
     left: 50%;
 }
 
-.table-container table .menu-toggle {
+table .menu-toggle {
     text-align: center;
     cursor: pointer;
 } 
+
 .tr-highlight {
     background-color: #f8f8f8;
 }
-  
 /* end table list style */
   
 /* begin dropdown-menu style */