From e1e9ca8bd14ecfd6e94b7d8a89c87c264279d626 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Wed, 29 May 2019 11:48:00 +0800
Subject: [PATCH] fix mobile style (#3567)

---
 frontend/src/components/toolbar/groups-toolbar.js  | 14 +++++++++++---
 frontend/src/components/wiki-markdown-viewer.js    |  4 +++-
 frontend/src/css/wiki.css                          |  2 +-
 .../pages/shared-with-all/public-shared-view.js    | 14 +++++++++++---
 frontend/src/pages/wiki/main-panel.js              | 12 +++++++++---
 frontend/src/pages/wikis/wikis.js                  | 14 +++++++++-----
 6 files changed, 44 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/toolbar/groups-toolbar.js b/frontend/src/components/toolbar/groups-toolbar.js
index a3720d2bd3..bc236b1d1f 100644
--- a/frontend/src/components/toolbar/groups-toolbar.js
+++ b/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}>
-              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Group')}
-            </Button>
+            <MediaQuery query="(min-width: 768px)">
+              <Button color="btn btn-secondary operation-item" onClick={this.props.toggleAddGroupModal}>
+                <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}/>
diff --git a/frontend/src/components/wiki-markdown-viewer.js b/frontend/src/components/wiki-markdown-viewer.js
index ac391851f4..a6cc0c4103 100644
--- a/frontend/src/components/wiki-markdown-viewer.js
+++ b/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()}
diff --git a/frontend/src/css/wiki.css b/frontend/src/css/wiki.css
index 3a2d4c8921..240cf9f2d6 100644
--- a/frontend/src/css/wiki.css
+++ b/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;
   }
 }
diff --git a/frontend/src/pages/shared-with-all/public-shared-view.js b/frontend/src/pages/shared-with-all/public-shared-view.js
index 63ad0f9fce..6bcaee8991 100644
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/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'>
-                    <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('Add Library')}
-                  </DropdownToggle>
+                  <MediaQuery query="(min-width: 768px)">
+                    <DropdownToggle className='btn btn-secondary operation-item'>
+                      <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>
diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js
index f3135d2140..e3fc05a324 100644
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/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' && (
-                  <button className="btn btn-secondary operation-item my-1" title="Edit" onClick={this.onEditClick}>{gettext('Edit')}</button>
-                )}
+                <MediaQuery query="(min-width: 768px)">
+                  {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}
diff --git a/frontend/src/pages/wikis/wikis.js b/frontend/src/pages/wikis/wikis.js
index 30bde9c625..e612c8f1fe 100644
--- a/frontend/src/pages/wikis/wikis.js
+++ b/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 &&
-                <Button className="btn btn-secondary operation-item my-1" onClick={this.onSelectToggle}>
-                  {gettext('Publish a Library')}
-                </Button>
-              }
+              {canPublishRepo && <Fragment>
+                <MediaQuery query="(min-width: 768px)">
+                  <Button className="btn btn-secondary operation-item" onClick={this.onSelectToggle}>{gettext('Publish a Library')}</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} />