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

add MangaTagDetail

Browse Source
This commit is contained in:
monoid 2021-01-25 21:44:44 +09:00
parent d87175b73a
commit 6883e5ddb0
1 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,6 +41,7 @@ const useStyles = makeStyles((theme: Theme) => ({
display: 'grid', display: 'grid',
gridTemplateColumns: '100px auto', gridTemplateColumns: '100px auto',
overflowY: 'hidden', overflowY: 'hidden',
alignItems: 'baseline',
}, },
short_subinfoContainer:{ short_subinfoContainer:{
[theme.breakpoints.down("md")]:{ [theme.breakpoints.down("md")]:{
@ -96,9 +97,6 @@ export const ContentInfo = (props: {
classes.thumbnail_content; classes.thumbnail_content;
const subinfoContainer = props.short ? classes.short_subinfoContainer : const subinfoContainer = props.short ? classes.short_subinfoContainer :
classes.subinfoContainer; classes.subinfoContainer;
let allTag = document.tags;
const artists = allTag.filter(x => x.startsWith("artist:")).map(x => x.slice(7));
allTag = allTag.filter(x => !x.startsWith("artist:"));
return (<Paper className={propclasses.root || rootName} elevation={4}> return (<Paper className={propclasses.root || rootName} elevation={4}>
<Link className={propclasses.thumbnail_anchor || thumbnail_anchor} component={RouterLink} to={{ <Link className={propclasses.thumbnail_anchor || thumbnail_anchor} component={RouterLink} to={{
pathname:makeContentReaderUrl(document.id) pathname:makeContentReaderUrl(document.id)
@ -119,18 +117,34 @@ export const ContentInfo = (props: {
{props.short ? (<Box className={propclasses.tag_list || classes.tag_list}>{document.tags.map(x => {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>) (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>)
)}</Box>) : ( )}</Box>) : (
<> <MangaDetailTag tags={document.tags} classes={({tag_list:classes.tag_list})}></MangaDetailTag>)
<Typography variant='subtitle1'>Artist</Typography>
<Box style={{ alignSelf: "center" }}>{artists.join(", ")}</Box>
<Typography variant='subtitle1'>Tags</Typography>
<Box className={propclasses.tag_list || classes.tag_list}>
{allTag.map(x => {
return (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>);
})}
</Box>
</>)
} }
</Box> </Box>
</Box> </Box>
</Paper>); </Paper>);
}
function MangaDetailTag(prop:{tags:string[],classes:{
tag_list:string
}}){
let allTag = prop.tags;
const tagKind = ["artist","group","series","type","character"];
let tagTable:{[kind:string]:string[]} = {};
for(const kind of tagKind){
const tags = allTag.filter(x => x.startsWith(kind+":")).map(x => x.slice(kind.length+1));
tagTable[kind] = tags;
allTag = allTag.filter(x => !x.startsWith(kind+":"));
}
return (<React.Fragment>
{tagKind.map(key=>(
<React.Fragment key={key}>
<Typography variant='subtitle1'>{key}</Typography>
<Box>{tagTable[key].length !== 0 ? tagTable[key].join(", ") : "N/A"}</Box>
</React.Fragment>
))}
<Typography variant='subtitle1'>Tags</Typography>
<Box className={prop.classes.tag_list}>
{allTag.map(x => (<TagChip key={x} label={x} clickable tagname={x} size="small"></TagChip>))}
</Box>
</React.Fragment>);
} }