Homec4science
Diffusion Open Access Compliance Check Tool (OACCT) (issn4frontend) Browse

rOACCT/assets/src/components/DetailCard.md
ceaac59043fdissn4frontend

Last Change
Raw File

DetailCard.md
View Options

DetailsCard example:
Recieve detail data for journal, funder and institution.
```js
import React, {useContext,useEffect} from "react"
import {Context} from "../ContextProvider"
import { makeStyles } from '@material-ui/core/styles';
import "./detailcard.css"
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import { HiLink } from "react-icons/hi";
import DoneIcon from '@material-ui/icons/Done';
import WarningIcon from '@material-ui/icons/Warning';
import "./termcard.css"
import { BsUnlock } from "react-icons/bs";
import { GrDiamond } from "react-icons/gr";
import Chip from '@material-ui/core/Chip';
import ClearSharpIcon from '@material-ui/icons/ClearSharp';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
display: 'grid',
},
flexGrow: 1,
},
formControl: {
margin: theme.spacing(1),
width: 200,
},
selectEmpty: {
marginTop: theme.spacing(1),
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}));
const classes = useStyles();
<Card className="detail-Card">
<CardContent>
<Typography color="textSecondary" gutterBottom
style={{backgroundColor:"lightgrey", text:"white"}}
>
<WarningIcon /> Inactive!
<div>
<p>From 1903 to 2000</p>
</div>
</Typography>
<Typography className={classes.title} color="textSecondary" gutterBottom>
<h4>"detail name"</h4>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<ul>
<li>Print ISSN: ISSN number</li>
</ul>
</Typography>
<div>
<Button href="www.google.com" target="blank" rel="noopener noreferrer" size="small"><HiLink />Publisher: Publisher Name</Button>
<Button href="{item.oa_policies}" target="blank" rel="noopener noreferrer" size="small"><HiLink />Publisher policies</Button>
</div>
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography color="textSecondary">
<div key="4">item name</div>
<div>
Since 1969
</div>
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<div>
<div>
<p>
<abbr title="Title">
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label="status"
className={classes.chip}
style={{ background: "#FFD700", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
<>
<abbr title="OA status">
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <GrDiamond />}
label="label"
className={classes.chip}
style={{ background: "#B9F2FF", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</>
<p>
<abbr title="Title">
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label="OA status"
className={classes.chip}
style={{ background: "#ADD8E6", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
<p>
<abbr title="Title">
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label="status"
className={classes.chip}
style={{ background: "#cfcdaa", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
<p>
<abbr title="{details.oa_status.description}">
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <BsUnlock />}
label="{details.oa_status.status}"
className={classes.chip}
style={{ background: "#DAF7A6", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
<p>
<abbr title="{details.oa_status.description}">
Open Acces Status:
<Button href="https://oa100.snf.ch/en/context/open-access/versions-of-open-access/" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <ClearSharpIcon />}
label="{details.oa_status.status}"
className={classes.chip}
style={{ background: "#FF7F7F", textAlign: "left"}}
// title="Licence Information"
/>
</Button>
</abbr>
</p>
</div>
</div>
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<p><small>Language: En</small></p>
</Typography>
<Typography variant="body2" component="p"
style={{ textAlign: "left"}}
>
<Button href="https://doaj.org/apply/seal/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/> DOAJ seal</Button>
<Button
href="https://doaj.org/toc/4"
target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Listed on DOAJ</Button>
<Button href="https://www.lockss.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with LOCKSS</Button>
<Button href="https://www.portico.org/" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Preserved with Portico</Button>
<Button href="https://consortium.ch/nationallizenzen/?lang=en" target="blank" rel="noopener noreferrer" size="small"><DoneIcon/>Swiss National licences</Button>
<br />
<Button href="https://www.qoam.eu/" target="blank" rel="noopener noreferrer" size="small">QOAM score : 9.9</Button>
<Button href="https://ror.org/4" target="blank" rel="noopener noreferrer" size="small">Ror ID: Ror ID</Button>
<Button href="https://search.crossref.org/funding?q=456" target="blank" rel="noopener noreferrer" size="small">Fundref Id: Funder Ref</Button>
</Typography>
</CardContent>
<CardActions>
<Button href="wwww.google.com" target="blank" rel="noopener noreferrer" size="small"><HiLink/> Website </Button>
<Button href="wwww.google.com" target="blank" rel="noopener noreferrer" size="small"><HiLink/>Open Access Infos</Button>
<Button href="google.com" target="blank" rel="noopener noreferrer" size="small"><HiLink/>Ir Name</Button>
</CardActions>
</Card>
```
Any [Markdown](http://daringfireball.net/projects/markdown/) is **allowed** _here_.
c4science · Help