From 061e510b4479fcd98bded6f77705da265cf2d4b1 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 2 Feb 2022 23:34:38 -0800 Subject: [PATCH 1/5] Update variables --- styles/globals.scss | 43 ++++++++++++++++++++++--------------------- styles/variables.scss | 13 ++++++++----- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/styles/globals.scss b/styles/globals.scss index 1064b1b5..3b04bed6 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -1,42 +1,43 @@ @import '~meyer-reset-scss'; html { - background: $grey-90; - font-size: 62.5%; - padding: $unit * 2; + background: $background-color; + font-size: 62.5%; + padding: $unit * 2; } body { - -webkit-font-smoothing: antialiased; - font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; - font-size: 1.4rem; - - &.no-scroll { - overflow: hidden; - } + -webkit-font-smoothing: antialiased; + font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 1.4rem; + + &.no-scroll { + overflow: hidden; + } } a { - text-decoration: none; + text-decoration: none; } button, input { - font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; + font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; } h1, h2, h3, p { - color: $grey-00; + color: $grey-00; } h1 { - font-size: 2.1rem; - font-weight: $medium; - text-align: center; + font-size: 2.1rem; + font-weight: $medium; + text-align: center; } #Content { - display: flex; - flex-direction: column; - gap: $unit * 3; - margin-top: $unit * 3; -} \ No newline at end of file + display: flex; + flex-direction: column; + gap: $unit * 3; + margin-top: $unit * 3; + min-width: 752px; + diff --git a/styles/variables.scss b/styles/variables.scss index cb23afef..57418742 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,7 +1,8 @@ // @import 'include-media/dist/_include-media'; // Breakpoints -$breakpoints: (small: 320px, medium: 768px, large: 1024px); +$breakpoints: (small: 320px, medium: 800px, large: 1024px); +$medium-screen: 800px; // Sizing $unit: 8px; @@ -12,6 +13,7 @@ $grey-10: #777; $grey-50: #888; $grey-80: #E9E9E9; $grey-90: #F5F5F5; +$background-color: $grey-90; $blue: #61B3FF; $red: #FF6161; @@ -23,10 +25,11 @@ $medium: 500; $bold: 600; // Font size -$font-small: 12px; -$font-regular: 14px; -$font-large: 18px; -$font-xlarge: 21px; +$font-small: 11px; +$font-button: 15px; +$font-regular: 16px; +$font-large: 21px; +$font-xlarge: 24px; // Scale factors $scale-wide: scale(1.05, 1.05); From d5332ccee5d5e4c6ef5d2d56554a70ea5ef3cee8 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 2 Feb 2022 23:39:06 -0800 Subject: [PATCH 2/5] Make WeaponGrid responsive --- components/ExtraWeapons/index.scss | 19 +++- components/ExtraWeapons/index.tsx | 4 +- components/WeaponGrid/index.scss | 57 ++++++---- components/WeaponGrid/index.tsx | 6 +- components/WeaponUnit/index.scss | 164 ++++++++++++++++------------- styles/globals.scss | 7 ++ 6 files changed, 151 insertions(+), 106 deletions(-) diff --git a/components/ExtraWeapons/index.scss b/components/ExtraWeapons/index.scss index a8ac15f2..eac815e9 100644 --- a/components/ExtraWeapons/index.scss +++ b/components/ExtraWeapons/index.scss @@ -1,4 +1,4 @@ -#ExtraWeapons { +#ExtraGrid { background: #ECEBFF; border-radius: 8px; box-sizing: border-box; @@ -10,16 +10,31 @@ position: relative; left: 8px; + @media (max-width: $medium-screen) { + left: auto; + max-width: auto; + width: 100%; + } + & > span { color: #4F3C79; display: flex; align-items: center; + flex-grow: 1; justify-content: center; line-height: 1.2; font-weight: 500; margin-right: 16px; text-align: center; - width: 206px; + } + + .grid_weapons { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 0; + padding: 0; + max-width: 528px; } .WeaponUnit .WeaponImage { diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx index efa1dfa5..71fcda5c 100644 --- a/components/ExtraWeapons/index.tsx +++ b/components/ExtraWeapons/index.tsx @@ -25,9 +25,9 @@ const ExtraWeapons = (props: Props) => { const numWeapons: number = 3 return ( -
+
Additional
Weapons -
    +
      { Array.from(Array(numWeapons)).map((x, i) => { return ( diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss index b9245a27..b07265b7 100644 --- a/components/WeaponGrid/index.scss +++ b/components/WeaponGrid/index.scss @@ -1,31 +1,42 @@ -#WeaponGrid { +#MainGrid { display: flex; justify-content: center; + + @media (max-width: $medium-screen) { + + } + + .grid_weapons { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + margin: 0; + padding: 0; + max-width: 528px; + } +} + +#MainGrid, #ExtraGrid { + .grid_weapons > * { + margin-bottom: $unit * 3; + margin-right: $unit * 3; + + @media (max-width: $medium-screen) { + margin-bottom: $unit * 2; + margin-right: $unit * 2; + } + } + + .grid_weapons > *:nth-child(3n+3) { + margin-right: 0; + } + + .grid_weapons > li { + list-style: none; + } } #ExtraWeapons #grid_weapons > * { margin-bottom: 0; } -#grid_weapons { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin: 0; - padding: 0; - width: 528px; -} - -#grid_weapons > * { - margin-bottom: 24px; - margin-right: 24px; - -} - -#grid_weapons > *:nth-child(3n+3) { - margin-right: 0; -} - -#grid_weapons > li { - list-style: none; -} \ No newline at end of file diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index a684299a..7749be6d 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -238,10 +238,10 @@ const WeaponGrid = (props: Props) => { ) return ( -
      -
      +
      +
      { mainhandElement } -
        { weaponGridElement }
      +
        { weaponGridElement }
      { (() => { return (props.extra) ? extraGridElement : '' })() } diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss index 0b3fc9d4..a06bc10e 100644 --- a/components/WeaponUnit/index.scss +++ b/components/WeaponUnit/index.scss @@ -2,91 +2,103 @@ display: flex; flex-direction: column; gap: 4px; -} -.WeaponUnit .WeaponImage { - background: white; - border: 1px solid rgba(0, 0, 0, 0); - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 2px; - overflow: hidden; - transition: all 0.18s ease-in-out; -} + &.mainhand { + margin-right: $unit * 3; + max-width: 200px; -.WeaponUnit.editable .WeaponImage:hover { - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; - cursor: pointer; - transform: $scale-wide; -} + @media (max-width: $medium-screen) { + margin-right: $unit * 2; + } -.WeaponUnit.mainhand.editable .WeaponImage:hover { - transform: $scale-tall; -} + &.editable .WeaponImage:hover { + transform: $scale-tall; + } -.WeaponUnit.filled h3 { - display: block; -} + .WeaponImage { + aspect-ratio: 200 / 418; + width: 200px; + height: auto; + + @media (max-width: $medium-screen) { + width: 25vw; + } + } + } -.WeaponUnit.filled ul { - display: flex; -} + &.grid { + max-width: 160px; -.WeaponUnit h3, -.WeaponUnit ul { - display: none; -} + .WeaponImage { + aspect-ratio: 160 / 92; + list-style-type: none; + width: 160px; + height: auto; + + @media (max-width: $medium-screen) { + width: 20vw; + } + } + } -.WeaponUnit h3 { - color: #333; - font-size: $font-regular; - font-weight: 500; - margin: 0; - text-align: center; -} + &.filled h3 { + display: block; + } -.WeaponUnit img { - position: relative; - width: 100%; - z-index: 2; -} + &.filled ul { + display: flex; + } -.WeaponImage .icon { - position: absolute; - height: 20px; - width: 20px; - z-index: 1; + & h3, + & ul { + display: none; + } - svg { - fill: #c9c9c9; + .WeaponImage { + background: white; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 2px; + overflow: hidden; + transition: all 0.18s ease-in-out; + + &:hover .icon { + color: #555; + } + + &.editable .WeaponImage:hover { + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; + cursor: pointer; + transform: $scale-wide; + } + + h3 { + color: #333; + font-size: $font-regular; + font-weight: 500; + margin: 0; + text-align: center; + } + + img { + position: relative; + width: 100%; + z-index: 2; + } + + .icon { + position: absolute; + height: 20px; + width: 20px; + z-index: 1; + + svg { + fill: #c9c9c9; + } + } } } - -.WeaponImage:hover .icon { - color: #555; -} - -/* Mainhand */ -.WeaponUnit.mainhand { - margin-right: 24px; - max-width: 200px; -} - -.WeaponUnit.mainhand .WeaponImage { - height: 418px; - width: 200px; -} - -/* Grid */ -.WeaponUnit.grid { - max-width: 160px; -} - -.WeaponUnit.grid .WeaponImage { - list-style-type: none; - height: 92px; - width: 160px; -} \ No newline at end of file diff --git a/styles/globals.scss b/styles/globals.scss index 3b04bed6..295a5a80 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -41,3 +41,10 @@ h1 { margin-top: $unit * 3; min-width: 752px; + @media (max-width: $medium-screen) { + min-width: auto; + width: 100%; + } + +} + From bbc97d8e55daef8111d0f6af48778309d90ffa07 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 2 Feb 2022 23:58:01 -0800 Subject: [PATCH 3/5] Make CharacterGrid responsive --- components/CharacterGrid/index.scss | 16 ++-- components/CharacterUnit/index.scss | 114 +++++++++++++++------------- components/WeaponGrid/index.scss | 4 - 3 files changed, 71 insertions(+), 63 deletions(-) diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss index 3daffa9d..e83c3cfa 100644 --- a/components/CharacterGrid/index.scss +++ b/components/CharacterGrid/index.scss @@ -5,15 +5,21 @@ #grid_characters { display: flex; - flex-direction: row; - flex-wrap: wrap; margin: 0; padding: 0; - width: 761px; + max-width: 761px; + + @media (max-width: $medium-screen) { + justify-content: space-between; + width: 100%; + } & > * { - margin-bottom: 24px; - margin-right: 24px; + margin-right: $unit * 3; + + @media (max-width: $medium-screen) { + margin-right: inherit; + } } & > li:last-child { diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss index 2d104efc..400e0ee7 100644 --- a/components/CharacterUnit/index.scss +++ b/components/CharacterUnit/index.scss @@ -3,68 +3,74 @@ flex-direction: column; gap: 4px; max-width: 200px; -} -.CharacterUnit .CharacterImage { - background: white; - border: 1px solid rgba(0, 0, 0, 0); - border-radius: 8px; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - transition: all 0.18s ease-in-out; - height: 268px; - width: 131px; -} + &.editable .CharacterImage:hover { + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; + cursor: pointer; + transform: $scale-tall; + } -.CharacterUnit.editable .CharacterImage:hover { - border: 1px solid rgba(0, 0, 0, 0.1); - box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; - cursor: pointer; - transform: $scale-tall; -} + &.filled h3 { + display: block; + } -.CharacterUnit.filled h3 { - display: block; -} + &.filled ul { + display: flex; + } -.CharacterUnit.filled ul { - display: flex; -} + h3, + ul { + display: none; + } -.CharacterUnit h3, -.CharacterUnit ul { - display: none; -} + h3 { + color: #333; + font-size: $font-regular; + font-weight: 500; + margin: 0; + max-width: 131px; + text-align: center; + word-wrap: normal; + } -.CharacterUnit h3 { - color: #333; - font-size: $font-regular; - font-weight: 500; - margin: 0; - max-width: 131px; - text-align: center; - word-wrap: normal; -} + img { + position: relative; + width: 100%; + z-index: 2; + } + -.CharacterUnit img { - position: relative; - width: 100%; - z-index: 2; -} + .CharacterImage { + aspect-ratio: 131 / 238; + background: white; + border: 1px solid rgba(0, 0, 0, 0); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transition: all 0.18s ease-in-out; + height: auto; + width: 131px; -.CharacterImage .icon { - position: absolute; - height: 20px; - width: 20px; - z-index: 1; + @media (max-width: $medium-screen) { + width: 17vw; + } - svg { - fill: #c9c9c9; + &:hover .icon { + color: #555; + } + + .icon { + position: absolute; + height: 20px; + width: 20px; + z-index: 1; + + svg { + fill: #c9c9c9; + } + } } } - -.CharacterImage:hover .icon { - color: #555; -} \ No newline at end of file diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss index b07265b7..7c37255b 100644 --- a/components/WeaponGrid/index.scss +++ b/components/WeaponGrid/index.scss @@ -2,10 +2,6 @@ display: flex; justify-content: center; - @media (max-width: $medium-screen) { - - } - .grid_weapons { display: grid; grid-template-columns: 1fr 1fr 1fr; From 6ea13cad82e9d41a3150dcb89aa469ba9c05bbc0 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 00:10:15 -0800 Subject: [PATCH 4/5] Make SummonGrid responsive --- components/ExtraSummons/index.scss | 6 +++ components/SummonGrid/index.scss | 1 - components/SummonUnit/index.scss | 59 ++++++++++++++++++------------ 3 files changed, 42 insertions(+), 24 deletions(-) diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss index 5738570e..9ff4fd60 100644 --- a/components/ExtraSummons/index.scss +++ b/components/ExtraSummons/index.scss @@ -10,6 +10,12 @@ position: relative; left: 9px; + @media (max-width: $medium-screen) { + left: auto; + max-width: auto; + width: 100%; + } + & > span { color: #825B39; display: flex; diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss index 8c994b5e..91ae1f18 100644 --- a/components/SummonGrid/index.scss +++ b/components/SummonGrid/index.scss @@ -23,7 +23,6 @@ #grid_summons > li { list-style: none; - min-height: 180px; } #ExtraSummons #grid_summons > li { diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss index 1f1492be..1570cec7 100644 --- a/components/SummonUnit/index.scss +++ b/components/SummonUnit/index.scss @@ -3,6 +3,42 @@ flex-direction: column; gap: 4px; + &.main .SummonImage, + &.friend .SummonImage { + aspect-ratio: 182 / 315; + width: 182px; + height: auto; + + @media (max-width: $medium-screen) { + width: 20.3vw; + } + } + + &.grid { + // max-width: 148px; + // min-height: 141px; + min-height: 180px; + + @media (max-width: $medium-screen) { + min-height: 16.5vw; + } + + .SummonImage { + aspect-ratio: 148 / 111; + list-style-type: none; + width: 148px; + height: auto; + + @media (max-width: $medium-screen) { + width: 20vw; + } + } + } + + &.friend { + margin-right: 0; + } + .SummonImage { background: white; border: 1px solid rgba(0, 0, 0, 0); @@ -67,26 +103,3 @@ z-index: 2; } } - -/* Mainhand */ -.SummonUnit.friend { - margin-right: 0; -} - -.SummonUnit.main .SummonImage, -.SummonUnit.friend .SummonImage { - height: 315px; - width: 182px; -} - -/* Grid */ -.SummonUnit.grid { - max-width: 148px; - min-height: 141px; -} - -.SummonUnit.grid .SummonImage { - list-style-type: none; - height: 111px; - width: 148px; -} \ No newline at end of file From d3da38b6c423fb6131b2c7393243f8e75529ea70 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Thu, 3 Feb 2022 00:15:42 -0800 Subject: [PATCH 5/5] Small refactoring --- components/CharacterGrid/index.scss | 2 +- components/CharacterGrid/index.tsx | 2 +- components/ExtraSummons/index.scss | 17 ++++++++++++++++ components/SummonGrid/index.scss | 30 +++++++++++------------------ components/SummonGrid/index.tsx | 2 +- 5 files changed, 31 insertions(+), 22 deletions(-) diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss index e83c3cfa..79725c38 100644 --- a/components/CharacterGrid/index.scss +++ b/components/CharacterGrid/index.scss @@ -1,4 +1,4 @@ -.CharacterGrid { +#CharacterGrid { display: flex; justify-content: center; } diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx index af78ed7e..df55fe71 100644 --- a/components/CharacterGrid/index.tsx +++ b/components/CharacterGrid/index.tsx @@ -194,7 +194,7 @@ const CharacterGrid = (props: Props) => { // Render: JSX components return ( -
      +
        {Array.from(Array(numCharacters)).map((x, i) => { return ( diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss index 9ff4fd60..ac570251 100644 --- a/components/ExtraSummons/index.scss +++ b/components/ExtraSummons/index.scss @@ -28,6 +28,23 @@ width: 387px; } + #grid_summons { + display: grid; + grid-template-columns: auto auto; + grid-column-gap: $unit * 2; + grid-template-rows: 1fr; + grid-row-gap: $unit * 3; + + & > li { + list-style: none; + min-height: 0; + + .SummonUnit { + min-height: 0; + } + } + } + .SummonUnit .SummonImage { background: #facea7; } diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss index 91ae1f18..e1c478aa 100644 --- a/components/SummonGrid/index.scss +++ b/components/SummonGrid/index.scss @@ -1,4 +1,4 @@ -.SummonGrid { +#SummonGrid { display: grid; grid-template-columns: auto auto auto; grid-column-gap: $unit * 2; @@ -11,24 +11,16 @@ margin-bottom: $unit; text-align: center; } -} -#grid_summons { - display: grid; - grid-template-columns: auto auto; - grid-column-gap: $unit * 2; - grid-template-rows: 1fr; - grid-row-gap: $unit * 3; -} + #grid_summons { + display: grid; + grid-template-columns: auto auto; + grid-column-gap: $unit * 2; + grid-template-rows: 1fr; + grid-row-gap: $unit * 3; -#grid_summons > li { - list-style: none; -} - -#ExtraSummons #grid_summons > li { - min-height: 0; - - .SummonUnit { - min-height: 0; + & > li { + list-style: none; + } } -} \ No newline at end of file +} diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx index 476a6292..baf16dd9 100644 --- a/components/SummonGrid/index.tsx +++ b/components/SummonGrid/index.tsx @@ -265,7 +265,7 @@ const SummonGrid = (props: Props) => { ) return (
        -
        +
        { mainSummonElement } { friendSummonElement } { summonGridElement }