fix mobile style (#3567)

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import CommonToolbar from './common-toolbar';
 import { Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
@@ -24,9 +25,16 @@ class GroupsToolbar extends React.Component {
         <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 my-1" onClick={this.props.toggleAddGroupModal}>
+            <MediaQuery query="(min-width: 768px)">
-              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
+              <Button color="btn btn-secondary operation-item" onClick={this.props.toggleAddGroupModal}>
-            </Button>
+                <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
+              </Button>
+            </MediaQuery>
+            <MediaQuery query="(max-width: 767.8px)">
+              <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>
+            </MediaQuery>
           </div>
         </div>
         <CommonToolbar searchPlaceholder={this.props.searchPlaceholder} onSearchedClick={onSearchedClick}/>

frontend/src/components/wiki-markdown-viewer.js

@@ -234,9 +234,11 @@ class WikiMarkdownViewer extends React.Component {
     if (this.props.isFileLoading) {
       return <Loading />;
     }
+    // In dir-column-file repoID is one of props, width is 100%; In wiki-viewer repoID is not props, width isn't 100%
+    let contentClassName = `${this.props.repoID ? contentClass + ' w-100' : contentClass}`
     return (
       <div ref={this.markdownContainer} className="wiki-page-container" onScroll={this.onScrollHandler.bind(this)}>
-        <div className={contentClass}>
+        <div className={contentClassName}>
           {this.props.children}
           {this.renderMarkdown()}
           {this.props.isWiki && this.renderRelatedFiles()}

frontend/src/css/wiki.css

@@ -101,7 +101,7 @@ img[src=""] {
     width: 100%;
     padding-right: 0;
   }
-  .cur-view-content .markdown-outline {
+  .cur-view-content .seafile-markdown-outline {
     display: none;
   }
 }

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

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cookie from 'react-cookies';
+import MediaQuery from 'react-responsive';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl, canAddPublicRepo } from '../../utils/constants';
@@ -174,9 +175,16 @@ 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 my-1'>
+                  <MediaQuery query="(min-width: 768px)">
-                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
+                    <DropdownToggle className='btn btn-secondary operation-item'>
-                  </DropdownToggle>
+                      <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
+                    </DropdownToggle>
+                  </MediaQuery>
+                  <MediaQuery query="(max-width: 767.8px)">
+                    <DropdownToggle className='btn btn-secondary operation-item my-1'>
+                      <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
+                    </DropdownToggle>
+                  </MediaQuery>
                   <DropdownMenu>
                     <DropdownItem onClick={this.onSelectRepoToggle}>{gettext('Share existing libraries')}</DropdownItem>
                     <DropdownItem onClick={this.onCreateRepoToggle}>{gettext('New Library')}</DropdownItem>

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

@@ -1,5 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import { gettext, repoID, slug, siteRoot, username } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
@@ -78,9 +79,14 @@ class MainPanel extends Component {
             <Fragment>
               <div className="cur-view-toolbar">
                 <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title="Side Nav Menu" onClick={this.onMenuClick}></span>
-                {this.props.permission === 'rw' && (
+                <MediaQuery query="(min-width: 768px)">
-                  <button className="btn btn-secondary operation-item my-1" title="Edit" onClick={this.onEditClick}>{gettext('Edit')}</button>
+                  {this.props.permission === 'rw' &&
-                )}
+                    <button className="btn btn-secondary operation-item" title="Edit" onClick={this.onEditClick}>{gettext('Edit')}</button>}
+                </MediaQuery>
+                <MediaQuery query="(max-width: 767.8px)">
+                  {this.props.permission === 'rw' &&
+                    <button className="btn btn-secondary operation-item my-1" title="Edit" onClick={this.onEditClick}>{gettext('Edit')}</button>}
+                </MediaQuery>
               </div>
               <CommonToolbar 
                 repoID={repoID}

frontend/src/pages/wikis/wikis.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'reactstrap';
+import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, loginUrl, canPublishRepo } from '../../utils/constants';
 import toaster from '../../components/toast';
@@ -128,11 +129,14 @@ class Wikis extends Component {
           <div className="cur-view-toolbar">
             <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 &&
+              {canPublishRepo && <Fragment>
-                <Button className="btn btn-secondary operation-item my-1" onClick={this.onSelectToggle}>
+                <MediaQuery query="(min-width: 768px)">
-                  {gettext('Publish a Library')}
+                  <Button className="btn btn-secondary operation-item" onClick={this.onSelectToggle}>{gettext('Publish a Library')}</Button>
-                </Button>
+                </MediaQuery>
-              }
+                <MediaQuery query="(max-width: 767.8px)">
+                  <Button className="btn btn-secondary operation-item my-1" onClick={this.onSelectToggle}>{gettext('Publish a Library')}</Button>
+                </MediaQuery>
+              </Fragment>}
             </div>
           </div>
           <CommonToolbar onSearchedClick={this.props.onSearchedClick} />