Merge pull request #5 from jedmund/ui-update

Rudimentary responsive redesign

components/CharacterGrid/index.scss

@@ -1,19 +1,25 @@
-.CharacterGrid {
+#CharacterGrid {
     display: flex;
     justify-content: center;
 }
 
 #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: $unit * 3;
-        margin-right: 24px;
+
+        @media (max-width: $medium-screen) {
+            margin-right: inherit;
+        }
     }
 
     & > li:last-child {

components/CharacterGrid/index.tsx

@@ -194,7 +194,7 @@ const CharacterGrid = (props: Props) => {
 
     // Render: JSX components
     return (
-        <div className="CharacterGrid">
+        <div id="CharacterGrid">
             <ul id="grid_characters">
                 {Array.from(Array(numCharacters)).map((x, i) => {
                     return (

components/CharacterUnit/index.scss

@@ -3,68 +3,74 @@
     flex-direction: column;
     gap: 4px;
     max-width: 200px;
-}
 
-.CharacterUnit .CharacterImage {
+    &.editable .CharacterImage:hover {
-    background: white;
+        border: 1px solid rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(0, 0, 0, 0);
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
-    border-radius: 8px;
+        cursor: pointer;
-    display: flex;
+        transform: $scale-tall;
-    align-items: center;
+    }
-    justify-content: center;
-    overflow: hidden;
-    transition: all 0.18s ease-in-out;
-    height: 268px;
-    width: 131px;
-}
 
-.CharacterUnit.editable .CharacterImage:hover {
+    &.filled h3 {
-    border: 1px solid rgba(0, 0, 0, 0.1);
+        display: block;
-    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+    }
-    cursor: pointer;
-    transform: $scale-tall;
-}
 
-.CharacterUnit.filled h3 {
+    &.filled ul {
-    display: block;
+        display: flex;
-}
+    }
 
-.CharacterUnit.filled ul {
+    h3,
-    display: flex;
+    ul {
-}
+        display: none;
+    }
 
-.CharacterUnit h3,
+    h3 {
-.CharacterUnit ul {
+        color: #333;
-    display: none;
+        font-size: $font-regular;
-}
+        font-weight: 500;
+        margin: 0;
+        max-width: 131px;
+        text-align: center;
+        word-wrap: normal;
+    }
 
-.CharacterUnit h3 {
+    img {
-    color: #333;
+        position: relative;
-    font-size: $font-regular;
+        width: 100%;
-    font-weight: 500;
+        z-index: 2;
-    margin: 0;
+    }
-    max-width: 131px;
+    
-    text-align: center;
-    word-wrap: normal;
-}
 
-.CharacterUnit img {
+    .CharacterImage {
-    position: relative;
+        aspect-ratio: 131 / 238;
-    width: 100%;
+        background: white;
-    z-index: 2;
+        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 {
+        @media (max-width: $medium-screen) {
-    position: absolute;
+            width: 17vw;
-    height: 20px;
+        }
-    width: 20px;
-    z-index: 1;
 
-    svg {
+        &:hover .icon {
-        fill: #c9c9c9;
+            color: #555;
+        }
+
+        .icon {
+            position: absolute;
+            height: 20px;
+            width: 20px;
+            z-index: 1;
+        
+            svg {
+                fill: #c9c9c9;
+            }
+        }
     }
 }
-
-.CharacterImage:hover .icon {
-    color: #555;
-}

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;
@@ -22,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;
     }

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 {

components/ExtraWeapons/index.tsx

@@ -25,9 +25,9 @@ const ExtraWeapons = (props: Props) => {
     const numWeapons: number = 3
 
     return (
-        <div id="ExtraWeapons">
+        <div id="ExtraGrid">
             <span>Additional<br />Weapons</span>
-            <ul id="grid_weapons">
+            <ul className="grid_weapons">
                 {
                     Array.from(Array(numWeapons)).map((x, i) => {
                         return (

components/SummonGrid/index.scss

@@ -1,4 +1,4 @@
-.SummonGrid {
+#SummonGrid {
     display: grid;
     grid-template-columns: auto auto auto;
     grid-column-gap: $unit * 2;
@@ -11,25 +11,16 @@
         margin-bottom: $unit;
         text-align: center;
     }
-}
 
-#grid_summons {
+    #grid_summons {
-    display: grid;
+        display: grid;
-    grid-template-columns: auto auto;
+        grid-template-columns: auto auto;
-    grid-column-gap: $unit * 2;
+        grid-column-gap: $unit * 2;
-    grid-template-rows: 1fr;
+        grid-template-rows: 1fr;
-    grid-row-gap: $unit * 3;
+        grid-row-gap: $unit * 3;
-}
 
-#grid_summons > li {
+        & > li {
-    list-style: none;
+            list-style: none;
-    min-height: 180px;
+        }
-}
-
-#ExtraSummons #grid_summons > li {
-    min-height: 0;
-
-    .SummonUnit {
-        min-height: 0;
     }
-}
+}

components/SummonGrid/index.tsx

@@ -265,7 +265,7 @@ const SummonGrid = (props: Props) => {
     )
     return (
         <div>
-            <div className="SummonGrid">
+            <div id="SummonGrid">
                 { mainSummonElement }
                 { friendSummonElement }
                 { summonGridElement }

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;
-}

components/WeaponGrid/index.scss

@@ -1,31 +1,38 @@
-#WeaponGrid {
+#MainGrid {
     display: flex;
     justify-content: center;
+
+    .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;
-}

components/WeaponGrid/index.tsx

@@ -238,10 +238,10 @@ const WeaponGrid = (props: Props) => {
     )
     
     return (
-        <div id="weapon_grids">
+        <div id="WeaponGrid">
-            <div id="WeaponGrid">
+            <div id="MainGrid">
                 { mainhandElement }
-                <ul id="grid_weapons">{ weaponGridElement }</ul>
+                <ul className="grid_weapons">{ weaponGridElement }</ul>
             </div>
 
             { (() => { return (props.extra) ? extraGridElement : '' })() }

components/WeaponUnit/index.scss

@@ -2,91 +2,103 @@
     display: flex;
     flex-direction: column;
     gap: 4px;
-}
 
-.WeaponUnit .WeaponImage {
+    &.mainhand {
-    background: white;
+        margin-right: $unit * 3;
-    border: 1px solid rgba(0, 0, 0, 0);
+        max-width: 200px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 2px;
-    overflow: hidden;
-    transition: all 0.18s ease-in-out;
-}
 
-.WeaponUnit.editable .WeaponImage:hover {
+        @media (max-width: $medium-screen) {
-    border: 1px solid rgba(0, 0, 0, 0.1);
+            margin-right: $unit * 2;
-    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+        }
-    cursor: pointer;
-    transform: $scale-wide;
-}
 
-.WeaponUnit.mainhand.editable .WeaponImage:hover {
+        &.editable .WeaponImage:hover {
-    transform: $scale-tall;
+            transform: $scale-tall;
-}
+        }
 
-.WeaponUnit.filled h3 {
+        .WeaponImage {
-    display: block;
+            aspect-ratio: 200 / 418;
-}
+            width: 200px;
+            height: auto;
+        
+            @media (max-width: $medium-screen) {
+                width: 25vw;
+            }
+        }
+    }
 
-.WeaponUnit.filled ul {
+    &.grid {
-    display: flex;
+        max-width: 160px;
-}
 
-.WeaponUnit h3,
+        .WeaponImage {
-.WeaponUnit ul {
+            aspect-ratio: 160 / 92;
-    display: none;
+            list-style-type: none;
-}
+            width: 160px;
+            height: auto;
+        
+            @media (max-width: $medium-screen) {
+                width: 20vw;
+            }
+        }
+    }
 
-.WeaponUnit h3 {
+    &.filled h3 {
-    color: #333;
+        display: block;
-    font-size: $font-regular;
+    }    
-    font-weight: 500;
-    margin: 0;
-    text-align: center;
-}
 
-.WeaponUnit img {
+    &.filled ul {
-    position: relative;
+        display: flex;
-    width: 100%;
+    }
-    z-index: 2;
-}
 
-.WeaponImage .icon {
+    & h3,
-    position: absolute;
+    & ul {
-    height: 20px;
+        display: none;
-    width: 20px;
+    }
-    z-index: 1;
 
-    svg {
+    .WeaponImage {
-        fill: #c9c9c9;
+        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;
-}

styles/globals.scss

@@ -1,42 +1,50 @@
 @import '~meyer-reset-scss';
 
 html {
-  background: $grey-90;
+    background: $background-color;
-  font-size: 62.5%;
+    font-size: 62.5%;
-  padding: $unit * 2;
+    padding: $unit * 2;
 }
 
 body {
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
-  font-size: 1.4rem;
+    font-size: 1.4rem;
-  
+    
-  &.no-scroll {
+    &.no-scroll {
-      overflow: hidden;
+        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-size: 2.1rem;
-  font-weight: $medium;
+    font-weight: $medium;
-  text-align: center;
+    text-align: center;
 }
 
 #Content {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  gap: $unit * 3;
+    gap: $unit * 3;
-  margin-top: $unit * 3;
+    margin-top: $unit * 3;
-}
+    min-width: 752px;
+
+    @media (max-width: $medium-screen) {
+        min-width: auto;
+        width: 100%;
+    }
+
+}
+

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-small:    11px;
-$font-regular:  14px;
+$font-button:   15px;
-$font-large:    18px;
+$font-regular:  16px;
-$font-xlarge:   21px;
+$font-large:    21px;
+$font-xlarge:   24px;
 
 // Scale factors
 $scale-wide: scale(1.05, 1.05);