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

Make GridRep flexible

Browse source
This commit is contained in:
Justin Edmund 2022-12-27 19:18:59 -08:00
parent 82e93de7fc
commit 47f6a5c1bd
3 changed files with 39 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
components/GridRep/index.scss
View file

@ -2,11 +2,12 @@
aspect-ratio: 3/2; aspect-ratio: 3/2;
border-radius: $card-corner; border-radius: $card-corner;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: grid;
flex-direction: column; grid-template-rows: 1fr 1fr;
gap: $unit; gap: $unit;
padding: $unit-2x; padding: $unit-2x;
max-width: 320px; min-width: 320px;
width: 100%;
&:hover { &:hover {
background: var(--grid-rep-hover); background: var(--grid-rep-hover);
@ -20,56 +21,58 @@
cursor: pointer; cursor: pointer;
} }
.Grid .weapon { .Grid .Weapon {
box-shadow: inset 0 0 0 1px var(--grid-border-color); box-shadow: inset 0 0 0 1px var(--grid-border-color);
} }
@include breakpoint(phone) { @include breakpoint(phone) {
background: inherit; background: inherit;
.Grid .weapon { .Grid .Weapon {
box-shadow: none; box-shadow: none;
} }
} }
} }
.Grid { & > .Grid {
display: flex; aspect-ratio: 2/1;
flex-direction: row; display: grid;
flex-shrink: 0; grid-template-columns: 1fr 3fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
gap: $unit; grid-template-rows: repeat(
3,
1fr
); /* create 3 rows, each taking up 1 fraction */
grid-gap: $unit; /* add a gap of 8px between grid items */
.weapon { .Weapon {
background: var(--card-bg); background: var(--card-bg);
border-radius: 4px; border-radius: 4px;
} }
.grid_mainhand { .Mainhand.Weapon {
$d: 64px; grid-column: 1 / 2; /* spans one column */
aspect-ratio: 200 / 418;
height: auto;
max-width: $d;
min-width: $d;
} }
.grid_weapons { .GridWeapons {
$p: 29.5%; display: grid; /* make the right-images container a grid */
box-sizing: border-box; grid-template-columns: repeat(
display: grid; 3,
grid-template-columns: fit-content($p) fit-content($p) fit-content($p); 1fr
grid-template-rows: fit-content($p) fit-content($p) fit-content($p); ); /* create 3 columns, each taking up 1 fraction */
grid-template-rows: repeat(
3,
1fr
); /* create 3 rows, each taking up 1 fraction */
gap: $unit; gap: $unit;
margin: 0;
padding: 0;
width: 100%;
} }
.grid_weapon { .Grid.Weapon {
aspect-ratio: 160 / 92; aspect-ratio: 160 / 92;
display: grid;
} }
.grid_mainhand img[src*='jpg'], .Mainhand.Weapon img[src*='jpg'],
.grid_weapon img[src*='jpg'] { .Grid.Weapon img[src*='jpg'] {
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
height: 100%; height: 100%;

9
components/GridRep/index.tsx
View file

@ -212,15 +212,12 @@ const GridRep = (props: Props) => {
<a className="GridRep"> <a className="GridRep">
{props.displayUser ? detailsWithUsername : details} {props.displayUser ? detailsWithUsername : details}
<div className="Grid"> <div className="Grid">
<div className="weapon grid_mainhand">{generateMainhandImage()}</div> <div className="Mainhand Weapon">{generateMainhandImage()}</div>
<ul className="grid_weapons"> <ul className="GridWeapons">
{Array.from(Array(numWeapons)).map((x, i) => { {Array.from(Array(numWeapons)).map((x, i) => {
return ( return (
<li <li key={`${props.shortcode}-${i}`} className="Grid Weapon">
key={`${props.shortcode}-${i}`}
className="weapon grid_weapon"
>
{generateGridImage(i)} {generateGridImage(i)}
</li> </li>
) )

9
components/GridRepCollection/index.scss
View file

@ -1,21 +1,20 @@
.GridRepCollection { .GridRepCollection {
box-sizing: border-box;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
transition: opacity 0.14s ease-in-out; transition: opacity 0.14s ease-in-out;
justify-items: center; justify-items: center;
// width: fit-content; width: 100%;
width: auto;
max-width: 996px; max-width: 996px;
@include breakpoint(tablet) { @include breakpoint(tablet) {
grid-template-columns: minmax(320px, 1fr); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
max-width: inherit; max-width: inherit;
width: 100%;
} }
@include breakpoint(tablet) { @include breakpoint(phone) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
max-width: inherit; max-width: inherit;
width: 100%; width: 100%;