better handling of collapsed states for ListItem

ui/src/components/list/description.js

@@ -1,19 +1,41 @@
+const fns = require('../../shared/functions');
 const React = require('react');
 const Styled = require('styled-components');
 const Title = require('./title');
 
 const {
-  default: styled
+  remcalc
+} = fns;
+
+const {
+  default: styled,
+  css
 } = Styled;
 
 const margin = (props) => props.collapsed ? `
   margin-left: auto;
 ` : '';
 
-const justify = (props) => props.collapsed ? 'flex-end' : 'flex-start';
+const justify = (props) => props.collapsed
-const xs = (props) => props.collapsed ? 6 : 12;
+  ? 'flex-end'
+  : 'flex-start';
+
+const xs = (props) => props.collapsed
+  ? 6
+  : 12;
+
+const collapsed = (...args) => (props) => !props.collapsed
+  ? css(...args)
+  : css``;
 
 const StyledTitle = styled(Title)`
+  ${collapsed`
+    position: absolute;
+    bottom: 0;
+    padding-bottom: ${remcalc(12)};
+    padding-top: 0;
+  `}
+
   font-weight: normal !important;
   flex-grow: 2;
 `;

ui/src/components/list/group-view.js

@@ -20,6 +20,6 @@ module.exports = styled(View)`
   padding-top: ${remcalc(62)};
   padding-left: ${remcalc(23)};
   padding-right: ${remcalc(23)};
-  padding-bottom: ${remcalc(15)};
+  padding-bottom: ${remcalc(5)};
   background-color: ${colors.brandInactive};
 `;

ui/src/components/list/item.js

@@ -42,6 +42,10 @@ const shadow = (props) => props.stacked
       ? boxes.bottomShaddowDarker
       : boxes.bottomShaddow;
 
+const marginBottom = (props) => props.stacked
+  ? remcalc(16)
+  : remcalc(10);
+
 const Item = styled(Row)`
   position: relative;
 
@@ -50,7 +54,7 @@ const Item = styled(Row)`
   box-shadow: ${shadow};
   border: 1px solid ${colors.borderSecondary};
   background-color: ${colors.brandSecondary};
-  margin-bottom: ${remcalc(10)};
+  margin-bottom: ${marginBottom};
 `;
 
 module.exports = transferProps([

ui/src/components/list/meta.js

@@ -9,9 +9,16 @@ const {
   default: styled
 } = Styled;
 
-const xs = (props) => props.collapsed ? 12 : 6;
+const xs = (props) => props.collapsed
+  ? 12
+  : 6;
+
+const display = (props) => !props.collapsed
+  ? 'block'
+  : 'flex';
 
 const InnerRow = styled(Row)`
+  display: ${display};
   height: 100%;
 `;
 
@@ -26,7 +33,7 @@ module.exports = transferProps([
       xs={xs(props)}
       {...props}
     >
-      <InnerRow>
+      <InnerRow collapsed={props.collapsed}>
         {props.children}
       </InnerRow>
     </Column>

ui/src/components/list/subtitle.js

@@ -24,8 +24,12 @@ const color = (props) => props.fromHeader
   ? colors.brandPrimaryColor
   : '#646464';
 
+const display = (props) => !props.collapsed
+  ? 'inline-block'
+  : 'flex';
+
 const Span = styled.span`
-  display: flex;
+  display: ${display};
   flex-direction: column;
 
   font-weight: normal;
@@ -38,6 +42,7 @@ const Span = styled.span`
 `;
 
 const StyledTitle = styled(Title)`
+  display: ${display};
   padding: ${padding};
 `;
 

ui/src/components/list/title.js

@@ -24,11 +24,25 @@ const padding = (props) => !props.collapsed
   ? `${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)}`
   : `0 ${remcalc(18)}`;
 
-const justify = (props) => props.collapsed ? 'center' : 'flex-start';
+const justify = (props) => props.collapsed
-const width = (props) => props.collapsed ? 'auto' : '100%';
+  ? 'center'
-const direction = (props) => props.collapsed ? 'column' : 'row';
+  : 'flex-start';
-const grow = (props) => props.collapsed ? 0 : 2;
+
-const xs = (props) => props.collapsed ? 6 : 12;
+const width = (props) => props.collapsed
+  ? 'auto'
+  : '100%';
+
+const direction = (props) => props.collapsed
+  ? 'column'
+  : 'row';
+
+const grow = (props) => props.collapsed
+  ? 0
+  : 2;
+
+const xs = (props) => props.collapsed
+  ? 6
+  : 12;
 
 const Container = styled.div`
   font-size: ${remcalc(16)};
@@ -46,8 +60,12 @@ const Container = styled.div`
   padding: ${padding};
 `;
 
+const display = (props) => !props.collapsed
+  ? 'inline-block'
+  : 'flex';
+
 const Span = styled.span`
-  display: flex;
+  display: ${display};
   flex-direction: column;
   justify-content: center;
 `;

ui/src/components/list/view.js

@@ -12,6 +12,10 @@ const {
   default: styled
 } = Styled;
 
+const height = (props) => props.collapsed
+  ? remcalc(48)
+  : 'auto';
+
 const paddingTop = (props) => props.headed && !props.fromHeader
   ? remcalc(47)
   : remcalc(0);
@@ -19,7 +23,7 @@ const paddingTop = (props) => props.headed && !props.fromHeader
 const StyledView = styled(Row)`
   flex: 1;
   margin: 0;
-  height: 100%;
+  height: ${height};
   padding-top: ${paddingTop};
 `;