adaptation mobile (#2938)

* adaptation mobile

* improve style

* repair naming bug

frontend/src/components/search/search.js

@@ -1,5 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import { siteRoot } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import editorUtilities from '../../utils/editor-utilties';
@@ -22,7 +23,8 @@ class Search extends Component {
       isMaskShow: false,
       isResultShow: false,
       isResultGetted: false,
-      isCloseShow: false
+      isCloseShow: false,
+      isSearchInputShow: false, // for mobile
     };
     this.inputValue = '';
     this.source = null; // used to cancel request;
@@ -161,7 +163,8 @@ class Search extends Component {
       isCloseShow: false,
       isResultShow: false,
       isResultGetted: false,
-      resultItems: []
+      resultItems: [],
+      isSearchInputShow: false,
     });
   }
 
@@ -212,33 +215,74 @@ class Search extends Component {
     );
   }
 
+  onSearchToggle = () => {
+    this.setState({
+      isSearchInputShow: !this.state.isSearchInputShow,
+      isMaskShow: !this.state.isMaskShow,
+    });
+  }
+
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
     return (
-      <div className="search">
-        <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
-        <div className="search-container">
-          <div className="input-icon">
-            <i className="search-icon-left input-icon-addon fas fa-search"></i>
-            <input 
-              type="text" 
-              className="form-control search-input" 
-              name="query"
-              placeholder={this.props.placeholder}
-              style={style}
-              value={this.state.value}
-              onFocus={this.onFocusHandler}
-              onChange={this.onChangeHandler}
-              autoComplete="off"
-            />
-            {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+      <Fragment>
+        <MediaQuery query="(min-width: 768px)">
+          <div className="search">
+            <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
+            <div className="search-container">
+              <div className="input-icon">
+                <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                <input 
+                  type="text" 
+                  className="form-control search-input" 
+                  name="query"
+                  placeholder={this.props.placeholder}
+                  style={style}
+                  value={this.state.value}
+                  onFocus={this.onFocusHandler}
+                  onChange={this.onChangeHandler}
+                  autoComplete="off"
+                />
+                {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+              </div>
+              <div className="search-result-container">
+                {this.renderSearchResult()}
+              </div>
+            </div>
           </div>
-          <div className="search-result-container">
-            {this.renderSearchResult()}
+        </MediaQuery>
+        <MediaQuery query="(max-width: 768px)">
+          <div className="search-icon-container">
+            <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
           </div>
-        </div>
-      </div>
+          {this.state.isSearchInputShow && 
+            <div className="search">
+              <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
+              <div className="search-container">
+                <div className="input-icon">
+                  <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                  <input 
+                    type="text" 
+                    className="form-control search-input" 
+                    name="query"
+                    placeholder={this.props.placeholder}
+                    style={style}
+                    value={this.state.value}
+                    onFocus={this.onFocusHandler}
+                    onChange={this.onChangeHandler}
+                    autoComplete="off"
+                  />
+                  {this.state.isCloseShow && <i className='search-icon-right input-icon-addon fas fa-times' onClick={this.onCloseHandler}></i>}
+                </div>
+                <div className="search-result-container">
+                  {this.renderSearchResult()}
+                </div>
+              </div>
+            </div>
+          }
+        </MediaQuery>
+      </Fragment>
     );
   }
 }

frontend/src/components/toolbar/repo-view-toobar.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import MediaQuery from 'react-responsive';
 import { Link } from '@reach/router';
 import { siteRoot, gettext } from '../../utils/constants';
 import ModalPortal from '../modal-portal';
@@ -39,26 +40,31 @@ class RepoViewToolbar extends React.Component {
   render() {
     return (
       <Fragment>
-        <div className="cur-view-toolbar border-left-show">
-          <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">
-            <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
-              <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
-            </button>
-            {this.props.libraryType !== 'group' && (
-              <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
-                <DropdownToggle className='btn btn-secondary operation-item'>
-                  {gettext('More')}
-                </DropdownToggle>
-                <DropdownMenu>
-                  <DropdownItem className="link-dropdown-container">
-                    <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
-                  </DropdownItem>
-                </DropdownMenu>
-              </Dropdown>
-            )}
+          <div className="cur-view-toolbar border-left-show">
+            <span className="sf2-icon-menu side-nav-toggle hidden-md-up d-md-none" title="Side Nav Menu" onClick={this.props.onShowSidePanel}></span>
+            <MediaQuery query="(min-width: 768px)">
+              <div className="operation">
+                <button className="btn btn-secondary operation-item" title={gettext('New Library')} onClick={this.onCreateToggle}>
+                  <i className="fas fa-plus-square text-secondary mr-1"></i>{gettext('New Library')}
+                </button>
+                {this.props.libraryType !== 'group' && (
+                  <Dropdown isOpen={this.state.isOpen} toggle={this.toggleMore}>
+                    <DropdownToggle className='btn btn-secondary operation-item'>
+                      {gettext('More')}
+                    </DropdownToggle>
+                    <DropdownMenu>
+                      <DropdownItem className="link-dropdown-container">
+                        <Link className="link-dropdown-item" to={siteRoot + 'my-libs/deleted/'}>{gettext('Deleted Libraries')}</Link>
+                      </DropdownItem>
+                    </DropdownMenu>
+                  </Dropdown>
+                )}
+              </div>
+            </MediaQuery>
+            <MediaQuery query="(max-width: 768px)">
+              <span className="sf2-icon-plus mobile-toolbar-icon" title={gettext('New Library')} onClick={this.onCreateToggle}></span>
+            </MediaQuery>
           </div>
-        </div>
         {this.state.isCreateRepoDialogShow && (
           <ModalPortal>
             <CreateRepoDialog