refactor MobileFooter -> GrowiNavbarBottom

src/client/js/base.jsx

@@ -5,6 +5,7 @@ import Xss from '@commons/service/xss';
 
 import SearchTop from './components/Navbar/SearchTop';
 import GrowiNavbar from './components/Navbar/GrowiNavbar';
+import GrowiNavbarBottom from './components/Navbar/GrowiNavbarBottom';
 import Sidebar from './components/Sidebar';
 import StaffCredit from './components/StaffCredit/StaffCredit';
 
@@ -12,7 +13,6 @@ import AppContainer from './services/AppContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import PageCreateButton from './components/Navbar/PageCreateButton';
 import PageCreateModal from './components/PageCreateModal';
-import MobileFooter from './components/MobileFooter';
 
 const logger = loggerFactory('growi:cli:app');
 
@@ -40,6 +40,7 @@ logger.info('AppContainer has been initialized');
  */
 const componentMappings = {
   'grw-navbar': <GrowiNavbar />,
+  'grw-navbar-bottom-container': <GrowiNavbarBottom />,
 
   'grw-search-top': <SearchTop />,
 
@@ -49,7 +50,6 @@ const componentMappings = {
   'grw-sidebar-wrapper': <Sidebar />,
 
   'staff-credit': <StaffCredit />,
-  'mobile-footer-container': <MobileFooter />,
 };
 
 export { appContainer, componentMappings };

src/client/js/components/MobileFooter.jsx → src/client/js/components/Navbar/GrowiNavbarBottom.jsx

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import NavigationContainer from '../services/NavigationContainer';
-import { withUnstatedContainers } from './UnstatedUtils';
+import NavigationContainer from '../../services/NavigationContainer';
+import { withUnstatedContainers } from '../UnstatedUtils';
 
-const MobileFooter = (props) => {
+const GrowiNavbarBottom = (props) => {
 
   const {
     navigationContainer,
   } = props;
   const { isDrawerOpened } = navigationContainer.state;
 
-  const additionalClasses = ['grw-mobile-footer'];
+  const additionalClasses = ['grw-navbar-bottom'];
   if (isDrawerOpened) {
-    additionalClasses.push('grw-mobile-footer-drawer-opened');
+    additionalClasses.push('grw-navbar-bottom-drawer-opened');
   }
 
   return (
@@ -39,8 +39,8 @@ const MobileFooter = (props) => {
   );
 };
 
-MobileFooter.propTypes = {
+GrowiNavbarBottom.propTypes = {
   navigationContainer: PropTypes.instanceOf(NavigationContainer).isRequired,
 };
 
-export default withUnstatedContainers(MobileFooter, [NavigationContainer]);
+export default withUnstatedContainers(GrowiNavbarBottom, [NavigationContainer]);

src/client/styles/scss/_navbar.scss

@@ -56,14 +56,14 @@
   }
 }
 
-.grw-mobile-footer {
-  height: $grw-mobile-footer-height;
+.grw-navbar-bottom {
+  height: $grw-navbar-bottom-height;
 
   // apply transition
   transition-property: bottom;
   @include apply-navigation-transition();
 
-  &.grw-mobile-footer-drawer-opened {
-    bottom: -$grw-mobile-footer-height;
+  &.grw-navbar-bottom-drawer-opened {
+    bottom: -$grw-navbar-bottom-height;
   }
 }

src/client/styles/scss/_variables.scss

@@ -9,6 +9,8 @@ $font-family-monospace-not-strictly: Monaco, Menlo, Consolas, 'Courier New', Mei
 $grw-navbar-height: 52px;
 $grw-navbar-border-width: 3.3333px;
 
+$grw-navbar-bottom-height: 48px;
+
 $grw-sidebar-nav-width: 64px; // !!DO NOT CHANGE!! 'margin-left' for '.css-teprsg' is hardcoded
 $grw-sidebar-content-min-width: 240px;
 
@@ -19,5 +21,3 @@ $grw-logomark-width: 36px;
 // see also '_on-edit.scss'
 $grw-nav-main-left-tab-width: 95px;
 $grw-nav-main-tab-height: 42px;
-
-$grw-mobile-footer-height: 48px;

src/server/views/layout-growi/base/layout.html

@@ -30,7 +30,5 @@
 </div><!-- /.main -->
 
 <footer class="footer">
-  {% include '../../widget/mobile-footer.html' %}
-  {% include '../../widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/layout-kibela/base/layout.html

@@ -36,7 +36,5 @@
 <!-- /.container-fluid -->
 
 <footer class="footer">
-  {% include '../../widget/mobile-footer.html' %}
-  {% include '../../widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/layout/layout.html

@@ -94,6 +94,8 @@
     </div>
   </div>
 
+  <div id="grw-navbar-bottom-container"></div>
+
 </div><!-- /#wrapper -->
 
 {% if user %}
@@ -107,6 +109,8 @@
 <!-- /#staff-credit -->
 <div id="staff-credit"></div>
 
+{% include '../widget/system-version.html' %}
+
 <div id="page-create-modal"></div>
 {% include '../modal/shortcuts.html' %}
 

src/server/views/search.html

@@ -23,7 +23,5 @@
 </div><!-- /.container-fluid -->
 
 <footer class="footer">
-  {% include 'widget/mobile-footer.html' %}
-  {% include 'widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/tags.html

@@ -18,7 +18,5 @@
 </div><!-- /.container-fluid -->
 
 <footer class="footer">
-  {% include 'widget/mobile-footer.html' %}
-  {% include 'widget/system-version.html' %}
 </footer>
 {% endblock %} {# layout_main #}

src/server/views/widget/mobile-footer.html

@@ -1 +0,0 @@
-<div id="mobile-footer-container"></div>