style: dynamically size editor sidebar to match header expanded/contr…

…acted states (#785)
zanata · Apr 23, 2018 · c40a7c4 · c40a7c4
1 parent daa2c3b
commit c40a7c4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/server/zanata-frontend/src/app/editor/containers/Sidebar/index.css b/server/zanata-frontend/src/app/editor/containers/Sidebar/index.css
@@ -23,18 +23,29 @@
   --Editor-color-rejected: #FFA800;
 }
 
+/* const height = this.props.headerOpen ? '91%' : '93%'
+const margin = this.props.headerOpen ? '6rem' : '3rem' */
+
 .sidebar-editor {
   border-left: solid 1px var(--Sidebar-border);
   float: right !important;
-  height: 99.5% !important;
   overflow-x: hidden !important;
   overflow-y: auto !important;
-  margin-top: 90px !important;
   position: static !important;
   width: 35%;
   background-color: #fff;
 }
 
+.sidebar-editor-contract {
+  height: 91% !important;
+  margin-top: 6rem !important;
+}
+
+.sidebar-editor-expand {
+  height: 95.3% !important;
+  margin-top: 3rem !important;
+}
+
 .sidebar-editor :focus {
   outline: 0;
 }

diff --git a/server/zanata-frontend/src/app/editor/containers/Sidebar/index.js b/server/zanata-frontend/src/app/editor/containers/Sidebar/index.js
@@ -3,7 +3,7 @@ import React from 'react'
 import { Component } from 'react'
 import * as PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { getSidebarVisible } from '../../reducers'
+import { getSidebarVisible, getNavHeaderVisible } from '../../reducers'
 import { setSidebarVisibility } from '../../actions'
 import ReactSidebar from 'react-sidebar'
 import SidebarContent from '../SidebarContent'
@@ -20,6 +20,8 @@ class Sidebar extends Component {
   static propTypes = {
     open: PropTypes.bool.isRequired,
 
+    headerOpen: PropTypes.bool.isRequired,
+
     setSidebarVisibility: PropTypes.func.isRequired,
     // The main content display should be passed as children to this component
     children: PropTypes.any
@@ -53,7 +55,9 @@ class Sidebar extends Component {
 
   render () {
     const content = <SidebarContent />
-
+    const height = this.props.headerOpen
+        ? 'sidebar-editor sidebar-editor-contract'
+        : 'sidebar-editor sidebar-editor-expand'
     return (
       <ReactSidebar
         sidebar={content}
@@ -68,7 +72,7 @@ class Sidebar extends Component {
             overflowY: 'auto'
           }
         }}
-        sidebarClassName="sidebar-editor">
+        sidebarClassName={height}>
         {this.props.children}
       </ReactSidebar>
     )
@@ -77,7 +81,8 @@ class Sidebar extends Component {
 
 function mapStateToProps (state) {
   return {
-    open: getSidebarVisible(state)
+    open: getSidebarVisible(state),
+    headerOpen: getNavHeaderVisible(state)
   }
 }