dynamically adjust width of FundsManagement

app/components/FundsManagement.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { FundingContext } from '../context'
+import PledgesTable from './PledgesTable'
+import FunderProfilesTable from './FunderProfilesTable'
+
+const FundsManagement = ({ open }) => {
+  const maxWidth = open ? `${window.visualViewport.width - 35}px` : '100vw'
+  return (
+    <FundingContext.Consumer>
+      {({ allPledges, transferPledgeAmounts, fundProfiles, cancelFundProfile }) =>
+        <div style={{ maxWidth }}>
+          {!!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
+          {!!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
+        </div>
+      }
+    </FundingContext.Consumer>
+  )
+}
+
+export default FundsManagement

app/components/MainCointainer.jsx

@@ -17,8 +17,9 @@ import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
+import FundsManagement from './FundsManagement'
 
-const drawerWidth = 240;
+const drawerWidth = 240
 
 const styles = theme => ({
   root: {
@@ -38,6 +39,9 @@ const styles = theme => ({
       duration: theme.transitions.duration.enteringScreen,
     }),
   },
+  childrenShift: {
+    width: `calc(100% - ${drawerWidth}px)`
+  },
   menuButton: {
     marginLeft: 12,
     marginRight: 20,
@@ -135,25 +139,25 @@ class PersistentDrawerLeft extends React.Component {
           <List>
             <ListItem button>
               <ListItemIcon><InboxIcon /></ListItemIcon>
-              <ListItemText primary='Dashboard' />
+              <ListItemText primary="Dashboard" />
             </ListItem>
           </List>
           <List>
             <ListItem button>
               <ListItemIcon><InboxIcon /></ListItemIcon>
-              <ListItemText primary='Insights' />
+              <ListItemText primary="Funds Management" />
             </ListItem>
           </List>
           <List>
             <ListItem button>
               <ListItemIcon><InboxIcon /></ListItemIcon>
-              <ListItemText primary='Funding Entry' />
+              <ListItemText primary="Insights" />
             </ListItem>
           </List>
           <List>
             <ListItem button>
               <ListItemIcon><InboxIcon /></ListItemIcon>
-              <ListItemText primary='Contract Admin' />
+              <ListItemText primary="Contract Admin" />
             </ListItem>
           </List>
           <Divider />
@@ -164,7 +168,12 @@ class PersistentDrawerLeft extends React.Component {
           })}
         >
           <div className={classes.drawerHeader} />
+          <div className={classNames(classes.appBar, {
+            [classes.childrenShift]: open,
+          })}>
+            <FundsManagement open={open} />
             {this.props.children}
+          </div>
         </main>
       </div>
     );
@@ -176,4 +185,4 @@ PersistentDrawerLeft.propTypes = {
   theme: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft);
+export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft)

app/dapp.js

@@ -5,7 +5,6 @@ import LPVault from 'Embark/contracts/LPVault';
 import LiquidPledgingMock from 'Embark/contracts/LiquidPledgingMock';
 import web3 from "Embark/web3";
 import Divider from '@material-ui/core/Divider';
-import Button from '@material-ui/core/Button';
 import AddFunder from './components/AddFunder';
 import CreateFunding from './components/CreateFunding';
 import FunderProfilesTable from './components/FunderProfilesTable'
@@ -15,7 +14,6 @@ import { getAllLPEvents, getAllVaultEvents, getProfileEvents, formatFundProfileE
 import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
 import { FundingContext } from './context'
 import { cancelProfile } from './utils/fundProfiles'
-import SetMockedTime from './components/SetMockedTime'
 import TransfersGraph from './components/TransfersGraph'
 import MainCointainer from './components/MainCointainer'
 import ContractAdmin from './components/ContractAdmin'
@@ -90,16 +88,14 @@ class App extends React.Component {
   render() {
     const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, allVaultEvents } = this.state
     const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
-    const fundingContext = { account, transferPledgeAmounts, authorizedPayments, needsInit, initVaultAndLP, standardTokenApproval, }
+    const fundingContext = { allPledges, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval }
     return (
       <FundingContext.Provider value={fundingContext}>
         <Router>
           <MainCointainer>
-            <div style={{ display: 'flex', flexDirection: 'column', width: '95vw' }}>
+              {false &&transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
-              {transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
+              {false && !!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
-              {!!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
+              {false && !!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
-              {!!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
-            </div>
             <AddFunder appendFundProfile={appendFundProfile} />
             <Divider variant="middle" />
             <CreateFunding refreshTable={appendPledges} />