alt/zot-wo-auth
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned up the alignement on the ui

Browse Source 
Signed-off-by: Amelia-Maria Breda <ambreda@cisco.com>
This commit is contained in:
Amelia-Maria Breda 2022-10-26 15:19:19 +01:00 committed by Raul Kele
parent 49093f9493
commit 5877201389
3 changed files with 41 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/HistoryLayers.jsx
View File

@ -60,7 +60,8 @@ const useStyles = makeStyles(() => ({
fontSize: '1rem',
fontWeight: '400',
paddingBottom: '0.5rem',
paddingTop: '0.5rem'
paddingTop: '0.5rem',
textAlign: 'right'
},
monitor: {
width: '27.25rem',
@ -103,7 +104,7 @@ function LayerCard(props) {
</Grid>
</Grid>
<Grid item xs={2}>
<Typography variant="body1" align="left" className={classes.values}>
<Typography variant="body1" align="right" className={classes.values}>
{' '}
{transform.formatBytes(size)}{' '}
</Typography>
@ -150,12 +151,12 @@ function HistoryLayers(props) {
historyData && (
<Card className={classes.card} raised>
<CardContent className={classes.content}>
<Grid item xs={11}>
<Grid item xs={12}>
<Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
<Typography variant="body1" align="left" className={classes.title}>
Command
</Typography>
<Typography variant="body1" align="left" className={classes.values}>
<Typography variant="body1" align="right" className={classes.values}>
{transform.formatBytes(historyData[selectedIndex].Layer?.Size)}
</Typography>
</Stack>

82
src/components/TagCard.jsx
View File

@ -1,21 +1,7 @@
import React, { useState } from 'react';
import { makeStyles } from '@mui/styles';
import { useNavigate } from 'react-router-dom';
import {
Box,
Card,
CardContent,
Collapse,
Stack,
Table,
TableBody,
TableCell,
tableCellClasses,
TableHead,
TableRow,
Tooltip,
Typography
} from '@mui/material';
import { Box, Card, CardContent, Collapse, Grid, Stack, Tooltip, Typography } from '@mui/material';
import { Markdown } from 'utilities/MarkdowntojsxWrapper';
import transform from 'utilities/transform';
import { DateTime } from 'luxon';
@ -140,44 +126,34 @@ export default function TagCard(props) {
</Stack>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box>
<Table size="small" padding="none" sx={{ [`& .${tableCellClasses.root}`]: { borderBottom: 'none' } }}>
<TableHead>
<TableRow>
<TableCell style={{ color: '#696969' }}>
<Typography variant="body1">DIGEST</Typography>
</TableCell>
<TableCell style={{ color: '#696969' }}>
<Typography variant="body1">OS/Arch</Typography>
</TableCell>
<TableCell style={{ color: '#696969' }}>
<Typography variant="body1">Size</Typography>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
key={digest}
onClick={() => {
navigator.clipboard.writeText(digest);
}}
className={classes.clickCursor}
>
<TableCell style={{ color: '#696969' }}>
<Tooltip title={digest || ''} placement="top">
<Typography variant="body1">{digest?.substr(0, 12)}</Typography>
</Tooltip>
</TableCell>
<TableCell style={{ color: '#696969' }}>
<Typography variant="body1">
{platform?.Os}/{platform?.Arch}
</Typography>
</TableCell>
<TableCell component="th" scope="row" style={{ color: '#696969' }}>
<Typography variant="body1">{transform.formatBytes(size)}</Typography>
</TableCell>
</TableRow>
</TableBody>
</Table>
<Grid container item xs={12} direction={'row'}>
<Grid item xs={4}>
<Typography variant="body1">DIGEST</Typography>
</Grid>
<Grid item xs={4} sx={{ display: 'flex', justifyContent: 'center' }}>
<Typography variant="body1">OS/Arch</Typography>
</Grid>
<Grid item xs={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Typography variant="body1"> Size </Typography>
</Grid>
</Grid>
<Grid container item xs={12} direction={'row'}>
<Grid item xs={4}>
<Tooltip title={digest || ''} placement="top">
<Typography variant="body1">{digest?.substr(0, 12)}</Typography>
</Tooltip>
</Grid>
<Grid item xs={4} sx={{ display: 'flex', justifyContent: 'center' }}>
<Typography variant="body1">
{platform?.Os}/{platform?.Arch}
</Typography>
</Grid>
<Grid item xs={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Typography sx={{ textAlign: 'right' }} variant="body1">
{transform.formatBytes(size)}
</Typography>
</Grid>
</Grid>
</Box>
</Collapse>
</CardContent>

13
src/components/TagDetails.jsx
View File

@ -85,7 +85,8 @@ const useStyles = makeStyles(() => ({
},
tabPanel: {
height: '100%',
paddingLeft: '0rem!important'
paddingLeft: '0rem!important',
marginRight: '2rem!important'
},
metadata: {
marginTop: '8rem',
@ -111,7 +112,6 @@ const useStyles = makeStyles(() => ({
alignSelf: 'stretch',
flexGrow: 0,
order: 0,
width: '100%',
boxShadow: 'none!important'
},
platformText: {
@ -138,7 +138,8 @@ const useStyles = makeStyles(() => ({
paddingLeft: '2rem'
},
textEllipsis: {
textOverflow: 'ellipsis'
textOverflow: 'ellipsis',
overflow: 'hidden'
}
}));
@ -322,13 +323,13 @@ function TagDetails() {
classes: { root: classes.copyStringSelect, list: classes.textEllipsis }
}}
>
<MenuItem value={dockerPull(fullName)}>
<MenuItem className={classes.textEllipsis} value={dockerPull(fullName)}>
<Typography noWrap>{dockerPull(fullName)}</Typography>
</MenuItem>
<MenuItem value={podmanPull(fullName)}>
<MenuItem className={classes.textEllipsis} value={podmanPull(fullName)}>
<Typography noWrap>{podmanPull(fullName)}</Typography>
</MenuItem>
<MenuItem value={skopeoPull(fullName)}>
<MenuItem className={classes.textEllipsis} value={skopeoPull(fullName)}>
<Typography noWrap>{skopeoPull(fullName)}</Typography>
</MenuItem>
</Select>