Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F71116080
DetailCard.md
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Subscribers
None
File Metadata
Details
File Info
Storage
Attached
Created
Tue, Jul 9, 18:17
Size
10 KB
Mime Type
text/x-java
Expires
Thu, Jul 11, 18:17 (2 d)
Engine
blob
Format
Raw Data
Handle
18907485
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
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_.
Event Timeline
Log In to Comment