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

Fix weapon grid rep

Browse source 
The rendering was all wrong, now its better
This commit is contained in:
Justin Edmund 2025-02-09 18:47:05 -08:00
parent 450677b54a
commit cdcb35733b
1 changed files with 61 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
components/reps/WeaponRep/index.module.scss
View file

@ -1,51 +1,67 @@
// Overall container – never taller than $rep-height:
.rep {
aspect-ratio: 2/0.955;
border-radius: $card-corner;
display: grid;
grid-template-columns: 1fr 3.39fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
grid-gap: $unit-half; /* add a gap of 8px between grid items */
height: $rep-height;
transition: $duration-opacity-fade opacity ease-in;
opacity: 0.5;
display: grid;
// First column: mainhand width = $rep-height * (200/420)
// Second column: weapons grid – its width will be auto (we calculate it below)
grid-template-columns:
calc(#{$rep-height} * (200 / 420))
auto;
gap: $unit-half;
box-sizing: border-box;
}
@include breakpoint(small-tablet) {
display: none;
}
/* --- Mainhand image --- */
.mainhand {
background: var(--card-bg);
border-radius: 4px;
height: 100%;
width: 100%; // takes the grid column’s computed width
overflow: hidden;
.mainhand,
.weapon {
background: var(--card-bg);
border-radius: 4px;
img[src*='jpg'] {
border-radius: 4px;
width: 100%;
}
}
.mainhand {
aspect-ratio: 73/153;
display: grid;
grid-column: 1 / 2; /* spans one column */
}
.weapons {
display: grid; /* make the right-images container a grid */
grid-template-columns: repeat(
3,
1fr
); /* create 3 columns, each taking up 1 fraction */
grid-template-rows: repeat(
3,
1fr
); /* create 3 rows, each taking up 1 fraction */
gap: $unit-half;
// column-gap: $unit;
// row-gap: $unit-2x;
}
.weapon {
aspect-ratio: 280 / 160;
display: grid;
img {
width: 100%;
height: 100%;
object-fit: contain; // or "cover" if you prefer cropping
}
}
/* --- Weapons grid --- */
.weapons {
/* Reset default UL spacing */
margin: 0;
padding: 0;
list-style: none;
height: 100%;
display: grid;
// We know there will be 3 columns and 3 rows.
// Each row's height is one-third of $rep-height:
// Subtract the 2 vertical gaps from the total height before dividing:
grid-template-rows: repeat(
3,
calc((#{$rep-height} - (2 * #{$unit-half})) / 3)
);
// Each column's width is calculated as: (cell height * (280/160))
grid-template-columns: repeat(
3,
calc((#{$rep-height} - (2 * #{$unit-half})) / 3 * (280 / 160))
);
gap: $unit-half;
}
/* Each grid cell (a .weapon) */
.weapon {
background: var(--card-bg);
border-radius: 4px;
overflow: hidden;
// Center the image (or placeholder) within the cell:
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
}
}