[wiki] redesigned it for mobile (#6850)

frontend/src/pages/wiki2/index.js

@@ -253,7 +253,6 @@ class Wiki extends Component {
         <SidePanel
           isLoading={this.state.isConfigLoading}
           closeSideBar={this.state.closeSideBar}
-          onCloseSide={this.onCloseSide}
           config={this.state.config}
           updateWikiConfig={this.updateWikiConfig}
           getWikiConfig={this.getWikiConfig}
@@ -262,6 +261,7 @@ class Wiki extends Component {
           onUpdatePage={this.onUpdatePage}
         />
         <MainPanel
+          onCloseSide={this.onCloseSide}
           path={this.state.path}
           config={this.state.config}
           currentPageId={this.state.currentPageId}
@@ -275,7 +275,7 @@ class Wiki extends Component {
           isUpdateBySide={this.state.isUpdateBySide}
         />
         <MediaQuery query="(max-width: 767.8px)">
-          <Modal isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
+          <Modal zIndex="1030" isOpen={!this.state.closeSideBar} toggle={this.onCloseSide} contentClassName="d-none"></Modal>
         </MediaQuery>
       </div>
     );

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

@@ -22,6 +22,7 @@ const propTypes = {
   isUpdateBySide: PropTypes.bool,
   onUpdatePage: PropTypes.func,
   onAddWikiPage: PropTypes.func,
+  onCloseSide: PropTypes.func.isRequired
 };
 
 class MainPanel extends Component {
@@ -64,11 +65,14 @@ class MainPanel extends Component {
     return (
       <div className="wiki2-main-panel">
         <div className='wiki2-main-panel-north'>
+          <div className="d-flex align-items-center flex-fill o-hidden">
+            <i role="button" aria-label={gettext('Side Nav Menu')} onClick={this.props.onCloseSide} className="sf2-icon-menu side-nav-toggle d-md-none"></i>
             <WikiTopNav
               config={config}
               currentPageId={this.props.currentPageId}
               currentPageConfig={currentPageConfig}
             />
+          </div>
           {username && wikiPermission !== 'public' && <Account />}
         </div>
         <div className="main-panel-center">

frontend/src/pages/wiki2/side-panel.css

@@ -1,3 +1,18 @@
+@media (max-width: 767px) {
+  .wiki2-side-panel {
+    position:fixed;
+    top: 0;
+    left: -300px;
+    z-index: 1031;
+    width: 300px;
+    max-width: calc(100% - 40px);
+    height:100%;
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+  }
+}
+
 .wiki2-side-panel {
   width: 300px;
   display: flex;
@@ -21,7 +36,6 @@
 }
 
 .wiki2-side-panel .wiki2-side-panel-top .add-new-page {
-  padding: 0 4px;
   cursor: pointer;
   border-radius: 4px;
 }
@@ -53,9 +67,3 @@
   margin-top: 14px;
   padding-left: 0;
 }
-
-@media (max-width: 767px) {
-  .wiki2-side-panel {
-    z-index: 1051;
-  }
-}

frontend/src/pages/wiki2/side-panel.js

@@ -157,15 +157,19 @@ class SidePanel extends Component {
 
   render() {
     const { isLoading } = this.props;
+    const isDesktop = Utils.isDesktop();
     return (
       <div className={`wiki2-side-panel${this.props.closeSideBar ? '' : ' left-zero'}`}>
         <div className="wiki2-side-panel-top">
           <h4 className="text-truncate ml-0 mb-0" title={repoName}>{repoName}</h4>
-          {wikiPermission !== 'public' &&
+          {isDesktop && wikiPermission !== 'public' &&
             <div>
-              <div id='wiki-add-new-page' className='add-new-page' onClick={this.handleAddNewPage.bind(true)}>
+              <i
-                <i className='sf3-font sf3-font-new-page'></i>
+                id='wiki-add-new-page'
-              </div>
+                onClick={this.handleAddNewPage.bind(true)}
+                className='sf3-font sf3-font-new-page add-new-page p-1'
+              >
+              </i>
               <UncontrolledTooltip className='wiki-new-page-tooltip' target="wiki-add-new-page">
                 {gettext('New page')}
               </UncontrolledTooltip>

frontend/src/pages/wiki2/top-nav/index.css

@@ -1,11 +1,15 @@
 .wiki2-top-nav .wiki2-top-nav-item {
-  align-items: center;
   padding: 2px 6px;
+  max-width: 150px;
+}
+@media (min-width: 768px) {
+  .wiki2-top-nav .wiki2-top-nav-item {
     max-width: 300px;
+  }
 }
 
-.wiki2-top-nav>div:not(.wiki2-top-nav-item) {
+.wiki2-top-nav .item-split {
-  margin: 2px 2px 0 2px;
+  margin: 0 2px;
 }
 
 .wiki2-top-nav .wiki2-top-nav-item:hover {

frontend/src/pages/wiki2/top-nav/index.js

@@ -44,15 +44,15 @@ function WikiTopNav({ config, currentPageId }) {
   const paths = getPaths(navigation, currentPageId, pages);
 
   return (
-    <div className="wiki2-top-nav d-flex">
+    <div className="wiki2-top-nav d-flex align-items-center">
       {paths.map((item, index) => {
         return (
           <Fragment key={item.id}>
-            <div className='wiki2-top-nav-item d-flex'>
+            <div className='wiki2-top-nav-item d-flex align-items-center'>
               {item.icon ? <CustomIcon icon={item.icon} /> : <NavItemIcon symbol={'file'} disable={true} />}
-              <span className='text-truncate'>{item.name}</span>
+              <span className='text-truncate' title={item.name}>{item.name}</span>
             </div>
-            {index !== paths.length - 1 && <div>/</div>}
+            {index !== paths.length - 1 && <span className="item-split">/</span>}
           </Fragment>
         );
       })}

frontend/src/pages/wiki2/wiki-nav/pages/page-item.js

@@ -224,7 +224,7 @@ class PageItem extends Component {
                     )}
                   </div>
                 </div>
-                <div className="d-flex">
+                <div className="d-none d-md-flex">
                   {isEditMode && wikiPermission !== 'public' &&
                     <>
                       <div className="more-wiki-page-operation" onClick={this.toggleDropdown}>

frontend/src/pages/wiki2/wiki-right-header/page-cover.js

@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { UncontrolledPopover } from 'reactstrap';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import { Utils } from '../../../utils/utils';
 import { gettext, wikiPermission } from '../../../utils/constants';
 import { WIKI_COVER_LIST } from '../constant';
 
@@ -11,6 +12,7 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
 
   const [isShowCoverController, setIsShowCoverController] = useState(false);
   const popoverRef = useRef(null);
+  const isDesktop = Utils.isDesktop();
 
   const onMouseEnter = useCallback(() => {
     setIsShowCoverController(true);
@@ -51,13 +53,13 @@ function PageCover({ currentPageConfig, onUpdatePage }) {
     <>
       <div id="wiki-page-cover" className='wiki-page-cover' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         <img className='wiki-page-cover__img' alt={gettext('Cover')} src={getCoverImgUrl(currentPageConfig.cover_img_url)} />
-        <div className={classNames('wiki-page-cover__controller', { show: isShowCoverController })}>
+        <div className={classNames('wiki-page-cover__controller', { show: isShowCoverController, 'd-none': !isDesktop })}>
           {wikiPermission !== 'public' &&
             <div className='wiki-cover-controller-btn' id='wiki-change-cover-btn'>{gettext('Change cover')}</div>
           }
         </div>
       </div>
-      {wikiPermission !== 'public' &&
+      {isDesktop && wikiPermission !== 'public' &&
         <UncontrolledPopover
           ref={popoverRef}
           flip

frontend/src/pages/wiki2/wiki-right-header/page-icon.js

@@ -3,11 +3,13 @@ import { UncontrolledPopover } from 'reactstrap';
 import classNames from 'classnames';
 import Picker from '@emoji-mart/react';
 import PropTypes from 'prop-types';
+import { Utils } from '../../../utils/utils';
 import { gettext, wikiPermission } from '../../../utils/constants';
 import { data } from './../utils/emoji-utils';
 
 const PageIcon = ({ currentPageConfig, onUpdatePage }) => {
   const popoverRef = useRef(null);
+  const isDesktop = Utils.isDesktop();
 
   const handleSetIcon = useCallback((emoji) => {
     onUpdatePage(currentPageConfig.id, { name: currentPageConfig.name, icon: emoji });
@@ -27,7 +29,7 @@ const PageIcon = ({ currentPageConfig, onUpdatePage }) => {
           <span>{currentPageConfig.icon}</span>
         </div>
       </div>
-      {wikiPermission !== 'public' &&
+      {isDesktop && wikiPermission !== 'public' &&
         <UncontrolledPopover
           ref={popoverRef}
           flip

frontend/src/pages/wiki2/wiki-right-header/page-title.css

@@ -1,7 +1,13 @@
 .wiki-page-title-wrapper {
   position: relative;
   width: 100%;
+  padding: 0 1rem;
+}
+
+@media (min-width: 768px) {
+  .wiki-page-title-wrapper {
     padding: 0 142px;
+  }
 }
 
 .wiki-page-icon-wrapper {

frontend/src/pages/wiki2/wiki-right-header/page-title.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Utils } from '../../../utils/utils';
 import { gettext, wikiPermission } from '../../../utils/constants';
 import { WIKI_COVER_LIST } from '../constant';
 import PageIcon from './page-icon';
@@ -17,6 +18,7 @@ const propTypes = {
 
 const PageTitle = ({ isUpdateBySide, currentPageConfig, onUpdatePage }) => {
   const [isShowController, setIsShowController] = useState(false);
+  const isDesktop = Utils.isDesktop();
 
   const onMouseEnter = useCallback(() => {
     setIsShowController(true);
@@ -55,7 +57,7 @@ const PageTitle = ({ isUpdateBySide, currentPageConfig, onUpdatePage }) => {
       {currentPageConfig.icon && (
         <PageIcon currentPageConfig={currentPageConfig} onUpdatePage={onUpdatePage} />
       )}
-      <div className={classnames('wiki-page-controller', { 'show': isShowController })}>
+      <div className={classnames('wiki-page-controller', { 'show': isShowController, 'd-none': !isDesktop })}>
         {!currentPageConfig.icon && wikiPermission !== 'public' && (
           <div className='wiki-page-controller-item' onClick={handleAddIcon}>
             <i className='sf3-font sf3-font-icon'></i>

frontend/src/pages/wiki2/wiki.css

@@ -3,7 +3,7 @@ body {
 }
 
 .wiki2-main-panel {
-  width: calc(100% - 300px);
+  flex: calc(100% - 300px);
   display: flex;
   flex-direction: column;
   min-height: 0;