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

Replace media query usage with mixin

Browse source
This commit is contained in:
Justin Edmund 2022-12-27 14:54:24 -08:00
parent ced4c35dbd
commit 3cf889cd43
19 changed files with 45 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/CharacterGrid/index.scss
View file

@ -12,7 +12,7 @@
padding: 0; padding: 0;
max-width: 761px; max-width: 761px;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
} }
@ -20,7 +20,7 @@
& > * { & > * {
margin-right: $unit * 3; margin-right: $unit * 3;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
margin-right: inherit; margin-right: inherit;
} }
} }

2
components/CharacterUnit/index.scss
View file

@ -56,7 +56,7 @@
height: auto; height: auto;
width: 131px; width: 131px;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
width: 17vw; width: 17vw;
} }

2
components/Dialog/index.scss
View file

@ -22,7 +22,7 @@
text-decoration: underline; text-decoration: underline;
} }
@media (max-width: $phone) { @include breakpoint(phone) {
min-width: inherit; min-width: inherit;
min-height: inherit; min-height: inherit;
width: 100%; width: 100%;

2
components/ExtraSummons/index.scss
View file

@ -10,7 +10,7 @@
position: relative; position: relative;
left: 9px; left: 9px;
@media (max-width: $medium-screen) { @include breakpoint(phone) {
left: auto; left: auto;
max-width: auto; max-width: auto;
width: 100%; width: 100%;

2
components/ExtraWeapons/index.scss
View file

@ -10,7 +10,7 @@
position: relative; position: relative;
left: 8px; left: 8px;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
left: auto; left: auto;
max-width: auto; max-width: auto;
width: 100%; width: 100%;

6
components/FilterBar/index.scss
View file

@ -15,7 +15,7 @@
width: 100%; width: 100%;
max-width: 996px; max-width: 996px;
@media (max-width: $tablet) { @include breakpoint(tablet) {
position: static; position: static;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
@ -29,7 +29,7 @@
gap: $unit; gap: $unit;
width: auto; width: auto;
@media (max-width: $tablet) { @include breakpoint(tablet) {
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
} }
@ -64,7 +64,7 @@
background-color: var(--select-contained-bg-hover); background-color: var(--select-contained-bg-hover);
} }
@media (max-width: $tablet) { @include breakpoint(tablet) {
width: 100%; width: 100%;
max-width: inherit; max-width: inherit;
text-align: center; text-align: center;

4
components/GridRepCollection/index.scss
View file

@ -9,13 +9,13 @@
width: auto; width: auto;
max-width: 996px; max-width: 996px;
@media (max-width: $tablet) { @include breakpoint(tablet) {
grid-template-columns: minmax(320px, 1fr); grid-template-columns: minmax(320px, 1fr);
max-width: inherit; max-width: inherit;
width: 100%; width: 100%;
} }
@media (max-width: $phone) { @include breakpoint(tablet) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
max-width: inherit; max-width: inherit;
width: 100%; width: 100%;

2
components/Header/index.scss
View file

@ -36,7 +36,7 @@
margin-left: auto; margin-left: auto;
} }
@media (max-width: $phone) { @include breakpoint(phone) {
.Button .Text { .Button .Text {
display: none; display: none;
} }

4
components/JobSection/index.scss
View file

@ -3,7 +3,7 @@
display: flex; display: flex;
margin-bottom: $unit * 3; margin-bottom: $unit * 3;
@media (max-width: $phone) { @include breakpoint(phone) {
flex-direction: column; flex-direction: column;
gap: $unit; gap: $unit;
} }
@ -56,7 +56,7 @@
width: $width; width: $width;
transition: box-shadow 0.15s ease-in-out; transition: box-shadow 0.15s ease-in-out;
@media (max-width: $phone) { @include breakpoint(phone) {
aspect-ratio: 16/9; aspect-ratio: 16/9;
margin: 0; margin: 0;
width: inherit; width: inherit;

4
components/PartyDetails/index.scss
View file

@ -3,7 +3,7 @@
flex-direction: column; flex-direction: column;
margin-top: $unit-4x; margin-top: $unit-4x;
@media (max-width: $phone) { @include breakpoint(phone) {
padding: 0 $unit; padding: 0 $unit;
} }
@ -86,7 +86,7 @@
width: 60%; width: 60%;
height: 60%; height: 60%;
@media (max-width: $tablet) { @include breakpoint(tablet) {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

20
components/PartySegmentedControl/index.scss
View file

@ -9,7 +9,7 @@
max-width: 760px; max-width: 760px;
position: relative; position: relative;
@media (max-width: $phone) { @include breakpoint(phone) {
gap: $unit; gap: $unit;
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -20,16 +20,16 @@
&.Editable { &.Editable {
justify-content: flex-start; justify-content: flex-start;
} }
}
.SegmentedControl { .SegmentedControl {
flex-grow: 1;
@include breakpoint(phone) {
flex-grow: 1; flex-grow: 1;
width: 100%;
@media (max-width: $phone) { display: grid;
flex-grow: 1; grid-template-columns: auto auto auto;
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
}
} }
} }
} }
@ -44,7 +44,7 @@
position: absolute; position: absolute;
right: 0px; right: 0px;
@media (max-width: $phone) { @include breakpoint(phone) {
position: static; position: static;
.Text { .Text {

4
components/SearchModal/index.scss
View file

@ -8,7 +8,7 @@
gap: 0; gap: 0;
padding: 0; padding: 0;
@media (max-width: $phone) { @include breakpoint(phone) {
min-width: inherit; min-width: inherit;
min-height: inherit; min-height: inherit;
width: 96%; // is this even right width: 96%; // is this even right
@ -68,7 +68,7 @@
padding: 0 ($unit * 1.5); padding: 0 ($unit * 1.5);
overflow-y: scroll; overflow-y: scroll;
@media (max-width: $phone) { @include breakpoint(phone) {
max-height: inherit; max-height: inherit;
} }

2
components/Segment/index.scss
View file

@ -34,7 +34,7 @@
} }
} }
@media (max-width: $phone) { @include breakpoint(phone) {
min-width: initial; min-width: initial;
width: 100%; width: 100%;
} }

2
components/SummonGrid/index.scss
View file

@ -14,7 +14,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
@media (max-width: $phone) { @include breakpoint(phone) {
&.Friend { &.Friend {
max-width: 78px; max-width: 78px;
} }

6
components/SummonUnit/index.scss
View file

@ -9,7 +9,7 @@
width: 182px; width: 182px;
height: auto; height: auto;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
width: 20.3vw; width: 20.3vw;
} }
} }
@ -19,7 +19,7 @@
// min-height: 141px; // min-height: 141px;
min-height: 180px; min-height: 180px;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
min-height: 16.5vw; min-height: 16.5vw;
} }
@ -29,7 +29,7 @@
width: 148px; width: 148px;
height: auto; height: auto;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
width: 20vw; width: 20vw;
} }
} }

5
components/UncapStar/index.scss
View file

@ -53,11 +53,8 @@
background-image: url('/icons/uncap/purple-hover@3x.png'); background-image: url('/icons/uncap/purple-hover@3x.png');
} }
} }
}
// Phone up to iPhone 14 Pro Max @include breakpoint(phone) {
@media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) {
.UncapStar {
background-size: cover; background-size: cover;
height: 14px; height: 14px;
width: 14px; width: 14px;

6
components/WeaponGrid/index.scss
View file

@ -2,7 +2,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
@media (max-width: $phone) { @include breakpoint(phone) {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }
@ -23,12 +23,12 @@
margin-bottom: $unit-3x; margin-bottom: $unit-3x;
margin-right: $unit-3x; margin-right: $unit-3x;
@media (max-width: $tablet) { @include breakpoint(tablet) {
margin-bottom: $unit-2x; margin-bottom: $unit-2x;
margin-right: $unit-2x; margin-right: $unit-2x;
} }
@media (max-width: $phone) { @include breakpoint(tablet) {
margin-bottom: $unit; margin-bottom: $unit;
margin-right: $unit; margin-right: $unit;
} }

11
components/WeaponUnit/index.scss
View file

@ -5,7 +5,7 @@
min-height: 139px; min-height: 139px;
position: relative; position: relative;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
min-height: auto; min-height: auto;
} }
@ -28,11 +28,12 @@
margin-right: $unit-3x; margin-right: $unit-3x;
max-width: 200px; max-width: 200px;
@media (max-width: $tablet) { @include breakpoint(tablet) {
margin-right: $unit-2x; margin-right: $unit-2x;
} }
@media (max-width: $phone) { @include breakpoint(phone) {
margin-right: $unit-2x;
margin-right: $unit; margin-right: $unit;
} }
@ -62,7 +63,7 @@
} }
} }
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
width: 25vw; width: 25vw;
} }
} }
@ -94,7 +95,7 @@
} }
} }
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
width: 20vw; width: 20vw;
} }
} }

4
styles/globals.scss
View file

@ -113,7 +113,7 @@ select {
margin-top: $unit * 3; margin-top: $unit * 3;
min-width: 752px; min-width: 752px;
@media (max-width: $medium-screen) { @include breakpoint(tablet) {
min-width: auto; min-width: auto;
width: 100%; width: 100%;
} }
@ -291,7 +291,7 @@ i.tag {
gap: $unit; gap: $unit;
padding: 0 ($unit * 3); padding: 0 ($unit * 3);
@media (max-width: $phone) { @include breakpoint(phone) {
display: grid; display: grid;
gap: 8px; gap: 8px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;