github-starred/komodo
2
0
Fork 1
mirror of https://github.com/moghtech/komodo.git synced 2026-04-28 11:49:39 -05:00
Code Issues 3.1k Packages Projects Releases 103 Wiki Activity

improve summary styling

Browse Source
This commit is contained in:
beckerinj
2023-03-23 03:13:19 -04:00
parent 349fc297ce
commit 425a6648f7
2 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/home/Summary.tsx
View File

@@ -14,26 +14,29 @@ const Summary: Component<{}> = (p) => {
const serverCount = useServerCount();
return (
<Grid
class="card shadow"
class="full-size"
gridTemplateColumns={isMobile() ? "1fr" : "1fr 1fr"}
style={{
width: "100%",
height: "100%",
"box-sizing": "border-box",
}}
placeItems="center"
gap="0"
>
<div
style={{ width: `${PIE_CHART_SIZE}px`, height: `${PIE_CHART_SIZE}px` }}
>
<PieChart title="deployments" sections={deployentCount()} />
</div>
<div
style={{ width: `${PIE_CHART_SIZE}px`, height: `${PIE_CHART_SIZE}px` }}
>
<PieChart title="servers" sections={serverCount()} />
</div>
<Grid class="card shadow full-size" placeItems="center">
<div
style={{
width: `${PIE_CHART_SIZE}px`,
height: `${PIE_CHART_SIZE}px`,
}}
>
<PieChart title="deployments" sections={deployentCount()} />
</div>
</Grid>
<Grid class="card shadow full-size" placeItems="center">
<div
style={{
width: `${PIE_CHART_SIZE}px`,
height: `${PIE_CHART_SIZE}px`,
}}
>
<PieChart title="servers" sections={serverCount()} />
</div>
</Grid>
</Grid>
);
};

16
frontend/src/style/index.scss
View File

@@ -318,6 +318,22 @@ svg {
opacity: 0.7;
}
.full-size {
width: 100%;
height: 100%;
box-sizing: border-box;
}
.full-width {
width: 100%;
box-sizing: border-box;
}
.full-height {
height: 100%;
box-sizing: border-box;
}
// .hoverable {
// transition: all 250ms ease-in-out;
// }