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

Merge pull request #87 from jedmund/gridrep-2

Browse source 
GridRep and GridRep Collection fixes
This commit is contained in:
Justin Edmund 2022-12-28 23:40:48 -08:00 committed by GitHub
commit 06205b55e6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
components/GridRep/index.scss
View file

@ -38,10 +38,6 @@
aspect-ratio: 2/1; aspect-ratio: 2/1;
display: grid; display: grid;
grid-template-columns: 1fr 3fr; /* left column takes up 1 fraction, right column takes up 3 fractions */ grid-template-columns: 1fr 3fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
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 */ grid-gap: $unit; /* add a gap of 8px between grid items */
.Weapon { .Weapon {
@ -50,6 +46,8 @@
} }
.Mainhand.Weapon { .Mainhand.Weapon {
aspect-ratio: 73/153;
display: grid;
grid-column: 1 / 2; /* spans one column */ grid-column: 1 / 2; /* spans one column */
} }
@ -67,7 +65,7 @@
} }
.Grid.Weapon { .Grid.Weapon {
aspect-ratio: 160 / 92; aspect-ratio: 280 / 160;
display: grid; display: grid;
} }
@ -75,7 +73,6 @@
.Grid.Weapon img[src*='jpg'] { .Grid.Weapon img[src*='jpg'] {
border-radius: 4px; border-radius: 4px;
width: 100%; width: 100%;
height: 100%;
} }
} }

8
components/GridRep/index.tsx
View file

@ -81,8 +81,12 @@ const GridRep = (props: Props) => {
let url = '' let url = ''
if (mainhand) { if (mainhand) {
if (mainhand.element == 0 && props.grid[0] && props.grid[0].element) { const weapon = Object.values(props.grid).find(
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${props.grid[0].element}.jpg` (w) => w && w.object.id === mainhand.id
)
if (mainhand.element == 0 && weapon && weapon.element) {
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${weapon.element}.jpg`
} else { } else {
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}.jpg` url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}.jpg`
} }

5
components/GridRepCollection/index.scss
View file

@ -1,7 +1,7 @@
.GridRepCollection { .GridRepCollection {
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, 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;
@ -10,8 +10,7 @@
max-width: 996px; max-width: 996px;
@include breakpoint(tablet) { @include breakpoint(tablet) {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
max-width: inherit;
} }
@include breakpoint(phone) { @include breakpoint(phone) {