monoid/ionian
1
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

replace grid

Browse Source
This commit is contained in:
monoid 2022-06-20 17:15:45 +09:00
parent 3dbcf56546
commit 62fd2cb1d3
1 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/client/component/contentinfo.tsx
View File

@ -2,7 +2,7 @@ import React, { } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { Document } from '../accessor/document';
import { Link, Paper, Theme, Box, useTheme, Typography } from '@mui/material';
import { Link, Paper, Theme, Box, useTheme, Typography, Grid } from '@mui/material';
import { ThumbnailContainer } from '../page/reader/reader';
import { TagChip } from '../component/tagchip';
@ -117,7 +117,7 @@ export const ContentInfo = (props: {
{props.short ? (<Box /*className={propclasses.tag_list ?? classes.tag_list}*/>{document.tags.map(x =>
(<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)
)}</Box>) : (
<ComicDetailTag tags={document.tags}/* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
<ComicDetailTag tags={document.tags} path={document.basepath+"/"+document.filename}/* classes={({tag_list:classes.tag_list})}*/ ></ComicDetailTag>)
}
</Box>
</Box>
@ -125,9 +125,11 @@ export const ContentInfo = (props: {
}
function ComicDetailTag(prop: {
tags: string[]/*classes:{
tags: string[];/*classes:{
tag_list:string
}*/}) {
}*/
path?: string;
}) {
let allTag = prop.tags;
const tagKind = ["artist", "group", "series", "type", "character"];
let tagTable: { [kind: string]: string[] } = {};
@ -136,16 +138,28 @@ function ComicDetailTag(prop: {
tagTable[kind] = tags;
allTag = allTag.filter(x => !x.startsWith(kind + ":"));
}
return (<React.Fragment>
return (<Grid container>
{tagKind.map(key => (
<React.Fragment key={key}>
<Grid item xs={3}>
<Typography variant='subtitle1'>{key}</Typography>
</Grid>
<Grid item xs={9}>
<Box>{tagTable[key].length !== 0 ? tagTable[key].join(", ") : "N/A"}</Box>
</Grid>
</React.Fragment>
))}
{ prop.path != undefined && <><Grid item xs={3}>
<Typography variant='subtitle1'>Path</Typography>
</Grid><Grid item xs={9}>
<Box>{prop.path}</Box>
</Grid></>
}
<Grid item xs={3}>
<Typography variant='subtitle1'>Tags</Typography>
<Box /*lassName={prop.classes.tag_list}*/>
</Grid>
<Grid item xs={9}>
{allTag.map(x => (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>))}
</Box>
</React.Fragment>);
</Grid>
</Grid>);
}