override icon size

This commit is contained in:
Daniel
2021-11-19 18:28:32 -05:00
parent f0b06233e8
commit a38eb515b7
6 changed files with 17 additions and 13 deletions

View File

@@ -9,7 +9,7 @@ import { CardBase, CardComponent, Flavor, Unique } from './CardBase';
const AttackCard: CardBase<Attack> = (props) => {
const { card } = props;
const ability = abilityText({ ability: card.gsx$ability });
const ability = abilityText({ ability: card.gsx$ability, size: "icon16" });
const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
const flavor = card.gsx$flavortext;
@@ -22,8 +22,8 @@ const AttackCard: CardBase<Attack> = (props) => {
</>}
left={<>
<Name name={card.gsx$name} />
<RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
<Typography><AttackIcon bp={card.gsx$bp} /> Attack - {card.gsx$bp}</Typography>
<RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
<Typography><AttackIcon size="icon20" bp={card.gsx$bp} /> Attack - {card.gsx$bp}</Typography>
<Typography>
{`${card.gsx$base} | `}
<ElementIcon element="fire" value={card.gsx$fire} />{`${card.gsx$fire} `}

View File

@@ -8,7 +8,7 @@ import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
const BattlegearCard: CardBase<Battlegear> = (props) => {
const { card } = props;
const ability = abilityText({ ability: card.gsx$ability });
const ability = abilityText({ ability: card.gsx$ability, size: "icon16" });
const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
const flavor = card.gsx$flavortext;
@@ -16,8 +16,8 @@ const BattlegearCard: CardBase<Battlegear> = (props) => {
<CardComponent {...props}
left={<>
<Name name={card.gsx$name} />
<RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
<Typography><BattlegearIcon /> Battlegear{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
<RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
<Typography><BattlegearIcon size="icon20"/> Battlegear{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
</>}
right={<>
<Typography sx={{ whiteSpace: "pre-line" }}>{ability}</Typography>

View File

@@ -40,10 +40,10 @@ export const CardComponent = (
alt={`${card.gsx$name} thumb`}
onClick={() => extend(card.gsx$name)}
/>
<Box sx={{ display: 'flex', flexDirection: 'column', marginLeft: 1, width: "30%" }}>
<Box sx={{ marginLeft: .5, marginRight: .5, minWidth: "242px" }}>
{left}
</Box>
<Box sx={{ display: 'block' }}>
<Box>
{right}
</Box>
</Card>

View File

@@ -8,7 +8,7 @@ import { CardBase, CardComponent, Unique, Flavor } from './CardBase';
const LocationCard: CardBase<Location> = (props) => {
const { card } = props;
const ability = abilityText({ ability: card.gsx$ability });
const ability = abilityText({ ability: card.gsx$ability, size: "icon16" });
const unique = uniqueText({ data: { unique: card.gsx$unique, loyal: card.gsx$loyal, legendary: card.gsx$legendary }});
const flavor = card.gsx$flavortext;
@@ -16,8 +16,8 @@ const LocationCard: CardBase<Location> = (props) => {
<CardComponent {...props}
left={<>
<Name name={card.gsx$name} />
<RarityIcon set={card.gsx$set} rarity={card.gsx$rarity} />
<Typography><LocationIcon /> Location{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
<RarityIcon size="icon20" set={card.gsx$set} rarity={card.gsx$rarity} />
<Typography><LocationIcon size="icon20" /> Location{card.gsx$types.length > 0 ? ` - ${card.gsx$types}` : null}</Typography>
<Typography>{`Initiative: `}<InitiativeIcon initiative={card.gsx$initiative} />{` ${card.gsx$initiative}`}</Typography>
</>}
right={<>

View File

@@ -1,22 +1,25 @@
.icon14 {
width: 16px;
height: 16px;
width: 14px;
height: 14px;
vertical-align: middle;
}
.icon16 {
width: 16px;
height: 16px;
vertical-align: middle;
}
.icon20 {
width: 20px;
height: 20px;
vertical-align: middle;
}
.icon24 {
width: 24px;
height: 24px;
vertical-align: middle;
}
.name {

View File

@@ -88,6 +88,7 @@ export default function Collection (_props) {
const handlePerPage = (event: SelectChangeEvent<number>) => {
sn(event.target.value as number);
sp(1);
};
const handlePage = (event: React.ChangeEvent<unknown>, value: number) => {