granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS fixes for summon grid and optional fix for character hovercard (#425)

Browse source
This commit is contained in:
Justin Edmund 2025-02-13 01:12:06 -08:00 committed by GitHub
parent a02a6c70aa
commit 0e7aeed5d6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 30 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/character/CharacterHovercard/index.tsx
View file

@ -65,7 +65,11 @@ const CharacterHovercard = (props: Props) => {
}
const overMasterySection = () => {
if (props.gridCharacter && props.gridCharacter.over_mastery.length > 0) {
if (
props.gridCharacter &&
props.gridCharacter.over_mastery &&
props.gridCharacter.over_mastery.length > 0
) {
return (
<section className={styles.mastery}>
<h5 className={tintElement}>

47
components/reps/GridRep/index.module.scss
View file

@ -70,6 +70,7 @@
.gridContainer {
aspect-ratio: 2.1/1;
width: 100%;
align-self: start;
}
.characterGrid {
@ -179,44 +180,42 @@
aspect-ratio: 2/0.91;
display: flex;
gap: $unit;
justify-content: space-between;
.summon,
.mainSummon {
background: var(--background);
border-radius: $item-corner-small;
img {
border-radius: $item-corner-small;
width: 100%;
}
}
height: 100%;
.mainSummon {
aspect-ratio: 56/97;
display: grid;
grid-column: 1 / 2; /* spans one column */
flex-shrink: 0;
background: var(--unit-bg);
border-radius: $item-corner-small;
img {
border-radius: 4px;
width: 100%;
height: 100%;
}
}
.summons {
display: grid; /* make the right-images container a grid */
grid-template-columns: repeat(
2,
1fr
); /* create 3 columns, each taking up 1 fraction */
grid-template-rows: repeat(
2,
1fr
); /* create 3 rows, each taking up 1 fraction */
display: grid;
flex-shrink: 1;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
gap: $unit;
aspect-ratio: 83/100;
// column-gap: $unit;
// row-gap: $unit-2x;
}
.summon {
aspect-ratio: 184/138;
display: grid;
background: var(--unit-bg);
border-radius: $item-corner-small;
img {
border-radius: 4px;
width: 100%;
height: 100%;
}
}
}