reorganize

src/client/js/components/Page/DisplaySwitcher.jsx

@@ -3,69 +3,51 @@ import { TabContent, TabPane } from 'reactstrap';
 import propTypes from 'prop-types';
 import { withUnstatedContainers } from '../UnstatedUtils';
 import NavigationContainer from '../../services/NavigationContainer';
-import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
-import PageAccessoriesContainer from '../../services/PageAccessoriesContainer';
 import Editor from '../PageEditor';
 import Page from '../Page';
 import UserInfo from '../User/UserInfo';
 import TableOfContents from '../TableOfContents';
 import UserContentsLinks from '../UserContentsLinks';
-import PageAccessoriesModalControl from '../PageAccessoriesModalControl';
-import PageAccessoriesModal from '../PageAccessoriesModal';
+import PageAccessories from '../PageAccessories';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 
 
 const DisplaySwitcher = (props) => {
   const {
-    navigationContainer, appContainer, pageContainer, pageAccessoriesContainer,
+    navigationContainer, pageContainer,
   } = props;
   const { editorMode } = navigationContainer.state;
   const { pageUser } = pageContainer.state;
-  const { isGuestUser, isSharedUser } = appContainer;
-  const { closePageAccessoriesModal } = pageAccessoriesContainer;
-  const { isPageAccessoriesModalShown } = pageAccessoriesContainer.state;
 
   return (
     <>
       <TabContent activeTab={editorMode}>
         <TabPane tabId="view">
+          <div className="d-flex flex-column flex-lg-row-reverse">
 
-          <div className="d-flex d-md-none justify-content-end border-bottom">
-            <PageAccessoriesModalControl
-              isGuestUser={isGuestUser}
-              isSharedUser={isSharedUser}
-            />
-          </div>
-
-          <div className="d-flex flex-row justify-content-around">
-            <div className="w-100">
-              {pageUser && <UserInfo pageUser={pageUser} />}
-              <Page />
-            </div>
-
-            <div className="d-none d-md-block grw-side-contents-container">
+            <div className="grw-side-contents-container">
               <div className="grw-side-contents-sticky-container">
-                <PageAccessoriesModalControl
-                  isGuestUser={isGuestUser}
-                  isSharedUser={isSharedUser}
-                />
-                <div id="revision-toc" className="revision-toc">
-                  <TableOfContents />
+                <div className="border-bottom pb-1">
+                  <PageAccessories />
+                </div>
+
+                <div className="d-none d-lg-block">
+                  <div id="revision-toc" className="revision-toc">
+                    <TableOfContents />
+                  </div>
+                  {pageUser && <UserContentsLinks />}
                 </div>
-                {pageUser && <UserContentsLinks />}
               </div>
             </div>
-          </div>
 
-          <PageAccessoriesModal
-            isGuestUser={isGuestUser}
-            isSharedUser={isSharedUser}
-            isOpen={isPageAccessoriesModalShown}
-            onClose={closePageAccessoriesModal}
-          />
+            <div>
+              {pageUser && <UserInfo pageUser={pageUser} />}
+              <Page />
+            </div>
 
+          </div>
         </TabPane>
         <TabPane tabId="edit">
           <div id="page-editor">
@@ -85,10 +67,8 @@ const DisplaySwitcher = (props) => {
 
 DisplaySwitcher.propTypes = {
   navigationContainer: propTypes.instanceOf(NavigationContainer).isRequired,
-  appContainer: propTypes.instanceOf(AppContainer).isRequired,
   pageContainer: propTypes.instanceOf(PageContainer).isRequired,
-  pageAccessoriesContainer: propTypes.instanceOf(PageAccessoriesContainer).isRequired,
 };
 
 
-export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer, AppContainer, PageContainer, PageAccessoriesContainer]);
+export default withUnstatedContainers(DisplaySwitcher, [NavigationContainer, PageContainer]);

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -51,7 +51,7 @@ const PageAccessoriesModalControl = (props) => {
   }, [isGuestUser, isSharedUser]);
 
   return (
-    <div className="grw-page-accessories-control d-flex align-items-center justify-content-between pb-1">
+    <div className="grw-page-accessories-control d-flex flex-nowrap align-items-center justify-content-end justify-content-lg-between">
       {accessoriesBtnList.map((accessory) => {
         return (
           <Fragment key={accessory.name}>

src/client/styles/scss/_layout.scss

@@ -31,21 +31,25 @@ body {
 .main {
   margin-top: 1rem;
 
-  @include media-breakpoint-up(md) {
-    margin-top: 3rem;
+  @include media-breakpoint-up(lg) {
+    margin-top: 2rem;
   }
 }
 
 .grw-side-contents-container {
-  margin-left: 30px;
+  margin-bottom: 1rem;
+
+  @include media-breakpoint-up(lg) {
+    width: 250px;
+    min-width: 250px;
+    margin-left: 30px;
+  }
 }
 
 .grw-side-contents-sticky-container {
   position: sticky;
   // growisubnavigation + grw-navbar-boder
   top: calc(100px + 4px);
-  width: 250px;
-  min-width: 250px;
   margin-top: 5px;
 }
 

src/client/styles/scss/_page-accessories-control.scss

@@ -1,5 +1,4 @@
 .grw-page-accessories-control {
-  flex-wrap: nowrap;
   line-height: 1.25;
   border-bottom: 1px solid transparent;