From 3cf889cd431897d924808b5a72e3e112539d449c Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Tue, 27 Dec 2022 14:54:24 -0800 Subject: [PATCH] Replace media query usage with mixin --- components/CharacterGrid/index.scss | 4 ++-- components/CharacterUnit/index.scss | 2 +- components/Dialog/index.scss | 2 +- components/ExtraSummons/index.scss | 2 +- components/ExtraWeapons/index.scss | 2 +- components/FilterBar/index.scss | 6 +++--- components/GridRepCollection/index.scss | 4 ++-- components/Header/index.scss | 2 +- components/JobSection/index.scss | 4 ++-- components/PartyDetails/index.scss | 4 ++-- components/PartySegmentedControl/index.scss | 20 ++++++++++---------- components/SearchModal/index.scss | 4 ++-- components/Segment/index.scss | 2 +- components/SummonGrid/index.scss | 2 +- components/SummonUnit/index.scss | 6 +++--- components/UncapStar/index.scss | 5 +---- components/WeaponGrid/index.scss | 6 +++--- components/WeaponUnit/index.scss | 11 ++++++----- styles/globals.scss | 4 ++-- 19 files changed, 45 insertions(+), 47 deletions(-) diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss index 4a45134f..be6aa48e 100644 --- a/components/CharacterGrid/index.scss +++ b/components/CharacterGrid/index.scss @@ -12,7 +12,7 @@ padding: 0; max-width: 761px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { justify-content: space-between; width: 100%; } @@ -20,7 +20,7 @@ & > * { margin-right: $unit * 3; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { margin-right: inherit; } } diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index e2f2736d..d2f611e5 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -56,7 +56,7 @@ height: auto; width: 131px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 17vw; } diff --git a/components/Dialog/index.scss b/components/Dialog/index.scss index 3ffd9616..5ca5967f 100644 --- a/components/Dialog/index.scss +++ b/components/Dialog/index.scss @@ -22,7 +22,7 @@ text-decoration: underline; } - @media (max-width: $phone) { + @include breakpoint(phone) { min-width: inherit; min-height: inherit; width: 100%; diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss index f8dad9c6..86a7c794 100644 --- a/components/ExtraSummons/index.scss +++ b/components/ExtraSummons/index.scss @@ -10,7 +10,7 @@ position: relative; left: 9px; - @media (max-width: $medium-screen) { + @include breakpoint(phone) { left: auto; max-width: auto; width: 100%; diff --git a/components/ExtraWeapons/index.scss b/components/ExtraWeapons/index.scss index eedc2514..8bdcfdaf 100644 --- a/components/ExtraWeapons/index.scss +++ b/components/ExtraWeapons/index.scss @@ -10,7 +10,7 @@ position: relative; left: 8px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { left: auto; max-width: auto; width: 100%; diff --git a/components/FilterBar/index.scss b/components/FilterBar/index.scss index 88c2c3ea..c0b2623d 100644 --- a/components/FilterBar/index.scss +++ b/components/FilterBar/index.scss @@ -15,7 +15,7 @@ width: 100%; max-width: 996px; - @media (max-width: $tablet) { + @include breakpoint(tablet) { position: static; flex-direction: column; width: 100%; @@ -29,7 +29,7 @@ gap: $unit; width: auto; - @media (max-width: $tablet) { + @include breakpoint(tablet) { flex-direction: column; width: 100%; } @@ -64,7 +64,7 @@ background-color: var(--select-contained-bg-hover); } - @media (max-width: $tablet) { + @include breakpoint(tablet) { width: 100%; max-width: inherit; text-align: center; diff --git a/components/GridRepCollection/index.scss b/components/GridRepCollection/index.scss index c3f58057..93098ba3 100644 --- a/components/GridRepCollection/index.scss +++ b/components/GridRepCollection/index.scss @@ -9,13 +9,13 @@ width: auto; max-width: 996px; - @media (max-width: $tablet) { + @include breakpoint(tablet) { grid-template-columns: minmax(320px, 1fr); max-width: inherit; width: 100%; } - @media (max-width: $phone) { + @include breakpoint(tablet) { grid-template-columns: 1fr; max-width: inherit; width: 100%; diff --git a/components/Header/index.scss b/components/Header/index.scss index 9832669b..b80b650e 100644 --- a/components/Header/index.scss +++ b/components/Header/index.scss @@ -36,7 +36,7 @@ margin-left: auto; } - @media (max-width: $phone) { + @include breakpoint(phone) { .Button .Text { display: none; } diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss index f2d49b57..6d95238b 100644 --- a/components/JobSection/index.scss +++ b/components/JobSection/index.scss @@ -3,7 +3,7 @@ display: flex; margin-bottom: $unit * 3; - @media (max-width: $phone) { + @include breakpoint(phone) { flex-direction: column; gap: $unit; } @@ -56,7 +56,7 @@ width: $width; transition: box-shadow 0.15s ease-in-out; - @media (max-width: $phone) { + @include breakpoint(phone) { aspect-ratio: 16/9; margin: 0; width: inherit; diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss index 2a6b1c13..34e81f90 100644 --- a/components/PartyDetails/index.scss +++ b/components/PartyDetails/index.scss @@ -3,7 +3,7 @@ flex-direction: column; margin-top: $unit-4x; - @media (max-width: $phone) { + @include breakpoint(phone) { padding: 0 $unit; } @@ -86,7 +86,7 @@ width: 60%; height: 60%; - @media (max-width: $tablet) { + @include breakpoint(tablet) { width: 100%; height: 100%; } diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss index 2a665786..96c414ab 100644 --- a/components/PartySegmentedControl/index.scss +++ b/components/PartySegmentedControl/index.scss @@ -9,7 +9,7 @@ max-width: 760px; position: relative; - @media (max-width: $phone) { + @include breakpoint(phone) { gap: $unit; margin-left: 0; margin-right: 0; @@ -20,16 +20,16 @@ &.Editable { justify-content: flex-start; } + } - .SegmentedControl { + .SegmentedControl { + flex-grow: 1; + + @include breakpoint(phone) { flex-grow: 1; - - @media (max-width: $phone) { - flex-grow: 1; - width: 100%; - display: grid; - grid-template-columns: auto auto auto; - } + width: 100%; + display: grid; + grid-template-columns: auto auto auto; } } } @@ -44,7 +44,7 @@ position: absolute; right: 0px; - @media (max-width: $phone) { + @include breakpoint(phone) { position: static; .Text { diff --git a/components/SearchModal/index.scss b/components/SearchModal/index.scss index 08e428a5..c2b51741 100644 --- a/components/SearchModal/index.scss +++ b/components/SearchModal/index.scss @@ -8,7 +8,7 @@ gap: 0; padding: 0; - @media (max-width: $phone) { + @include breakpoint(phone) { min-width: inherit; min-height: inherit; width: 96%; // is this even right @@ -68,7 +68,7 @@ padding: 0 ($unit * 1.5); overflow-y: scroll; - @media (max-width: $phone) { + @include breakpoint(phone) { max-height: inherit; } diff --git a/components/Segment/index.scss b/components/Segment/index.scss index 73bb4084..fa148d4e 100644 --- a/components/Segment/index.scss +++ b/components/Segment/index.scss @@ -34,7 +34,7 @@ } } - @media (max-width: $phone) { + @include breakpoint(phone) { min-width: initial; width: 100%; } diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss index c030ad78..dca045b5 100644 --- a/components/SummonGrid/index.scss +++ b/components/SummonGrid/index.scss @@ -14,7 +14,7 @@ text-overflow: ellipsis; overflow: hidden; - @media (max-width: $phone) { + @include breakpoint(phone) { &.Friend { max-width: 78px; } diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss index afd9840f..b67a81fe 100644 --- a/components/SummonUnit/index.scss +++ b/components/SummonUnit/index.scss @@ -9,7 +9,7 @@ width: 182px; height: auto; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 20.3vw; } } @@ -19,7 +19,7 @@ // min-height: 141px; min-height: 180px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { min-height: 16.5vw; } @@ -29,7 +29,7 @@ width: 148px; height: auto; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 20vw; } } diff --git a/components/UncapStar/index.scss b/components/UncapStar/index.scss index eb1cc882..ff0a7370 100644 --- a/components/UncapStar/index.scss +++ b/components/UncapStar/index.scss @@ -53,11 +53,8 @@ background-image: url('/icons/uncap/purple-hover@3x.png'); } } -} -// Phone up to iPhone 14 Pro Max -@media only screen and (max-width: 430px) and (max-height: 850px) and (-webkit-device-pixel-ratio: 3) { - .UncapStar { + @include breakpoint(phone) { background-size: cover; height: 14px; width: 14px; diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss index 3d563baf..e50bd027 100644 --- a/components/WeaponGrid/index.scss +++ b/components/WeaponGrid/index.scss @@ -2,7 +2,7 @@ display: flex; justify-content: center; - @media (max-width: $phone) { + @include breakpoint(phone) { display: grid; grid-template-columns: 1fr auto; } @@ -23,12 +23,12 @@ margin-bottom: $unit-3x; margin-right: $unit-3x; - @media (max-width: $tablet) { + @include breakpoint(tablet) { margin-bottom: $unit-2x; margin-right: $unit-2x; } - @media (max-width: $phone) { + @include breakpoint(tablet) { margin-bottom: $unit; margin-right: $unit; } diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index 5b74454d..fbe832d8 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -5,7 +5,7 @@ min-height: 139px; position: relative; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { min-height: auto; } @@ -28,11 +28,12 @@ margin-right: $unit-3x; max-width: 200px; - @media (max-width: $tablet) { + @include breakpoint(tablet) { margin-right: $unit-2x; } - @media (max-width: $phone) { + @include breakpoint(phone) { + margin-right: $unit-2x; margin-right: $unit; } @@ -62,7 +63,7 @@ } } - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 25vw; } } @@ -94,7 +95,7 @@ } } - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { width: 20vw; } } diff --git a/styles/globals.scss b/styles/globals.scss index e41e773a..79055b8a 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -113,7 +113,7 @@ select { margin-top: $unit * 3; min-width: 752px; - @media (max-width: $medium-screen) { + @include breakpoint(tablet) { min-width: auto; width: 100%; } @@ -291,7 +291,7 @@ i.tag { gap: $unit; padding: 0 ($unit * 3); - @media (max-width: $phone) { + @include breakpoint(phone) { display: grid; gap: 8px; grid-template-columns: 1fr 1fr;