Page Menu
Home
c4science
Search
Configure Global Search
Log In
Files
F87303122
TermCard.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
Fri, Oct 11, 21:35
Size
5 KB
Mime Type
text/x-java
Expires
Sun, Oct 13, 21:35 (1 d, 23 h)
Engine
blob
Format
Raw Data
Handle
21572826
Attached To
rOACCT Open Access Compliance Check Tool (OACCT)
TermCard.md
View Options
### Description
Recieve data for each term and display all the important condition.
```js
import React from "react"
import { makeStyles, withStyles } from '@material-ui/core/styles';
import "./termcard.css"
import Chip from '@material-ui/core/Chip';
import DoneIcon from '@material-ui/icons/Done';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import Typography from '@material-ui/core/Typography';
import DateRangeIcon from '@material-ui/icons/DateRange';
import { FaCoins, FaHandshake, FaRegHandshake, FaUserGraduate} from 'react-icons/fa';
import { GoLaw } from 'react-icons/go';
import { BsNewspaper } from 'react-icons/bs'
import { RiFilePaper2Line } from 'react-icons/ri';
import Button from '@material-ui/core/Button';
import { HiLink } from "react-icons/hi";
import { GrInfo } from "react-icons/gr";
import Container from '@material-ui/core/Container'
import Grid from '@material-ui/core/Grid'
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import Tooltip from '@material-ui/core/Tooltip';
import { FiFlag } from 'react-icons/fi';
const useStyles = makeStyles((theme) =>({
card: {
width: '100%',
marginTop: "1rem",
textAlign:'left'
},
root: {
flexGrow: 1,
textAlign:'left',
},
chip: {
margin: 0.5,
},
heading: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
}))
const HtmlTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: 'lightGrey',
color: 'rgba(0, 0, 0, 0.87)',
maxWidth: 220,
fontSize: theme.typography.pxToRem(12),
border: '1px solid #dadde9',
},
}))(Tooltip);
const classes = useStyles();
<Card key="3" className="term-Card"
style={{ textAlign: "left"}}
>
<CardContent>
<Typography className={classes.title} color="textSecondary" gutterBottom>
Term ID: 4
<p><small>Condition type: <FaUserGraduate />Organization only</small></p>
<p><small>Condition type: <FaRegHandshake />Organization/journal</small></p>
<p><small>Condition type: <BsNewspaper />Journal Only</small></p>
</Typography>
<Typography variant="h5" component="h2">
</Typography>
<Typography className={classes.pos} color="textSecondary">
</Typography>
<Typography variant="body2" component="p">
<Container maxWidth="xs" >
<Grid container>
<Grid item xs={6} sm={2}>
{/* filter Unknow cost factor type to not display */}
<Tooltip disableFocusListener title="{i.comment}" arrow>
<Button>
<Chip
key="4"
size="small"
avatar={<FaCoins />}
label="100000£"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF"}}
/>
</Button>
</Tooltip>
<Button href="www.google.com" target="blank" rel="noopener noreferrer" size="small">
<Chip
size="small"
avatar={ <RiFilePaper2Line />}
label="ABR"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
className={classes.chip}
style={{ background: "#FFFFFF", textAlign: "left"}}
title="Licence Information"
/>
</Button>
<Chip
size="small"
avatar={<DoneIcon />}
label={"IR Archiving"}
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#DAF7A6"}}
title="This is more information"
/>
<Chip
size="small"
avatar={<HighlightOffIcon />}
label="IR Archiving"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#f50057"}}
title="This is more information"
/>
<Chip
size="small"
avatar={<DateRangeIcon />}
label="embargo month"
// variant="outlined"
// clickable={handleClick}
// color="secondary"
// onDelete={handleDelete}
style={{ background: "#FFFFFF"}}
title="This is more information"
/>
</Grid>
</Grid>
</Container>
<div
style={{ marginTop: "1rem"}}
>
<div style={{ textAlign: "left"}}>
<p>
<small>
<GrInfo
style={{
padding: "0.05rem"
}}
/>
comment
</small>
</p>
</div>
</div>
</Typography>
</CardContent>
<CardActions>
<Button href="thisisasource.com" variant="outlined" target="blank" rel="noopener noreferrer" size="small"><HiLink/>
<i style={{fontSize: "70%"}}>
More Information
</i>
</Button>
<Button variant="outlined" color="secondary" size="small"><FiFlag/>
<i style={{fontSize: "70%"}}>
Modification Request
</i>
</Button>
</CardActions>
</Card>
```
Event Timeline
Log In to Comment