Merge pull request #332 from smiclea/CORWEB-185

Redo main layout so that only the list scrolls CORWEB-185

src/components/App.jsx

@@ -43,6 +43,9 @@ import StyleProps from './styleUtils/StyleProps'
 
 injectGlobal`
   ${Fonts}
+  html, body, main {
+    height: 100%;
+  }
   body {
     margin: 0;
     color: ${Palette.black};
@@ -51,10 +54,14 @@ injectGlobal`
     font-weight: ${StyleProps.fontWeights.regular};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    min-width: 1240px;
   }
 `
-const Wrapper = styled.div``
+const Wrapper = styled.div`
+  height: 100%;
+  > div:first-child {
+    height: 100%;
+  }
+`
 
 class App extends React.Component<{}> {
   componentWillMount() {

src/components/molecules/MainListFilter/MainListFilter.jsx

@@ -31,6 +31,7 @@ const Wrapper = styled.div`
   align-items: center;
   padding-top: 8px;
   flex-wrap: wrap;
+  flex-shrink: 0;
 `
 const Main = styled.div`
   display: flex;

src/components/organisms/FilterList/FilterList.jsx

@@ -23,7 +23,12 @@ import MainListFilter from '../../molecules/MainListFilter'
 import type { ItemComponentProps } from '../../organisms/MainList'
 import MainList from '../../organisms/MainList'
 
-const Wrapper = styled.div``
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+`
 
 type DictItem = { value: string, label: string }
 type Props = {

src/components/organisms/MainList/MainList.jsx

@@ -26,6 +26,10 @@ import Palette from '../../styleUtils/Palette'
 
 const Wrapper = styled.div`
   margin-top: 8px;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 `
 const Separator = styled.div`
   height: 1px;
@@ -36,23 +40,30 @@ const Loading = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-top: 88px;
+  flex-grow: 1;
 `
 const LoadingText = styled.div`
   font-size: 18px;
   margin-top: 39px;
 `
-const List = styled.div``
+const List = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+`
 
 const NoResults = styled.div`
   margin-top: 39px;
   text-align: center;
 `
 const EmptyList = styled.div`
-  margin: 96px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex-shrink: 0;
+  justify-content: center;
+  flex-grow: 1;
 `
 const EmptyListImage = styled.div`
   width: 96px;

src/components/organisms/Navigation/Navigation.jsx

@@ -23,12 +23,14 @@ import userStore from '../../../stores/UserStore'
 
 import { navigationMenu } from '../../../config'
 import backgroundImage from './images/star-bg.jpg'
+import cbsImage from './images/cbs-logo.svg'
 
 const Wrapper = styled.div`
   background-image: url('${backgroundImage}');
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
 `
 
 const LogoStyled = styled(Logo)`
@@ -40,6 +42,7 @@ const Menu = styled.div`
   display: flex;
   flex-direction: column;
   margin-top:32px;
+  flex-grow: 1;
 `
 
 const MenuItem = styled.a`
@@ -51,7 +54,22 @@ const MenuItem = styled.a`
   display: inline-block;
   text-decoration: none;
 `
-const Footer = styled.div``
+const Footer = styled.div`
+  flex-shrink: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 32px;
+`
+
+const CbsLogo = styled.a`
+  width: 128px;
+  height: 32px;
+  background: url('${cbsImage}') center no-repeat;
+  cursor: pointer;
+  display: flex;
+`
 
 @observer
 class Navigation extends React.Component<{ currentPage: string }> {
@@ -80,7 +98,9 @@ class Navigation extends React.Component<{ currentPage: string }> {
       <Wrapper>
         <LogoStyled small href={navigationMenu[0].value} />
         {this.renderMenu()}
-        <Footer />
+        <Footer>
+          <CbsLogo href="https://cloudbase.it" target="_blank" />
+        </Footer>
       </Wrapper>
     )
   }

src/components/templates/MainTemplate/MainTemplate.jsx

@@ -18,30 +18,34 @@ import * as React from 'react'
 import styled from 'styled-components'
 
 const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
 `
 const Navigation = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 320px;
+  display: flex;
+  min-width: 320px;
 `
 const Content = styled.div`
   padding: 0 64px 0 64px;
-  position: absolute;
-  left: 320px;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
   overflow: auto;
 `
 const List = styled.div`
   padding-bottom: 32px;
   margin-left: ${props => props.noMargin ? 0 : '-32px'};
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 `
 const Header = styled.div`
   min-width: 800px;
 `
+const Footer = styled.div`
+  flex-shrink: 0;
+`
 
 type Props = {
   navigationComponent: React.Node,
@@ -56,6 +60,7 @@ const MainTemplate = (props: Props) => {
       <Content>
         <Header>{props.headerComponent}</Header>
         <List noMargin={props.listNoMargin}>{props.listComponent}</List>
+        <Footer />
       </Content>
     </Wrapper>
   )