From 36fe175f8fcb9559910c8862614957e179337044 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 04:20:20 -0800
Subject: [PATCH 1/8] Make responsive updates to weapon grid CSS

---
 components/PartyDetails/index.scss          |  3 +-
 components/PartySegmentedControl/index.scss | 35 +++++++---
 components/WeaponGrid/index.scss            | 74 ++++++++++-----------
 components/WeaponGrid/index.tsx             |  2 +-
 components/WeaponUnit/index.scss            | 40 ++++-------
 components/WeaponUnit/index.tsx             |  4 +-
 styles/variables.scss                       |  2 +
 7 files changed, 79 insertions(+), 81 deletions(-)

diff --git a/components/PartyDetails/index.scss b/components/PartyDetails/index.scss
index 6d1e0e43..2c570b1d 100644
--- a/components/PartyDetails/index.scss
+++ b/components/PartyDetails/index.scss
@@ -1,7 +1,8 @@
 .DetailsWrapper {
   display: flex;
   flex-direction: column;
-  margin-top: $unit-4x;
+  margin: $unit-4x auto 0 auto;
+  max-width: $grid-width;
 
   @include breakpoint(phone) {
     padding: 0 $unit;
diff --git a/components/PartySegmentedControl/index.scss b/components/PartySegmentedControl/index.scss
index 5fd02fa6..a6fd6c50 100644
--- a/components/PartySegmentedControl/index.scss
+++ b/components/PartySegmentedControl/index.scss
@@ -6,22 +6,30 @@
   justify-content: center;
   margin: 0 auto;
   margin-bottom: $unit * 3;
-  max-width: 760px;
+  max-width: $grid-width;
   position: relative;
 
-  @include breakpoint(phone) {
-    gap: $unit;
-    margin-left: 0;
-    margin-right: 0;
-    padding: 0 $unit;
-    max-width: auto;
-    width: 100%;
+  // prettier-ignore
+  @media only screen 
+    and (max-width: 550px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
+      gap: $unit;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0 $unit;
+      max-width: auto;
+      width: 100%;
   }
 
   .SegmentedControl {
     flex-grow: 1;
 
-    @include breakpoint(phone) {
+    // prettier-ignore
+    @media only screen 
+    and (max-width: 550px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
       flex-grow: 1;
       width: 100%;
       display: grid;
@@ -34,13 +42,18 @@
   color: #888;
   display: flex;
   font-weight: $normal;
-  gap: 8px;
+  gap: $unit;
   line-height: 34px;
   height: 100%;
   position: absolute;
   right: 0px;
+  top: 1px;
 
-  @include breakpoint(phone) {
+  // prettier-ignore
+  @media only screen 
+    and (max-width: 550px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
     position: static;
 
     .Text {
diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss
index e50bd027..17672ca1 100644
--- a/components/WeaponGrid/index.scss
+++ b/components/WeaponGrid/index.scss
@@ -1,52 +1,50 @@
-#MainGrid {
+#WeaponGrid {
   display: flex;
   justify-content: center;
 
-  @include breakpoint(phone) {
+  #MainGrid {
+    aspect-ratio: 2/1;
     display: grid;
-    grid-template-columns: 1fr auto;
-  }
-
-  .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-3x;
-    margin-right: $unit-3x;
+    gap: $unit-3x;
+    grid-template-columns: 1.278fr 3fr;
+    justify-items: center;
+    grid-template-areas:
+      'mainhand grid'
+      'mainhand grid'
+      'mainhand grid';
+    max-width: $grid-width;
 
     @include breakpoint(tablet) {
-      margin-bottom: $unit-2x;
-      margin-right: $unit-2x;
+      gap: $unit-2x;
     }
 
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
+  }
+
+  .Weapons {
+    display: grid; /* make the right-images container a grid */
+    grid-template-columns: repeat(
+      3,
+      minmax(0, 1fr)
+    ); /* create 3 columns, each taking up 1 fraction */
+    grid-template-rows: repeat(
+      3,
+      1fr
+    ); /* create 3 rows, each taking up 1 fraction */
+    gap: $unit-3x;
+
     @include breakpoint(tablet) {
-      margin-bottom: $unit;
-      margin-right: $unit;
+      gap: $unit-2x;
     }
 
-    &:nth-last-child(-n + 3) {
-      margin-bottom: 0;
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
+
+    li {
+      list-style: none;
     }
   }
-
-  .grid_weapons > *:nth-child(3n + 3) {
-    margin-right: 0;
-  }
-
-  .grid_weapons > li {
-    list-style: none;
-  }
-}
-
-#ExtraWeapons #grid_weapons > * {
-  margin-bottom: 0;
 }
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index 83d8aad0..e6e7c417 100644
--- a/components/WeaponGrid/index.tsx
+++ b/components/WeaponGrid/index.tsx
@@ -361,7 +361,7 @@ const WeaponGrid = (props: Props) => {
       {incompatibleAlert()}
       <div id="MainGrid">
         {mainhandElement}
-        <ul className="grid_weapons">{weaponGridElement}</ul>
+        <ul className="Weapons">{weaponGridElement}</ul>
       </div>
 
       {(() => {
diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index fbe832d8..830c1559 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -1,9 +1,11 @@
 .WeaponUnit {
+  align-items: center;
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  min-height: 139px;
+  gap: $unit-half;
   position: relative;
+  width: 100%;
+  height: auto;
 
   @include breakpoint(tablet) {
     min-height: auto;
@@ -25,25 +27,14 @@
   }
 
   &.mainhand {
-    margin-right: $unit-3x;
-    max-width: 200px;
-
-    @include breakpoint(tablet) {
-      margin-right: $unit-2x;
-    }
-
-    @include breakpoint(phone) {
-      margin-right: $unit-2x;
-      margin-right: $unit;
-    }
+    display: flex;
 
     &.editable .WeaponImage:hover {
       transform: $scale-tall;
     }
 
     .WeaponImage {
-      aspect-ratio: 200 / 418;
-      width: 200px;
+      width: 100%;
       height: auto;
 
       .Awakening {
@@ -62,20 +53,13 @@
           height: auto;
         }
       }
-
-      @include breakpoint(tablet) {
-        width: 25vw;
-      }
     }
   }
 
   &.grid {
-    max-width: 160px;
-
     .WeaponImage {
-      aspect-ratio: 160 / 92;
       list-style-type: none;
-      width: 160px;
+      width: 100%;
       height: auto;
 
       .Awakening {
@@ -94,10 +78,6 @@
           height: auto;
         }
       }
-
-      @include breakpoint(tablet) {
-        width: 20vw;
-      }
     }
   }
 
@@ -189,4 +169,10 @@
       }
     }
   }
+
+  .WeaponName {
+    @include breakpoint(phone) {
+      font-size: $font-tiny;
+    }
+  }
 }
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index dc30dd4a..fba0d827 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -395,9 +395,7 @@ const WeaponUnit = (props: Props) => {
       gridWeapon.id &&
       canBeModified(gridWeapon) ? (
         <WeaponModal gridWeapon={gridWeapon}>
-          <div>
-            <Button accessoryIcon={<SettingsIcon />} />
-          </div>
+          <Button accessoryIcon={<SettingsIcon />} />
         </WeaponModal>
       ) : (
         ''
diff --git a/styles/variables.scss b/styles/variables.scss
index b3f377e2..6838edfa 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -13,6 +13,8 @@ $laptop: 1280px;
 $tablet: 768px;
 $phone: 375px;
 
+$grid-width: 720px;
+
 // Legacy
 $medium-screen: 768px;
 

From feb3b6c2ca9cc6161cb8194e93206654a32f3573 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 04:28:13 -0800
Subject: [PATCH 2/8] Smaller updates to responsive character CSS grid

---
 components/CharacterUnit/index.scss |  6 ++++++
 components/JobSection/index.scss    | 29 ++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index afac9443..0cf54982 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -76,4 +76,10 @@
       }
     }
   }
+
+  .CharacterName {
+    @include breakpoint(phone) {
+      font-size: $font-tiny;
+    }
+  }
 }
diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss
index 6ef18d49..dcdbed48 100644
--- a/components/JobSection/index.scss
+++ b/components/JobSection/index.scss
@@ -1,14 +1,20 @@
 #Job {
   box-sizing: border-box;
   display: flex;
-  margin-bottom: $unit * 3;
+  margin-bottom: $unit-3x;
+  width: 100%;
 
-  @include breakpoint(tablet) {
-    align-items: center;
-    flex-direction: column;
-    gap: $unit;
-    justify-content: center;
-    max-width: 447px;
+  // prettier-ignore
+  @media only screen 
+      and (max-width: 800px) 
+      and (max-height: 920px) 
+      and (-webkit-min-device-pixel-ratio: 2) {
+        align-items: center;
+        flex-direction: column;
+        gap: $unit;
+        justify-content: center;
+        width: 100%;
+        // max-width: 447px;
   }
 
   select {
@@ -60,8 +66,13 @@
     width: $width;
     transition: box-shadow 0.15s ease-in-out;
 
-    @include breakpoint(tablet) {
-      margin-right: 0;
+    // prettier-ignore
+    @media only screen 
+        and (max-width: 800px) 
+        and (max-height: 920px) 
+        and (-webkit-min-device-pixel-ratio: 2) {
+          margin-right: 0;
+          width: 100%;
     }
 
     @include breakpoint(phone) {

From ed00f43af3b4f60cbad3855d83723371fe8c5d5e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 04:51:41 -0800
Subject: [PATCH 3/8] Fix empty state for weapons

---
 components/WeaponUnit/index.scss   |   4 ++++
 components/WeaponUnit/index.tsx    |  19 ++++++++++++++++---
 public/images/placeholder-grid.png | Bin 0 -> 615 bytes
 public/images/placeholder-main.png | Bin 0 -> 1135 bytes
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 public/images/placeholder-grid.png
 create mode 100644 public/images/placeholder-main.png

diff --git a/components/WeaponUnit/index.scss b/components/WeaponUnit/index.scss
index 830c1559..349bb8a3 100644
--- a/components/WeaponUnit/index.scss
+++ b/components/WeaponUnit/index.scss
@@ -156,6 +156,10 @@
       position: relative;
       width: 100%;
       z-index: 2;
+
+      &.Placeholder {
+        opacity: 0;
+      }
     }
 
     .icon {
diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index fba0d827..d320e60f 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import classnames from 'classnames'
+import classNames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
 import WeaponModal from '~components/WeaponModal'
@@ -36,7 +36,7 @@ const WeaponUnit = (props: Props) => {
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
-  const classes = classnames({
+  const classes = classNames({
     WeaponUnit: true,
     mainhand: props.unitType == 0,
     grid: props.unitType == 1,
@@ -73,6 +73,12 @@ const WeaponUnit = (props: Props) => {
     setImageUrl(imgSrc)
   }
 
+  function placeholderImageUrl() {
+    return props.unitType == 0
+      ? '/images/placeholder-main.png'
+      : '/images/placeholder-grid.png'
+  }
+
   function awakeningImage() {
     if (
       props.gridWeapon &&
@@ -366,7 +372,14 @@ const WeaponUnit = (props: Props) => {
           {ultimaImages()}
         </div>
       </div>
-      <img alt={weapon?.name.en} className="grid_image" src={imageUrl} />
+      <img
+        alt={weapon?.name.en}
+        className={classNames({
+          GridImage: true,
+          Placeholder: imageUrl === '',
+        })}
+        src={imageUrl !== '' ? imageUrl : placeholderImageUrl()}
+      />
       {props.editable ? (
         <span className="icon">
           <PlusIcon />
diff --git a/public/images/placeholder-grid.png b/public/images/placeholder-grid.png
new file mode 100644
index 0000000000000000000000000000000000000000..d47aea090d4b9b2aad1e4d34482400dfe844b2b5
GIT binary patch
literal 615
zcmeAS@N?(olHy`uVBq!ia0y~yV3Yu|7jUov$?FNl3P6gpz$3Dlfq`2Xgc%uT%>k)k
zEDmyaVpw-h<|UBBlJ4m1$iT3%pZiZDD^Tu_r;B4q1>@T*j*JWnJPZpn|7W~jqWO+p
s(PH;+HiZIq1tkdu<xw;oL*O$b-#nJZE@zy8>41U3)78&qol`;+0KfKIr~m)}

literal 0
HcmV?d00001

diff --git a/public/images/placeholder-main.png b/public/images/placeholder-main.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f88e6ec35f5b439a8d4381045c8c7c465ab681e
GIT binary patch
literal 1135
zcmeAS@N?(olHy`uVBq!ia0vp^Cm0wQmvFEFStXKL+(3%6z$3Dlfq`2Xgc%uT&5-~K
zG8PB9J29*~C-V}>VM%xNb!1@J*w6hZkrl{g@pN$vsbGA2nUV2;f&hc!_J0@mO%}W0
z%^>?DElvNytM~(x6$Drs6*yQN6*!n21vr`<1X!9zg+@bSG))YXtWdyUf1Pc0_q3K~
QVEMq{>FVdQ&MBb@0Ne+{o&W#<

literal 0
HcmV?d00001


From 44209c82af343a5cfef3144aa1a118b01de16910 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 05:10:10 -0800
Subject: [PATCH 4/8] Update ExtraWeapons

---
 components/ExtraWeapons/index.scss | 38 ++++++++++++++++++++----------
 components/ExtraWeapons/index.tsx  |  2 +-
 components/WeaponGrid/index.scss   | 11 +++++----
 components/WeaponGrid/index.tsx    |  2 +-
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/components/ExtraWeapons/index.scss b/components/ExtraWeapons/index.scss
index 8bdcfdaf..4d7b2c49 100644
--- a/components/ExtraWeapons/index.scss
+++ b/components/ExtraWeapons/index.scss
@@ -1,14 +1,15 @@
 #ExtraGrid {
   background: var(--extra-purple-bg);
-  border-radius: 8px;
+  border-radius: $card-corner;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1.42fr 3fr;
   justify-content: center;
   margin: 20px auto;
-  max-width: 766px;
-  padding: 16px 16px 16px 0;
+  max-width: calc($grid-width + 20px);
+  padding: $unit-2x $unit-2x $unit-2x 0;
   position: relative;
-  left: 8px;
+  left: $unit;
 
   @include breakpoint(tablet) {
     left: auto;
@@ -16,6 +17,13 @@
     width: 100%;
   }
 
+  @include breakpoint(phone) {
+    display: flex;
+    gap: $unit-2x;
+    padding: $unit-2x;
+    flex-direction: column;
+  }
+
   & > span {
     color: var(--extra-purple-text);
     display: flex;
@@ -24,17 +32,21 @@
     justify-content: center;
     line-height: 1.2;
     font-weight: 500;
-    margin-right: 16px;
     text-align: center;
   }
 
-  .grid_weapons {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin: 0;
-    padding: 0;
-    max-width: 528px;
+  #ExtraWeapons {
+    display: grid;
+    gap: $unit-3x;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+
+    @include breakpoint(tablet) {
+      gap: $unit-2x;
+    }
+
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
   }
 
   .WeaponUnit .WeaponImage {
diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx
index 0e3ae493..e0415ead 100644
--- a/components/ExtraWeapons/index.tsx
+++ b/components/ExtraWeapons/index.tsx
@@ -23,7 +23,7 @@ const ExtraWeapons = (props: Props) => {
   return (
     <div id="ExtraGrid">
       <span>{t('extra_weapons')}</span>
-      <ul className="grid_weapons">
+      <ul id="ExtraWeapons">
         {Array.from(Array(numWeapons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>
diff --git a/components/WeaponGrid/index.scss b/components/WeaponGrid/index.scss
index 17672ca1..c20da5c6 100644
--- a/components/WeaponGrid/index.scss
+++ b/components/WeaponGrid/index.scss
@@ -1,9 +1,10 @@
 #WeaponGrid {
+  align-items: center;
   display: flex;
+  flex-direction: column;
   justify-content: center;
 
   #MainGrid {
-    aspect-ratio: 2/1;
     display: grid;
     gap: $unit-3x;
     grid-template-columns: 1.278fr 3fr;
@@ -23,7 +24,7 @@
     }
   }
 
-  .Weapons {
+  #Weapons {
     display: grid; /* make the right-images container a grid */
     grid-template-columns: repeat(
       3,
@@ -42,9 +43,9 @@
     @include breakpoint(phone) {
       gap: $unit;
     }
+  }
 
-    li {
-      list-style: none;
-    }
+  li {
+    list-style: none;
   }
 }
diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx
index e6e7c417..59361cfa 100644
--- a/components/WeaponGrid/index.tsx
+++ b/components/WeaponGrid/index.tsx
@@ -361,7 +361,7 @@ const WeaponGrid = (props: Props) => {
       {incompatibleAlert()}
       <div id="MainGrid">
         {mainhandElement}
-        <ul className="Weapons">{weaponGridElement}</ul>
+        <ul id="Weapons">{weaponGridElement}</ul>
       </div>
 
       {(() => {

From 562d52a62617df61dea42f5b8f7890a7bffbd51f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 05:14:03 -0800
Subject: [PATCH 5/8] Small fixes to Character CSS

* Constrain to $grid-width
* Fix spacing between breakpoints
---
 components/CharacterGrid/index.scss | 17 +++++++++++++----
 components/CharacterGrid/index.tsx  |  2 +-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss
index 97fc45ad..f379266b 100644
--- a/components/CharacterGrid/index.scss
+++ b/components/CharacterGrid/index.scss
@@ -3,27 +3,36 @@
   flex-direction: column;
   justify-content: center;
   margin: auto;
-  max-width: 761px;
+  max-width: $grid-width;
 
   @include breakpoint(tablet) {
     align-items: center;
   }
 }
 
-#grid_characters {
+#Characters {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: $unit;
+  gap: $unit-3x;
   margin: 0;
   padding: 0;
-  max-width: 761px;
+  max-width: $grid-width;
   isolation: isolate;
 
   @include breakpoint(tablet) {
+    gap: $unit-2x;
     justify-content: space-between;
     width: 100%;
   }
 
+  // prettier-ignore
+  @media only screen 
+    and (max-width: 500px) 
+    and (max-height: 920px) 
+    and (-webkit-min-device-pixel-ratio: 2) {
+      gap: $unit;
+  }
+
   & > li:last-child {
     margin: 0;
   }
diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx
index 916bc677..f74d6e0b 100644
--- a/components/CharacterGrid/index.tsx
+++ b/components/CharacterGrid/index.tsx
@@ -361,7 +361,7 @@ const CharacterGrid = (props: Props) => {
           resolveConflict={resolveConflict}
           resetConflict={resetConflict}
         />
-        <ul id="grid_characters">
+        <ul id="Characters">
           {Array.from(Array(numCharacters)).map((x, i) => {
             return (
               <li key={`grid_unit_${i}`}>

From 60879b24f513b3e3efa3ea3092681c4a7a6c8ea3 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 05:44:45 -0800
Subject: [PATCH 6/8] Move placeholders to directory

---
 components/WeaponUnit/index.tsx                   |   4 ++--
 .../placeholders/placeholder-summon-grid.png      | Bin 0 -> 479 bytes
 .../placeholders/placeholder-summon-main.png      | Bin 0 -> 903 bytes
 .../placeholder-weapon-grid.png}                  | Bin
 .../placeholder-weapon-main.png}                  | Bin
 5 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 public/images/placeholders/placeholder-summon-grid.png
 create mode 100644 public/images/placeholders/placeholder-summon-main.png
 rename public/images/{placeholder-grid.png => placeholders/placeholder-weapon-grid.png} (100%)
 rename public/images/{placeholder-main.png => placeholders/placeholder-weapon-main.png} (100%)

diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx
index d320e60f..91bf406a 100644
--- a/components/WeaponUnit/index.tsx
+++ b/components/WeaponUnit/index.tsx
@@ -75,8 +75,8 @@ const WeaponUnit = (props: Props) => {
 
   function placeholderImageUrl() {
     return props.unitType == 0
-      ? '/images/placeholder-main.png'
-      : '/images/placeholder-grid.png'
+      ? '/images/placeholders/placeholder-weapon-main.png'
+      : '/images/placeholders/placeholder-weapon-grid.png'
   }
 
   function awakeningImage() {
diff --git a/public/images/placeholders/placeholder-summon-grid.png b/public/images/placeholders/placeholder-summon-grid.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f2807dc9d7a207c46cde78599965bc5bfbd0e4a
GIT binary patch
literal 479
zcmeAS@N?(olHy`uVBq!ia0vp^JAk;0gAGVZHZ~*zDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;opj?Tki(^Oy<J(J&f(!~g3=1>=XS`lw`%i&6
qz5Kqz6<H49IVJ}^M+vHi!SC*Rmhw}VuL%I-gTd3)&t;ucLK6T#+^50-

literal 0
HcmV?d00001

diff --git a/public/images/placeholders/placeholder-summon-main.png b/public/images/placeholders/placeholder-summon-main.png
new file mode 100644
index 0000000000000000000000000000000000000000..d215045fa7550386db5153e84d1ff2c8141616df
GIT binary patch
literal 903
zcmeAS@N?(olHy`uVBq!ia0vp^M;I6wLpa!gtm^HP=Kv|r0*}aI1_o|n5N2eUHAey{
z$XFcY?!>U}oXkrghb7(7*O7r?V?XzwL{<g{W*JWx$B+ufx0fAx859K=4B!3nj`pAM
zK|y)Z*9-Y+-<a0bGxiGzI5}`IDzdbUGDZVo1f>L-gHPDFd6*aW0rL%mr>mdKI;Vst
E09TWiCIA2c

literal 0
HcmV?d00001

diff --git a/public/images/placeholder-grid.png b/public/images/placeholders/placeholder-weapon-grid.png
similarity index 100%
rename from public/images/placeholder-grid.png
rename to public/images/placeholders/placeholder-weapon-grid.png
diff --git a/public/images/placeholder-main.png b/public/images/placeholders/placeholder-weapon-main.png
similarity index 100%
rename from public/images/placeholder-main.png
rename to public/images/placeholders/placeholder-weapon-main.png

From 5c7e7fbb57d1faec16e544aebeae02a99107a7ae Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 05:44:53 -0800
Subject: [PATCH 7/8] Fix summons and extra summons

---
 components/ExtraSummons/index.scss | 34 ++++++++++++++++++------------
 components/ExtraSummons/index.tsx  |  4 ++--
 components/ExtraWeapons/index.scss |  2 +-
 components/ExtraWeapons/index.tsx  |  2 +-
 components/SummonGrid/index.scss   | 31 +++++++++++++++++++++------
 components/SummonGrid/index.tsx    |  2 +-
 components/SummonUnit/index.scss   | 31 +++++++++++----------------
 components/SummonUnit/index.tsx    | 19 ++++++++++++++---
 8 files changed, 77 insertions(+), 48 deletions(-)

diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss
index 86a7c794..b70d16f6 100644
--- a/components/ExtraSummons/index.scss
+++ b/components/ExtraSummons/index.scss
@@ -1,18 +1,20 @@
-#ExtraSummons {
+.ExtraGrid.Summons {
   background: var(--subaura-orange-bg);
-  border-radius: 8px;
+  border-radius: $input-corner;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-template-columns: 2.32fr 2fr;
   justify-content: center;
   margin: 20px auto;
-  max-width: 727px;
-  padding: 16px 16px 16px 0;
+  max-width: calc($grid-width + 20px);
+  padding: $unit-3x $unit-3x $unit-3x 0;
   position: relative;
   left: 9px;
 
-  @include breakpoint(phone) {
+  @include breakpoint(tablet) {
     left: auto;
-    max-width: auto;
+    max-width: $grid-width;
+    padding: $unit-2x;
     width: 100%;
   }
 
@@ -23,17 +25,21 @@
     justify-content: center;
     line-height: 1.2;
     font-weight: 500;
-    margin-right: 16px;
     text-align: center;
-    width: 387px;
   }
 
-  #grid_summons {
+  #ExtraSummons {
     display: grid;
-    grid-template-columns: auto auto;
-    grid-column-gap: $unit * 2;
-    grid-template-rows: 1fr;
-    grid-row-gap: $unit * 3;
+    gap: $unit-3x;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    @include breakpoint(tablet) {
+      gap: $unit-2x;
+    }
+
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
 
     & > li {
       list-style: none;
diff --git a/components/ExtraSummons/index.tsx b/components/ExtraSummons/index.tsx
index 30a32352..4ef55272 100644
--- a/components/ExtraSummons/index.tsx
+++ b/components/ExtraSummons/index.tsx
@@ -21,9 +21,9 @@ const ExtraSummons = (props: Props) => {
   const { t } = useTranslation('common')
 
   return (
-    <div id="ExtraSummons">
+    <div className="ExtraGrid Summons">
       <span>{t('summons.subaura')}</span>
-      <ul id="grid_summons">
+      <ul id="ExtraSummons">
         {Array.from(Array(numSummons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>
diff --git a/components/ExtraWeapons/index.scss b/components/ExtraWeapons/index.scss
index 4d7b2c49..d4cc6d5b 100644
--- a/components/ExtraWeapons/index.scss
+++ b/components/ExtraWeapons/index.scss
@@ -1,4 +1,4 @@
-#ExtraGrid {
+.ExtraGrid.Weapons {
   background: var(--extra-purple-bg);
   border-radius: $card-corner;
   box-sizing: border-box;
diff --git a/components/ExtraWeapons/index.tsx b/components/ExtraWeapons/index.tsx
index e0415ead..6a4c045f 100644
--- a/components/ExtraWeapons/index.tsx
+++ b/components/ExtraWeapons/index.tsx
@@ -21,7 +21,7 @@ const ExtraWeapons = (props: Props) => {
   const { t } = useTranslation('common')
 
   return (
-    <div id="ExtraGrid">
+    <div className="ExtraGrid Weapons">
       <span>{t('extra_weapons')}</span>
       <ul id="ExtraWeapons">
         {Array.from(Array(numWeapons)).map((x, i) => {
diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss
index dca045b5..830cfee2 100644
--- a/components/SummonGrid/index.scss
+++ b/components/SummonGrid/index.scss
@@ -1,8 +1,18 @@
 #SummonGrid {
   display: grid;
-  grid-template-columns: auto auto auto;
-  grid-column-gap: $unit * 2;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) 2fr;
+  gap: $unit-3x;
   justify-content: center;
+  margin: 0 auto;
+  max-width: $grid-width;
+
+  @include breakpoint(tablet) {
+    gap: $unit-2x;
+  }
+
+  @include breakpoint(phone) {
+    gap: $unit;
+  }
 
   & .Label {
     color: $grey-55;
@@ -21,12 +31,19 @@
     }
   }
 
-  #grid_summons {
+  #Summons {
     display: grid;
-    grid-template-columns: auto auto;
-    grid-column-gap: $unit * 2;
-    grid-template-rows: 1fr;
-    grid-row-gap: $unit * 3;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+    gap: $unit-3x;
+
+    @include breakpoint(tablet) {
+      gap: $unit-2x;
+    }
+
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
 
     & > li {
       list-style: none;
diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx
index aba10c33..820eba24 100644
--- a/components/SummonGrid/index.tsx
+++ b/components/SummonGrid/index.tsx
@@ -248,7 +248,7 @@ const SummonGrid = (props: Props) => {
   const summonGridElement = (
     <div id="LabeledGrid">
       <div className="Label">{t('summons.summons')}</div>
-      <ul id="grid_summons">
+      <ul id="Summons">
         {Array.from(Array(numSummons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>
diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss
index b67a81fe..398d3ae3 100644
--- a/components/SummonUnit/index.scss
+++ b/components/SummonUnit/index.scss
@@ -3,35 +3,18 @@
   flex-direction: column;
   gap: 4px;
 
-  &.main .SummonImage,
-  &.friend .SummonImage {
-    aspect-ratio: 182 / 315;
-    width: 182px;
-    height: auto;
-
-    @include breakpoint(tablet) {
-      width: 20.3vw;
-    }
-  }
-
   &.grid {
     // max-width: 148px;
     // min-height: 141px;
     min-height: 180px;
 
     @include breakpoint(tablet) {
-      min-height: 16.5vw;
+      min-height: 15.9vw;
     }
 
     .SummonImage {
-      aspect-ratio: 148 / 111;
       list-style-type: none;
-      width: 148px;
-      height: auto;
-
-      @include breakpoint(tablet) {
-        width: 20vw;
-      }
+      width: 100%;
     }
   }
 
@@ -77,6 +60,12 @@
     }
   }
 
+  .SummonName {
+    @include breakpoint(phone) {
+      font-size: $font-tiny;
+    }
+  }
+
   &.filled h3 {
     display: block;
   }
@@ -103,5 +92,9 @@
     position: relative;
     width: 100%;
     z-index: 2;
+
+    &.Placeholder {
+      opacity: 0;
+    }
   }
 }
diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx
index 844f404e..571f3dff 100644
--- a/components/SummonUnit/index.tsx
+++ b/components/SummonUnit/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useTranslation } from 'next-i18next'
-import classnames from 'classnames'
+import classNames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
 import SummonHovercard from '~components/SummonHovercard'
@@ -30,7 +30,7 @@ const SummonUnit = (props: Props) => {
   const locale =
     router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
-  const classes = classnames({
+  const classes = classNames({
     SummonUnit: true,
     main: props.unitType == 0,
     grid: props.unitType == 1,
@@ -85,6 +85,12 @@ const SummonUnit = (props: Props) => {
     setImageUrl(imgSrc)
   }
 
+  function placeholderImageUrl() {
+    return props.unitType == 0 || props.unitType == 2
+      ? '/images/placeholders/placeholder-summon-main.png'
+      : '/images/placeholders/placeholder-summon-grid.png'
+  }
+
   function passUncapData(uncap: number) {
     if (props.gridSummon)
       props.updateUncap(props.gridSummon.id, props.position, uncap)
@@ -92,7 +98,14 @@ const SummonUnit = (props: Props) => {
 
   const image = (
     <div className="SummonImage">
-      <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
+      <img
+        alt={summon?.name.en}
+        className={classNames({
+          GridImage: true,
+          Placeholder: imageUrl === '',
+        })}
+        src={imageUrl !== '' ? imageUrl : placeholderImageUrl()}
+      />
       {props.editable ? (
         <span className="icon">
           <PlusIcon />

From 31dcebd6dbb4da8fb3501ae5c72c9e0245470f10 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 05:46:53 -0800
Subject: [PATCH 8/8] Make subaura summons consistent

---
 components/ExtraSummons/index.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss
index b70d16f6..1d9bb8de 100644
--- a/components/ExtraSummons/index.scss
+++ b/components/ExtraSummons/index.scss
@@ -18,6 +18,18 @@
     width: 100%;
   }
 
+  @include breakpoint(phone) {
+    display: flex;
+    gap: $unit-2x;
+    padding: $unit-2x;
+    flex-direction: column;
+
+    #ExtraSummons {
+      max-width: 50vw;
+      margin: 0 auto;
+    }
+  }
+
   & > span {
     color: var(--subaura-orange-text);
     display: flex;