Merge pull request #112 from jedmund/rewrite-responsive-grid
Rewrite responsive grid
This commit is contained in:
GitHub
commit
65986285bc
23 changed files with 252 additions and 157 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}`}>
|
||||
|
|
|
|||
|
|
@ -76,4 +76,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CharacterName {
|
||||
@include breakpoint(phone) {
|
||||
font-size: $font-tiny;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,35 @@
|
|||
#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%;
|
||||
}
|
||||
|
||||
@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;
|
||||
|
|
@ -23,17 +37,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;
|
||||
|
|
|
|||
|
|
@ -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}`}>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
#ExtraGrid {
|
||||
.ExtraGrid.Weapons {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ const ExtraWeapons = (props: Props) => {
|
|||
const { t } = useTranslation('common')
|
||||
|
||||
return (
|
||||
<div id="ExtraGrid">
|
||||
<div className="ExtraGrid Weapons">
|
||||
<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}`}>
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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}`}>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -1,52 +1,51 @@
|
|||
#MainGrid {
|
||||
#WeaponGrid {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@include breakpoint(phone) {
|
||||
#MainGrid {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.grid_weapons > *:nth-child(3n + 3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.grid_weapons > li {
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
#ExtraWeapons #grid_weapons > * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -361,7 +361,7 @@ const WeaponGrid = (props: Props) => {
|
|||
{incompatibleAlert()}
|
||||
<div id="MainGrid">
|
||||
{mainhandElement}
|
||||
<ul className="grid_weapons">{weaponGridElement}</ul>
|
||||
<ul id="Weapons">{weaponGridElement}</ul>
|
||||
</div>
|
||||
|
||||
{(() => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -176,6 +156,10 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
|
||||
&.Placeholder {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -189,4 +173,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.WeaponName {
|
||||
@include breakpoint(phone) {
|
||||
font-size: $font-tiny;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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/placeholders/placeholder-weapon-main.png'
|
||||
: '/images/placeholders/placeholder-weapon-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 />
|
||||
|
|
@ -395,9 +408,7 @@ const WeaponUnit = (props: Props) => {
|
|||
gridWeapon.id &&
|
||||
canBeModified(gridWeapon) ? (
|
||||
<WeaponModal gridWeapon={gridWeapon}>
|
||||
<div>
|
||||
<Button accessoryIcon={<SettingsIcon />} />
|
||||
</div>
|
||||
<Button accessoryIcon={<SettingsIcon />} />
|
||||
</WeaponModal>
|
||||
) : (
|
||||
''
|
||||
|
|
|
|||
BIN
public/images/placeholders/placeholder-summon-grid.png
Normal file
BIN
public/images/placeholders/placeholder-summon-grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 479 B |
BIN
public/images/placeholders/placeholder-summon-main.png
Normal file
BIN
public/images/placeholders/placeholder-summon-main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 903 B |
BIN
public/images/placeholders/placeholder-weapon-grid.png
Normal file
BIN
public/images/placeholders/placeholder-weapon-grid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 615 B |
BIN
public/images/placeholders/placeholder-weapon-main.png
Normal file
BIN
public/images/placeholders/placeholder-weapon-main.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -13,6 +13,8 @@ $laptop: 1280px;
|
|||
$tablet: 768px;
|
||||
$phone: 375px;
|
||||
|
||||
$grid-width: 720px;
|
||||
|
||||
// Legacy
|
||||
$medium-screen: 768px;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue