Skip to content

Commit

Permalink
layout CardContent to use screen real-estate effectively (#281)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
Sameer Naik authored Apr 30, 2018
1 parent 47637c0 commit a92f1ba
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 28 deletions.
13 changes: 7 additions & 6 deletions dashboard/src/components/AppList/AppListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/Card/Card.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
}

.Card {
margin: 0 1% 2%;
margin: 0 1% 1.5em;
}

.Card__Icon img {
Expand Down
20 changes: 10 additions & 10 deletions dashboard/src/components/ChartList/ChartListItem.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
15 changes: 9 additions & 6 deletions dashboard/src/components/ChartList/ChartListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 12 additions & 5 deletions dashboard/src/components/FunctionList/FunctionListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit a92f1ba

Please sign in to comment.