From d5332ccee5d5e4c6ef5d2d56554a70ea5ef3cee8 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 2 Feb 2022 23:39:06 -0800 Subject: [PATCH] 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%; + } + +} +