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;
display: grid;
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 */
.Weapon {
@ -50,6 +46,8 @@
}
.Mainhand.Weapon {
aspect-ratio: 73/153;
display: grid;
grid-column: 1 / 2; /* spans one column */
}
@ -67,7 +65,7 @@
}
.Grid.Weapon {
aspect-ratio: 160 / 92;
aspect-ratio: 280 / 160;
display: grid;
}
@ -75,7 +73,6 @@
.Grid.Weapon img[src*='jpg'] {
border-radius: 4px;
width: 100%;
height: 100%;
}
}

8
components/GridRep/index.tsx
View file

@ -81,8 +81,12 @@ const GridRep = (props: Props) => {
let url = ''
if (mainhand) {
if (mainhand.element == 0 && props.grid[0] && props.grid[0].element) {
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${props.grid[0].element}.jpg`
const weapon = Object.values(props.grid).find(
(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 {
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 {
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
margin: 0 auto;
padding: 0;
transition: opacity 0.14s ease-in-out;
@ -10,8 +10,7 @@
max-width: 996px;
@include breakpoint(tablet) {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
max-width: inherit;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@include breakpoint(phone) {