changed all static px measurements to relative units
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
Raul Kele
Andrei Aaron
parent
0da2203f83
commit
47856c1ea5
@ -28,26 +28,26 @@ const useStyles = makeStyles(() => ({
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
background: "#FFFFFF",
|
||||
boxShadow: "0px 5px 10px rgba(131, 131, 131, 0.08)",
|
||||
borderRadius: "24px",
|
||||
boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
|
||||
borderRadius: "1.5rem",
|
||||
flex: "none",
|
||||
alignSelf: "stretch",
|
||||
flexGrow: 0,
|
||||
order: 0,
|
||||
width: "100%",
|
||||
maxWidth:"270px",
|
||||
maxHeight:"138px"
|
||||
maxWidth:"16.875rem",
|
||||
maxHeight:"8.625rem"
|
||||
},
|
||||
avatar: {
|
||||
height: "23px",
|
||||
width: "23px"
|
||||
height: "1.4375rem",
|
||||
width: "1.4375rem"
|
||||
},
|
||||
cardBtn: {
|
||||
height: "100%",
|
||||
width: "100%"
|
||||
},
|
||||
media: {
|
||||
borderRadius: '50px',
|
||||
borderRadius: '3.125rem',
|
||||
},
|
||||
content: {
|
||||
textAlign: "left",
|
||||
@ -55,8 +55,8 @@ const useStyles = makeStyles(() => ({
|
||||
},
|
||||
signedBadge: {
|
||||
color: '#9ccc65',
|
||||
height: '22px',
|
||||
width: '22px',
|
||||
height: '1.375rem',
|
||||
width: '1.375rem',
|
||||
marginLeft: 10,
|
||||
}
|
||||
}));
|
||||
@ -71,7 +71,7 @@ function RepoCard(props) {
|
||||
};
|
||||
|
||||
const verifiedCheck = () => {
|
||||
return (<CheckCircleOutlineOutlinedIcon sx={{ color: "#388E3C!important", height:"32px", width:"32px" }} />);
|
||||
return (<CheckCircleOutlineOutlinedIcon sx={{ color: "#388E3C!important", height:"2rem", width:"2rem" }} />);
|
||||
}
|
||||
|
||||
return (
|
||||
@ -89,14 +89,14 @@ function RepoCard(props) {
|
||||
image={randomImage()}
|
||||
alt="icon"
|
||||
/>
|
||||
<Typography variant="h5" component="div" sx={{size:"24px", lineHeight:"32px", color:"#220052"}}>
|
||||
<Typography variant="h5" component="div" sx={{size:"1.5rem", lineHeight:"2rem", color:"#220052"}}>
|
||||
{name}
|
||||
</Typography>
|
||||
{verifiedCheck()}
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid container item xs={12} mt={2}>
|
||||
<Typography variant="body2" sx={{fontSize:"14px", lineHeight:"143%", letterSpacing:"0.17px"}}>Official*PH</Typography>
|
||||
<Typography variant="body2" sx={{fontSize:"0.875rem", lineHeight:"143%", letterSpacing:"0.010625rem"}}>Official*PH</Typography>
|
||||
</Grid>
|
||||
<Grid container item xs={12}>
|
||||
</Grid>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
// react global
|
||||
import React from "react";
|
||||
import {useNavigate} from "react-router-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
// utility
|
||||
import {DateTime} from 'luxon';
|
||||
import { DateTime } from 'luxon';
|
||||
// components
|
||||
import {Card, CardActionArea, CardMedia, CardContent, Typography, Stack, Chip, Box, Grid} from '@mui/material';
|
||||
import { Card, CardActionArea, CardMedia, CardContent, Typography, Stack, Chip, Box, Grid } from '@mui/material';
|
||||
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
|
||||
import BookmarkIcon from '@mui/icons-material/Bookmark';
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
@ -22,49 +22,49 @@ const randomIntFromInterval = (min, max) => {
|
||||
};
|
||||
|
||||
const randomImage = () => {
|
||||
const imageArray = [repocube1,repocube2,repocube3,repocube4];
|
||||
return imageArray[randomIntFromInterval(0,3)];
|
||||
const imageArray = [repocube1, repocube2, repocube3, repocube4];
|
||||
return imageArray[randomIntFromInterval(0, 3)];
|
||||
};
|
||||
|
||||
const useStyles = makeStyles(() => ({
|
||||
card: {
|
||||
marginBottom: 2,
|
||||
display:"flex",
|
||||
flexDirection:"row",
|
||||
alignItems:"center",
|
||||
background:"#FFFFFF",
|
||||
boxShadow:"0px 5px 10px rgba(131, 131, 131, 0.08)",
|
||||
borderRadius:"24px",
|
||||
flex:"none",
|
||||
alignSelf:"stretch",
|
||||
flexGrow:0,
|
||||
order:0,
|
||||
width:"100%",
|
||||
maxWidth:"1152px"
|
||||
marginBottom: 2,
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
background: "#FFFFFF",
|
||||
boxShadow: "0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)",
|
||||
borderRadius: "1.5rem",
|
||||
flex: "none",
|
||||
alignSelf: "stretch",
|
||||
flexGrow: 0,
|
||||
order: 0,
|
||||
width: "100%",
|
||||
maxWidth: "72rem"
|
||||
},
|
||||
avatar: {
|
||||
height:"23px",
|
||||
width:"23px"
|
||||
height: "1.4375rem",
|
||||
width: "1.4375rem"
|
||||
},
|
||||
cardBtn: {
|
||||
height: "100%",
|
||||
width: "100%"
|
||||
},
|
||||
media: {
|
||||
borderRadius: '50px',
|
||||
borderRadius: '3.125rem',
|
||||
},
|
||||
content: {
|
||||
textAlign: "left",
|
||||
color: "#606060",
|
||||
maxHeight:"148px"
|
||||
textAlign: "left",
|
||||
color: "#606060",
|
||||
maxHeight: "9.25rem"
|
||||
},
|
||||
contentRight: {
|
||||
height:"100%"
|
||||
height: "100%"
|
||||
},
|
||||
signedBadge: {
|
||||
color: '#9ccc65',
|
||||
height: '22px',
|
||||
width: '22px',
|
||||
height: '1.375rem',
|
||||
width: '1.375rem',
|
||||
marginLeft: 10,
|
||||
}
|
||||
}));
|
||||
@ -72,71 +72,71 @@ const useStyles = makeStyles(() => ({
|
||||
function RepoCard(props) {
|
||||
const classes = useStyles();
|
||||
const navigate = useNavigate();
|
||||
const {name, vendor, description, lastUpdated, downloads, rating} = props;
|
||||
const { name, vendor, description, lastUpdated, downloads, rating } = props;
|
||||
|
||||
const goToDetails = (repo) => {
|
||||
navigate(`/image/${name}`, {state: {lastDate: (lastUpdated? DateTime.fromISO(lastUpdated) : DateTime.now().minus({days:1})).toRelative({unit:'days'})}});
|
||||
navigate(`/image/${name}`, { state: { lastDate: (lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 })).toRelative({ unit: 'days' }) } });
|
||||
}
|
||||
|
||||
const verifiedCheck = () => {
|
||||
return (<CheckCircleOutlineOutlinedIcon sx={{color:"#388E3C!important"}}/>);
|
||||
return (<CheckCircleOutlineOutlinedIcon sx={{ color: "#388E3C!important" }} />);
|
||||
}
|
||||
|
||||
const platformChips = () => {
|
||||
// if platforms not received, mock data
|
||||
const platforms = props.platforms || ["Windows","PowerPC64LE","IBM Z","Linux"];
|
||||
const platforms = props.platforms || ["Windows", "PowerPC64LE", "IBM Z", "Linux"];
|
||||
return platforms.map((platform, index) => (
|
||||
<Chip key={index} label={platform} sx={{backgroundColor:"#EDE7F6", color: "#311B92"}}/>
|
||||
<Chip key={index} label={platform} sx={{ backgroundColor: "#EDE7F6", color: "#311B92" }} />
|
||||
));
|
||||
}
|
||||
|
||||
const getVendorLastPublish = () => {
|
||||
const lastDate = lastUpdated? DateTime.fromISO(lastUpdated) : DateTime.now().minus({days:1});
|
||||
return `${vendor || 'andrewc'} • published ${lastDate.toFormat('MM.d.yy')} • ${lastDate.toRelative({unit:'days'})}`;
|
||||
const lastDate = lastUpdated ? DateTime.fromISO(lastUpdated) : DateTime.now().minus({ days: 1 });
|
||||
return `${vendor || 'andrewc'} • published ${lastDate.toFormat('MM.d.yy')} • ${lastDate.toRelative({ unit: 'days' })}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card variant="outlined" className={classes.card}>
|
||||
<CardActionArea onClick={() => goToDetails()} className={classes.cardBtn}>
|
||||
<CardContent className={classes.content}>
|
||||
<Grid container>
|
||||
<Grid item xs={10}>
|
||||
<Stack alignItems="center" direction="row" spacing={2}>
|
||||
<CardMedia classes={{
|
||||
root: classes.media,
|
||||
img: classes.avatar,
|
||||
}}
|
||||
component="img"
|
||||
image={randomImage()}
|
||||
alt="icon"
|
||||
/>
|
||||
<Typography variant="h5" component="div">
|
||||
{name}
|
||||
</Typography>
|
||||
<Chip label="Verified license" sx={{backgroundColor:"#E8F5E9", color:"#388E3C"}} variant="filled" onDelete={() => {return}} deleteIcon={verifiedCheck()}/>
|
||||
</Stack>
|
||||
<Typography pt={1} sx={{ fontSize: 12 }} gutterBottom>
|
||||
{description || 'The complete solution for node.js command-line programs'}
|
||||
</Typography>
|
||||
<Stack alignItems="center" direction="row" spacing={2} pt={1}>
|
||||
{platformChips()}
|
||||
</Stack>
|
||||
<Typography variant="body2" pt={1}>
|
||||
{getVendorLastPublish()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={2} >
|
||||
<Stack alignItems="flex-end" justifyContent="space-between" direction="column" className={classes.contentRight}>
|
||||
<Stack direction="column" alignItems="flex-end">
|
||||
<Typography variant="body2">Downloads • {downloads || '-'}</Typography>
|
||||
<Typography variant="body2">Rating • {rating || '-'}</Typography>
|
||||
</Stack>
|
||||
<BookmarkIcon />
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
<CardActionArea onClick={() => goToDetails()} className={classes.cardBtn}>
|
||||
<CardContent className={classes.content}>
|
||||
<Grid container>
|
||||
<Grid item xs={10}>
|
||||
<Stack alignItems="center" direction="row" spacing={2}>
|
||||
<CardMedia classes={{
|
||||
root: classes.media,
|
||||
img: classes.avatar,
|
||||
}}
|
||||
component="img"
|
||||
image={randomImage()}
|
||||
alt="icon"
|
||||
/>
|
||||
<Typography variant="h5" component="div">
|
||||
{name}
|
||||
</Typography>
|
||||
<Chip label="Verified license" sx={{ backgroundColor: "#E8F5E9", color: "#388E3C" }} variant="filled" onDelete={() => { return }} deleteIcon={verifiedCheck()} />
|
||||
</Stack>
|
||||
<Typography pt={1} sx={{ fontSize: 12 }} gutterBottom>
|
||||
{description || 'The complete solution for node.js command-line programs'}
|
||||
</Typography>
|
||||
<Stack alignItems="center" direction="row" spacing={2} pt={1}>
|
||||
{platformChips()}
|
||||
</Stack>
|
||||
<Typography variant="body2" pt={1}>
|
||||
{getVendorLastPublish()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={2} >
|
||||
<Stack alignItems="flex-end" justifyContent="space-between" direction="column" className={classes.contentRight}>
|
||||
<Stack direction="column" alignItems="flex-end">
|
||||
<Typography variant="body2">Downloads • {downloads || '-'}</Typography>
|
||||
<Typography variant="body2">Rating • {rating || '-'}</Typography>
|
||||
</Stack>
|
||||
<BookmarkIcon />
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</CardActionArea>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user