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 { .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; height: $rep-height;
transition: $duration-opacity-fade opacity ease-in; display: grid;
opacity: 0.5; // 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) { /* --- Mainhand image --- */
display: none; .mainhand {
} background: var(--card-bg);
border-radius: 4px;
height: 100%;
width: 100%; // takes the grid column’s computed width
overflow: hidden;
.mainhand, img {
.weapon { width: 100%;
background: var(--card-bg); height: 100%;
border-radius: 4px; object-fit: contain; // or "cover" if you prefer cropping
}
img[src*='jpg'] { }
border-radius: 4px;
width: 100%; /* --- Weapons grid --- */
} .weapons {
} /* Reset default UL spacing */
margin: 0;
.mainhand { padding: 0;
aspect-ratio: 73/153; list-style: none;
display: grid; height: 100%;
grid-column: 1 / 2; /* spans one column */
} display: grid;
// We know there will be 3 columns and 3 rows.
.weapons { // Each row's height is one-third of $rep-height:
display: grid; /* make the right-images container a grid */ // Subtract the 2 vertical gaps from the total height before dividing:
grid-template-columns: repeat( grid-template-rows: repeat(
3, 3,
1fr calc((#{$rep-height} - (2 * #{$unit-half})) / 3)
); /* create 3 columns, each taking up 1 fraction */ );
grid-template-rows: repeat( // Each column's width is calculated as: (cell height * (280/160))
3, grid-template-columns: repeat(
1fr 3,
); /* create 3 rows, each taking up 1 fraction */ calc((#{$rep-height} - (2 * #{$unit-half})) / 3 * (280 / 160))
gap: $unit-half; );
// column-gap: $unit; gap: $unit-half;
// row-gap: $unit-2x; }
}
/* Each grid cell (a .weapon) */
.weapon { .weapon {
aspect-ratio: 280 / 160; background: var(--card-bg);
display: grid; 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%;
} }
} }