From a92f1ba8d6438dd7c8d86bb82af6ab3cbe6640a2 Mon Sep 17 00:00:00 2001
From: Sameer Naik <sameer@damagehead.com>
Date: Mon, 30 Apr 2018 16:31:17 +0530
Subject: [PATCH] layout CardContent to use screen real-estate effectively
 (#281)

* modification of CardContent so that the screen real-estate is use effectively

* fix card list layout rendering on FF

* add title to Link in Views

* use h3 for card titles

* address review

* use hex value for colors
---
 .../src/components/AppList/AppListItem.tsx    | 13 ++++++------
 dashboard/src/components/Card/Card.css        |  2 +-
 .../components/ChartList/ChartListItem.css    | 20 +++++++++----------
 .../components/ChartList/ChartListItem.tsx    | 15 ++++++++------
 .../FunctionList/FunctionListItem.tsx         | 17 +++++++++++-----
 5 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/dashboard/src/components/AppList/AppListItem.tsx b/dashboard/src/components/AppList/AppListItem.tsx
index 78165b905dd..4e050923c9c 100644
--- a/dashboard/src/components/AppList/AppListItem.tsx
+++ b/dashboard/src/components/AppList/AppListItem.tsx
@@ -20,18 +20,19 @@ class AppListItem extends React.Component<IAppListItemProps> {
 
     return (
       <Card key={release.name} responsive={true} className="AppListItem">
-        <Link to={`/apps/ns/${release.namespace}/${release.name}`}>
+        <Link to={`/apps/ns/${release.namespace}/${release.name}`} title={release.name}>
           <CardIcon icon={iconSrc} />
           <CardContent>
             <div className="ChartListItem__content">
-              <h3 className="ChartListItem__content__title">{release.name}</h3>
-              <div className="ChartListItem__content__info text-r">
-                <p className="margin-reset type-color-light-blue">
+              <h3 className="ChartListItem__content__title type-big">{release.name}</h3>
+              <div className="ChartListItem__content__info">
+                <p className="ChartListItem__content__info_version margin-reset type-small padding-t-tiny type-color-light-blue">
                   {(metadata && metadata.appVersion) || "-"}
                 </p>
                 <span
-                  className={`ChartListItem__content__repo padding-tiny
-                  padding-h-normal type-small margin-t-small`}
+                  className={`ChartListItem__content__info_repo ${
+                    release.namespace
+                  } type-small type-color-white padding-t-tiny padding-h-normal`}
                 >
                   {release.namespace}
                 </span>
diff --git a/dashboard/src/components/Card/Card.css b/dashboard/src/components/Card/Card.css
index 2b90db0c471..c7c2991d980 100644
--- a/dashboard/src/components/Card/Card.css
+++ b/dashboard/src/components/Card/Card.css
@@ -5,7 +5,7 @@
 }
 
 .Card {
-  margin: 0 1% 2%;
+  margin: 0 1% 1.5em;
 }
 
 .Card__Icon img {
diff --git a/dashboard/src/components/ChartList/ChartListItem.css b/dashboard/src/components/ChartList/ChartListItem.css
index f7c532cc76e..62a5480bb9a 100644
--- a/dashboard/src/components/ChartList/ChartListItem.css
+++ b/dashboard/src/components/ChartList/ChartListItem.css
@@ -3,34 +3,34 @@
 }
 
 .ChartListItem__content {
-  display: flex;
-  justify-content: space-between;
 }
 
 .ChartListItem__content__title {
-  /* Avoid 3 line elements */
-  word-break: break-all;
-  flex: 1;
-  font-size: 1.1em;
+  color: #1C2B39;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: bold;
   margin: 0;
+  width: 100%;
 }
 
 .ChartListItem__content__info {
-  margin: 0.15em 0 0 0.625em;
+  display: flex;
+  justify-content: space-between;
 }
 
-.ChartListItem__content__repo {
+.ChartListItem__content__info_repo {
   background-color: #1c2b39;
   border-radius: 16px;
   color: #fff;
   display: inline-block;
 }
 
-.ChartListItem__content__repo.stable {
+.ChartListItem__content__info_repo.stable {
   background-color: #1598cb;
 }
 
-.ChartListItem__content__repo.incubator {
+.ChartListItem__content__info_repo.incubator {
   background-color: #f58220;
 }
diff --git a/dashboard/src/components/ChartList/ChartListItem.tsx b/dashboard/src/components/ChartList/ChartListItem.tsx
index 7683035775a..a75d40acf7d 100644
--- a/dashboard/src/components/ChartList/ChartListItem.tsx
+++ b/dashboard/src/components/ChartList/ChartListItem.tsx
@@ -20,16 +20,19 @@ class ChartListItem extends React.Component<IChartListItemProps> {
     const latestAppVersion = chart.relationships.latestChartVersion.data.app_version;
     return (
       <Card key={`${repo}/${name}`} responsive={true} className="ChartListItem">
-        <Link to={`/charts/` + chart.id}>
+        <Link to={`/charts/` + chart.id} title={name}>
           <CardIcon icon={iconSrc} />
           <CardContent>
             <div className="ChartListItem__content">
-              <h3 className="ChartListItem__content__title">{name}</h3>
-              <div className="ChartListItem__content__info text-r">
-                <p className="margin-reset type-color-light-blue">{latestAppVersion || "-"}</p>
+              <h3 className="ChartListItem__content__title type-big">{name}</h3>
+              <div className="ChartListItem__content__info">
+                <p className="ChartListItem__content__info_version margin-reset type-small padding-t-tiny type-color-light-blue">
+                  {latestAppVersion || "-"}
+                </p>
                 <span
-                  className={`ChartListItem__content__repo ${repo.name} padding-tiny
-                  padding-h-normal type-small margin-t-small`}
+                  className={`ChartListItem__content__info_repo ${
+                    repo.name
+                  } type-small padding-t-tiny padding-h-normal`}
                 >
                   {repo.name}
                 </span>
diff --git a/dashboard/src/components/FunctionList/FunctionListItem.tsx b/dashboard/src/components/FunctionList/FunctionListItem.tsx
index 15b605247d3..73f8aa18b65 100644
--- a/dashboard/src/components/FunctionList/FunctionListItem.tsx
+++ b/dashboard/src/components/FunctionList/FunctionListItem.tsx
@@ -16,15 +16,22 @@ class FunctionListItem extends React.Component<IFunctionListItemProps> {
 
     return (
       <Card responsive={true} className="FunctionListItem">
-        <Link to={`/functions/ns/${f.metadata.namespace}/${f.metadata.name}`}>
+        <Link
+          to={`/functions/ns/${f.metadata.namespace}/${f.metadata.name}`}
+          title={f.metadata.name}
+        >
           <FunctionIcon runtime={f.spec.runtime} />
           <CardContent>
             <div className="ChartListItem__content">
-              <h3 className="ChartListItem__content__title">{f.metadata.name}</h3>
-              <div className="ChartListItem__content__info text-r">
+              <h3 className="ChartListItem__content__title type-big">{f.metadata.name}</h3>
+              <div className="ChartListItem__content__info">
+                <p className="ChartListItem__content__info_version margin-reset type-small padding-t-tiny type-color-light-blue">
+                  {" "}
+                </p>
                 <span
-                  className={`ChartListItem__content__repo padding-tiny
-                  padding-h-normal type-small margin-t-small`}
+                  className={`ChartListItem__content__info_repo ${
+                    f.metadata.namespace
+                  } type-small padding-t-tiny padding-h-normal`}
                 >
                   {f.metadata.namespace}
                 </span>