From 9d76e6ab42b8e2bf8de05bcabc25d1e56311e0cc Mon Sep 17 00:00:00 2001
From: vsandvold <vsandvold@gmail.com>
Date: Tue, 14 Feb 2017 12:11:18 +0100
Subject: [PATCH 1/3] minor improvements to application list and view layouts

---
 .../application/application-edit-component.js | 35 +++++++++++--------
 .../application/application-list-component.js | 13 +++----
 frontend/src/component/common/index.js        | 20 ++++-------
 3 files changed, 32 insertions(+), 36 deletions(-)

diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js
index 220daddd51..0d90172a09 100644
--- a/frontend/src/component/application/application-edit-component.js
+++ b/frontend/src/component/application/application-edit-component.js
@@ -3,13 +3,13 @@ import React, { Component, PureComponent } from 'react';
 
 import { Link } from 'react-router';
 import {
-    Grid, Cell,
+    Grid, Cell, Card, CardTitle, CardText, CardMenu,
     List, ListItem, ListItemContent,
     Textfield, Icon, ProgressBar,
     Tabs, Tab,
     Switch,
 } from 'react-mdl';
-import { HeaderTitle, ExternalIconLink, shorten } from '../common';
+import { IconLink, shorten, styles as commonStyles } from '../common';
 import { formatFullDateTime } from '../common/util';
 
 class StatefulTextfield extends Component {
@@ -152,20 +152,25 @@ class ClientApplications extends PureComponent {
 
 
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
-                    <HeaderTitle title={<span><Icon name={icon} /> {appName}</span>} subtitle={description}
-                        actions={url && <ExternalIconLink url={url}>Visit site</ExternalIconLink>}
-                    />
+            <Card shadow={0} className={commonStyles.fullwidth}>
+                <CardTitle style={{ paddingTop: '24px', paddingRight: '64px', wordBreak: 'break-all' }}>
+                    <Icon name={icon} /> {appName}
+                </CardTitle>
+                {description &&
+                    <CardText>{description}</CardText>
+                }
+                {url &&
+                    <CardMenu><IconLink url={url} icon="link"/></CardMenu>
+                }
+                <hr className={commonStyles.divider}/>
+                <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple
+                    tabBarProps={{ style: { width: '100%' } }} className="mdl-color--grey-100">
+                    <Tab>Details</Tab>
+                    <Tab>Edit</Tab>
+                </Tabs>
 
-                    <Tabs activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })} ripple>
-                        <Tab>Details</Tab>
-                        <Tab>Edit</Tab>
-                    </Tabs>
-
-                    {content}
-                </Cell>
-            </Grid>
+                {content}
+            </Card>
         );
     }
 }
diff --git a/frontend/src/component/application/application-list-component.js b/frontend/src/component/application/application-list-component.js
index a5d8570d6a..70946e9c8d 100644
--- a/frontend/src/component/application/application-list-component.js
+++ b/frontend/src/component/application/application-list-component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { ProgressBar, Grid, Cell } from 'react-mdl';
-import { AppsLinkList, HeaderTitle } from '../common';
+import { ProgressBar, Card } from 'react-mdl';
+import { AppsLinkList, HeaderTitle, styles as commonStyles } from '../common';
 
 class ClientStrategies extends Component {
 
@@ -17,12 +17,9 @@ class ClientStrategies extends Component {
             return <ProgressBar indeterminate />;
         }
         return (
-            <Grid className="mdl-color--white">
-                <Cell col={12}>
-                    <HeaderTitle title="Applications" />
-                    <AppsLinkList apps={applications} />
-                </Cell>
-            </Grid>
+            <Card className={commonStyles.fullwidth}>
+                <AppsLinkList apps={applications} />
+            </Card>
         );
     }
 }
diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js
index 2db289eda5..6ce0d0ac6d 100644
--- a/frontend/src/component/common/index.js
+++ b/frontend/src/component/common/index.js
@@ -14,12 +14,13 @@ export { styles };
 export const shorten = (str, len = 50) => (str && str.length > len ? `${str.substring(0, len)}...` : str);
 
 export const AppsLinkList = ({ apps }) => (
-    <List style={{ textAlign: 'left' }}>
+    <List>
     {apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
         <ListItem twoLine key={appName}>
-            <ListItemContent avatar={icon} subtitle={shorten(description)}>
-                <Link key={appName} to={`/applications/${appName}`}>
+            <ListItemContent avatar={icon}>
+                <Link to={`/applications/${appName}`} className={[styles.listLink, styles.truncate].join(' ')}>
                     {appName}
+                    <span className={['mdl-list__item-sub-title', styles.truncate].join(' ')}>{description}</span>
                 </Link>
             </ListItemContent>
         </ListItem>
@@ -99,19 +100,12 @@ export function getIcon (type) {
 };
 
 
-export const IconLink = ({ icon, children, ...props }) => (
-    <a {...props} style={{ textDecoration: 'none' }}>
-         <Icon name={icon} style={{ marginRight: '5px', verticalAlign: 'middle' }}/>
-         <span style={{ textDecoration: 'none', verticalAlign: 'middle' }}>{children}</span>
+export const IconLink = ({ url, icon }) => (
+    <a href={url} target="_blank" rel="noopener" className="mdl-color-text--grey-600">
+         <Icon name={icon}/>
     </a>
 );
 
-export const ExternalIconLink = ({ url, children }) => (
-    <IconLink icon="queue" href={url} target="_blank" rel="noopener">
-        {children}
-    </IconLink>
-);
-
 export const DropdownButton = ({ label, id }) => (
     <Button id={id} className={styles.dropdownButton}>
         {label}

From 7a8bf2235a47fc72e73bf6c63a8066012e8981f1 Mon Sep 17 00:00:00 2001
From: vsandvold <vsandvold@gmail.com>
Date: Tue, 14 Feb 2017 12:22:24 +0100
Subject: [PATCH 2/3] removed unused import

---
 .../src/component/application/application-list-component.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/component/application/application-list-component.js b/frontend/src/component/application/application-list-component.js
index 70946e9c8d..cdbf1a1f68 100644
--- a/frontend/src/component/application/application-list-component.js
+++ b/frontend/src/component/application/application-list-component.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { ProgressBar, Card } from 'react-mdl';
-import { AppsLinkList, HeaderTitle, styles as commonStyles } from '../common';
+import { AppsLinkList, styles as commonStyles } from '../common';
 
 class ClientStrategies extends Component {
 

From 410f40cc03f601a361541f1145d6f1416438de2b Mon Sep 17 00:00:00 2001
From: vsandvold <vsandvold@gmail.com>
Date: Tue, 14 Feb 2017 12:46:09 +0100
Subject: [PATCH 3/3] tweaks markup

---
 frontend/src/component/common/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js
index 6ce0d0ac6d..cead3c5066 100644
--- a/frontend/src/component/common/index.js
+++ b/frontend/src/component/common/index.js
@@ -17,12 +17,13 @@ export const AppsLinkList = ({ apps }) => (
     <List>
     {apps.length > 0 && apps.map(({ appName, description = '-', icon = 'apps' }) => (
         <ListItem twoLine key={appName}>
-            <ListItemContent avatar={icon}>
+            <span className="mdl-list__item-primary-content">
+                <Icon name={icon} className="mdl-list__item-avatar"/>
                 <Link to={`/applications/${appName}`} className={[styles.listLink, styles.truncate].join(' ')}>
                     {appName}
                     <span className={['mdl-list__item-sub-title', styles.truncate].join(' ')}>{description}</span>
                 </Link>
-            </ListItemContent>
+            </span>
         </ListItem>
     ))}
     </List>