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

Mobile hotfix

Browse source
This commit is contained in:
Justin Edmund 2022-12-26 16:03:06 -08:00
parent 12ccc53126
commit 82b1b49c5a
3 changed files with 34 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
components/FilterBar/index.scss
View file

@ -12,7 +12,8 @@
position: sticky;
transition: box-shadow 0.24s ease-in-out;
top: $unit * 4;
width: 966px;
width: 100%;
max-width: 996px;
@media (max-width: $tablet) {
position: static;

28
components/GridRep/index.scss
View file

@ -1,9 +1,12 @@
.GridRep {
border-radius: 6px;
aspect-ratio: 3/2;
border-radius: $card-corner;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: $unit;
padding: $unit * 2;
padding: $unit-2x;
max-width: 320px;
&:hover {
background: var(--grid-rep-hover);
@ -26,6 +29,7 @@
display: flex;
flex-direction: row;
flex-shrink: 0;
gap: $unit;
.weapon {
background: var(--card-bg);
@ -33,25 +37,27 @@
}
.grid_mainhand {
margin-right: $unit;
height: 139px;
width: 66px;
$d: 64px;
aspect-ratio: 200 / 418;
height: auto;
max-width: $d;
min-width: $d;
}
.grid_weapons {
$p: 29.5%;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: fit-content($p) fit-content($p) fit-content($p);
grid-template-rows: fit-content($p) fit-content($p) fit-content($p);
gap: $unit;
margin: 0;
padding: 0;
width: fit-content;
width: 100%;
}
.grid_weapon {
float: left;
height: 40px;
width: 70px;
aspect-ratio: 160 / 92;
}
.grid_mainhand img[src*='jpg'],

16
components/GridRepCollection/index.scss
View file

@ -1,9 +1,23 @@
.GridRepCollection {
display: grid;
grid-template-columns: repeat(auto-fit, 332px);
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin: 0 auto;
padding: 0;
transition: opacity 0.14s ease-in-out;
justify-items: center;
// width: fit-content;
width: auto;
max-width: 996px;
@media (max-width: $tablet) {
grid-template-columns: minmax(320px, 1fr);
max-width: inherit;
width: 100%;
}
@media (max-width: $phone) {
grid-template-columns: 1fr;
max-width: inherit;
width: 100%;
}
}