From d309f8f1b021219ac708f99dbe09452c33a4356d Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Thu, 26 Sep 2024 12:25:59 +0800
Subject: [PATCH] [wiki] redesigned it for mobile (#6850)

---
 frontend/src/pages/wiki2/index.js             |  4 ++--
 frontend/src/pages/wiki2/main-panel.js        | 14 +++++++-----
 frontend/src/pages/wiki2/side-panel.css       | 22 +++++++++++++------
 frontend/src/pages/wiki2/side-panel.js        | 12 ++++++----
 frontend/src/pages/wiki2/top-nav/index.css    | 12 ++++++----
 frontend/src/pages/wiki2/top-nav/index.js     |  8 +++----
 .../pages/wiki2/wiki-nav/pages/page-item.js   |  2 +-
 .../wiki2/wiki-right-header/page-cover.js     |  6 +++--
 .../wiki2/wiki-right-header/page-icon.js      |  4 +++-
 .../wiki2/wiki-right-header/page-title.css    |  8 ++++++-
 .../wiki2/wiki-right-header/page-title.js     |  4 +++-
 frontend/src/pages/wiki2/wiki.css             |  2 +-
 12 files changed, 65 insertions(+), 33 deletions(-)

diff --git a/frontend/src/pages/wiki2/index.js b/frontend/src/pages/wiki2/index.js
index a8e43e3a80..7b6049ee76 100644
--- a/frontend/src/pages/wiki2/index.js
+++ b/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>
     );
diff --git a/frontend/src/pages/wiki2/main-panel.js b/frontend/src/pages/wiki2/main-panel.js
index e37b6e3ad9..d24b92f545 100644
--- a/frontend/src/pages/wiki2/main-panel.js
+++ b/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'>
-          <WikiTopNav
-            config={config}
-            currentPageId={this.props.currentPageId}
-            currentPageConfig={currentPageConfig}
-          />
+          <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">
diff --git a/frontend/src/pages/wiki2/side-panel.css b/frontend/src/pages/wiki2/side-panel.css
index bc53802b47..0d90cb47f6 100644
--- a/frontend/src/pages/wiki2/side-panel.css
+++ b/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;
-  }
-}
diff --git a/frontend/src/pages/wiki2/side-panel.js b/frontend/src/pages/wiki2/side-panel.js
index 078f0f60af..15ed70b6a9 100644
--- a/frontend/src/pages/wiki2/side-panel.js
+++ b/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 className='sf3-font sf3-font-new-page'></i>
-              </div>
+              <i
+                id='wiki-add-new-page'
+                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>
diff --git a/frontend/src/pages/wiki2/top-nav/index.css b/frontend/src/pages/wiki2/top-nav/index.css
index bfbcb2c24b..5176ad2b0d 100644
--- a/frontend/src/pages/wiki2/top-nav/index.css
+++ b/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: 300px;
+  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) {
-  margin: 2px 2px 0 2px;
+.wiki2-top-nav .item-split {
+  margin: 0 2px;
 }
 
 .wiki2-top-nav .wiki2-top-nav-item:hover {
diff --git a/frontend/src/pages/wiki2/top-nav/index.js b/frontend/src/pages/wiki2/top-nav/index.js
index ed196c5174..62110c4f74 100644
--- a/frontend/src/pages/wiki2/top-nav/index.js
+++ b/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>
         );
       })}
diff --git a/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js b/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
index faa90da159..883d79190c 100644
--- a/frontend/src/pages/wiki2/wiki-nav/pages/page-item.js
+++ b/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}>
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js b/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
index 4caf260bd3..29f7b4a0d4 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-cover.js
+++ b/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
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-icon.js b/frontend/src/pages/wiki2/wiki-right-header/page-icon.js
index abfa233305..0104c9e9eb 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-icon.js
+++ b/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
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-title.css b/frontend/src/pages/wiki2/wiki-right-header/page-title.css
index c4db7a1401..83c423cf28 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-title.css
+++ b/frontend/src/pages/wiki2/wiki-right-header/page-title.css
@@ -1,7 +1,13 @@
 .wiki-page-title-wrapper {
   position: relative;
   width: 100%;
-  padding: 0 142px;
+  padding: 0 1rem;
+}
+
+@media (min-width: 768px) {
+  .wiki-page-title-wrapper {
+    padding: 0 142px;
+  }
 }
 
 .wiki-page-icon-wrapper {
diff --git a/frontend/src/pages/wiki2/wiki-right-header/page-title.js b/frontend/src/pages/wiki2/wiki-right-header/page-title.js
index c7ec676b41..7052c0b151 100644
--- a/frontend/src/pages/wiki2/wiki-right-header/page-title.js
+++ b/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>
diff --git a/frontend/src/pages/wiki2/wiki.css b/frontend/src/pages/wiki2/wiki.css
index 380bc96897..f0022b6642 100644
--- a/frontend/src/pages/wiki2/wiki.css
+++ b/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;