button align (#3555)

frontend/src/components/index-viewer.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { repoID, slug, serviceURL, isPublicWiki } from '../utils/constants';
 import { Utils } from '../utils/utils';
-import { Value } from 'slate';
 import { deserialize } from '@seafile/seafile-editor/dist/utils/slate2markdown';
 import'../css/index-viewer.css';
 
@@ -231,6 +230,7 @@ IndexContentViewer.propTypes = viewerPropTypes;
 const FolderItemPropTypes = {
   node: PropTypes.object.isRequired,
   bindClickEvent: PropTypes.func.isRequired,
+  currentPath: PropTypes.string,
 };
 
 class FolderItem extends React.Component {
@@ -249,7 +249,7 @@ class FolderItem extends React.Component {
   }
 
   renderLink = (node) => {
-    const className = node.path === this.props.currentPath ? 'wiki-nav-content wiki-nav-content-highlight' : 'wiki-nav-content'
+    const className = node.path === this.props.currentPath ? 'wiki-nav-content wiki-nav-content-highlight' : 'wiki-nav-content';
     if (node.href && node.name) {
       return <div className={className}><a href={node.href} data-path={node.path}>{node.name}</a></div>;
     } else if (node.name) {

frontend/src/components/toolbar/groups-toolbar.js

@@ -22,14 +22,12 @@ class GroupsToolbar extends React.Component {
     return (
       <div className="main-panel-north border-left-show">
         <div className="cur-view-toolbar">
+          <span title="Side Nav Menu" onClick={onShowSidePanel} className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none"></span>
           <div className="operation">
-            <Button color="btn btn-secondary operation-item" onClick={this.props.toggleAddGroupModal}>
+            <Button color="btn btn-secondary operation-item my-1" onClick={this.props.toggleAddGroupModal}>
               <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
             </Button>
           </div>
-          <span title="Side Nav Menu" onClick={onShowSidePanel}
-            className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none">
-          </span>
         </div>
         <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>
       </div>

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import { gettext } from '../../utils/constants';
 import WikiListItem from './wiki-list-item';
 
@@ -38,8 +39,14 @@ class WikiListView extends Component {
         <table>
           <thead>
             <tr>
+              <MediaQuery query="(min-width: 768px)">
                 <th width="4%"></th>
                 <th width="36%">{gettext('Name')}</th>
+              </MediaQuery>
+              <MediaQuery query="(max-width: 768px)">
+                <th width="10%"></th>
+                <th width="30%">{gettext('Name')}</th>
+              </MediaQuery>
               <th width="25%">{gettext('Owner')}</th>
               <th width="25%">{gettext('Last Update')}</th>
               <th width="10%">{/* operation */}</th>

frontend/src/pages/shared-with-all/public-shared-view.js

@@ -174,7 +174,7 @@ class PublicSharedView extends React.Component {
               <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
               <div className="operation">
                 <Dropdown isOpen={this.state.isCreateMenuShow} toggle={this.onAddRepoToggle}>
-                  <DropdownToggle className='btn btn-secondary operation-item'>
+                  <DropdownToggle className='btn btn-secondary operation-item my-1'>
                     <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
                   </DropdownToggle>
                   <DropdownMenu>

frontend/src/pages/wikis/wikis.js

@@ -129,7 +129,7 @@ class Wikis extends Component {
             <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
             <div className="operation">
               {canPublishRepo &&
-                <Button className="btn btn-secondary operation-item" onClick={this.onSelectToggle}>
+                <Button className="btn btn-secondary operation-item my-1" onClick={this.onSelectToggle}>
                   {gettext('Publish a Library')}
                 </Button>
               }