From 5c7e7fbb57d1faec16e544aebeae02a99107a7ae Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 2 Jan 2023 05:44:53 -0800 Subject: [PATCH] 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 ( -
+
{t('summons.subaura')} -
    +
      {Array.from(Array(numSummons)).map((x, i) => { return (
    • 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 ( -
      +
      {t('extra_weapons')}
        {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 = (
        {t('summons.summons')}
        -
          +
            {Array.from(Array(numSummons)).map((x, i) => { return (
          • 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 = (
            - {summon?.name.en} + {summon?.name.en} {props.editable ? (