github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

fix(home): wrap items on small screens [EE-4798] (#8220)

pull/8230/head
Chaim Lev-Ari 2022-12-20 10:57:59 +02:00 committed by GitHub
parent 59d35d26d8
commit b4a6f6911c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentItem.tsx
View File

@ -65,7 +65,7 @@ export function EnvironmentItem({
<EnvironmentIcon type={environment.Type} /> <EnvironmentIcon type={environment.Type} />
</div> </div>
<div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start"> <div className="ml-3 mr-auto flex justify-center gap-3 flex-col items-start">
<div className="space-x-3 flex items-center"> <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<span className="font-bold">{environment.Name}</span> <span className="font-bold">{environment.Name}</span>
{isEdge ? ( {isEdge ? (
<EdgeIndicator environment={environment} showLastCheckInDate /> <EdgeIndicator environment={environment} showLastCheckInDate />
@ -74,13 +74,10 @@ export function EnvironmentItem({
<EnvironmentStatusBadge status={environment.Status} /> <EnvironmentStatusBadge status={environment.Status} />
{snapshotTime && ( {snapshotTime && (
<span <span
className="space-left small text-muted vertical-center" className="small text-muted vertical-center gap-1"
title="Last snapshot time" title="Last snapshot time"
> >
<Activity <Activity className="icon icon-sm" aria-hidden="true" />
className="icon icon-sm space-right"
aria-hidden="true"
/>
{snapshotTime} {snapshotTime}
</span> </span>
)} )}
@ -93,15 +90,15 @@ export function EnvironmentItem({
</span> </span>
)} )}
</div> </div>
<div className="small text-muted space-x-2 vertical-center"> <div className="small text-muted flex flex-wrap items-center gap-x-4 gap-y-2">
{groupName && ( {groupName && (
<span className="font-semibold"> <span className="font-semibold">
<span>Group: </span> <span>Group: </span>
<span>{groupName}</span> <span>{groupName}</span>
</span> </span>
)} )}
<span className="vertical-center"> <span className="vertical-center gap-1">
<Tag className="icon icon-sm space-right" aria-hidden="true" /> <Tag className="icon icon-sm" aria-hidden="true" />
{tags} {tags}
</span> </span>
{isEdge && ( {isEdge && (
@ -112,10 +109,7 @@ export function EnvironmentItem({
/> />
{environment.Edge.AsyncMode && ( {environment.Edge.AsyncMode && (
<span className="vertical-center gap-1"> <span className="vertical-center gap-1">
<Globe <Globe className="icon icon-sm" aria-hidden="true" />
className="icon icon-sm space-right"
aria-hidden="true"
/>
Async Environment Async Environment
</span> </span>
)} )}

2
app/react/portainer/HomeView/EnvironmentList/EnvironmentItem/EnvironmentStats.tsx
View File

@ -18,7 +18,7 @@ export function EnvironmentStats({ environment }: Props) {
const component = getComponent(platform, environment); const component = getComponent(platform, environment);
return ( return (
<span className="blocklist-item-desc flex items-center gap-10"> <span className="blocklist-item-desc flex items-center gap-x-10 gap-y-2 flex-wrap">
{component} {component}
</span> </span>
); );