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; position: sticky;
transition: box-shadow 0.24s ease-in-out; transition: box-shadow 0.24s ease-in-out;
top: $unit * 4; top: $unit * 4;
width: 966px; width: 100%;
max-width: 996px;
@media (max-width: $tablet) { @media (max-width: $tablet) {
position: static; position: static;

28
components/GridRep/index.scss
View file

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

16
components/GridRepCollection/index.scss
View file

@ -1,9 +1,23 @@
.GridRepCollection { .GridRepCollection {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, 332px); 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;
// width: fit-content; // width: fit-content;
width: auto;
max-width: 996px; 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%;
}
} }