granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #18 from jedmund/search-cleanup

Browse source 
Search cleanup
This commit is contained in:
Justin Edmund 2022-02-28 18:26:05 -08:00 committed by GitHub
commit 38e997d7df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 252 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
components/CharacterResult/index.scss
View file

@ -1,48 +1,63 @@
.CharacterResult { .CharacterResult {
-webkit-font-smoothing: antialiased;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; gap: $unit;
gap: 8px; padding: $unit * 1.5;
padding: 12px;
}
.CharacterResult img { &:hover {
background: #e9e9e9; background: $grey-90;
border-radius: 6px; cursor: pointer;
display: inline-block; }
height: 72px;
width: 120px;
}
.CharacterResult h5 { img {
color: #555; background: $grey-80;
display: inline-block; border-radius: 6px;
font-size: $font-large; display: inline-block;
font-weight: 500; height: 72px;
margin: 2px 4px 4px 0; width: 120px;
} }
.CharacterResult .WeaponLabelIcon { .Info {
margin-right: 4px; display: flex;
} flex-direction: column;
flex-grow: 1;
gap: $unit / 2;
.CharacterResult .stars { h5 {
display: inline-block; color: #555;
color: #FFA15E; display: inline-block;
font-size: $font-xlarge; font-size: $font-medium;
} font-weight: $medium;
}
.CharacterResult .stars > span { .UncapIndicator {
color: #65DAFF; justify-content: left;
} pointer-events: none;
}
.CharacterResult:hover { .stars {
background: #e9e9e9; display: inline-block;
cursor: pointer; color: #FFA15E;
} font-size: $font-xlarge;
.CharacterResult:hover .image_placeholder { & > span {
background: #dadada; color: #65DAFF;
}
}
.tags {
display: flex;
flex-direction: row;
gap: $unit / 2;
.WeaponLabelIcon {
$aspect-ratio: calc(25 / 60);
$height: 22px;
background-size: calc($height / $aspect-ratio) $height;
background-repeat: no-repeat;
height: $height;
width: calc($height/ $aspect-ratio);
}
}
}
} }

16
components/CharacterResult/index.tsx
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import UncapIndicator from '~components/UncapIndicator'
import WeaponLabelIcon from '~components/WeaponLabelIcon' import WeaponLabelIcon from '~components/WeaponLabelIcon'
import './index.scss' import './index.scss'
@ -17,12 +18,17 @@ class CharacterResult extends React.Component<Props> {
return ( return (
<li className="CharacterResult" onClick={this.props.onClick}> <li className="CharacterResult" onClick={this.props.onClick}>
<img alt={character.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_01.jpg`} /> <img alt={character.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_01.jpg`} />
<div> <div className="Info">
<div> <h5>{character.name.en}</h5>
<h5>{character.name.en}</h5> <UncapIndicator
<div className="stars">{(character.rarity == 2) ? '⭑⭑⭑' : '⭑⭑⭑⭑'}{(character.uncap.flb) ? <span>⭑</span> : ''}</div> type="character"
flb={character.uncap.flb}
ulb={character.uncap.ulb}
special={character.special}
/>
<div className="tags">
<WeaponLabelIcon labelType={Element[character.element]} />
</div> </div>
<WeaponLabelIcon labelType={Element[character.element]} />
</div> </div>
</li> </li>
) )

47
components/SearchModal/index.scss
View file

@ -1,15 +1,18 @@
.Modal.Search { .Search.Dialog {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: 420px; min-height: 431px;
min-width: 600px; width: 600px;
gap: 0;
padding: 0; padding: 0;
#ModalHeader { #Header {
background: $grey-90; border-top-left-radius: $unit;
gap: $unit; border-top-right-radius: $unit;
display: flex;
gap: $unit * 2.5;
margin: 0; margin: 0;
padding: ($unit * 3) ($unit * 3) ($unit * 1.5) ($unit * 3); padding: ($unit * 3) ($unit * 3) ($unit) ($unit * 3);
position: sticky; position: sticky;
top: 0; top: 0;
@ -18,19 +21,14 @@
border: none; border: none;
height: 42px; height: 42px;
padding: 0; padding: 0;
svg {
height: 24px;
width: 24px;
vertical-align: middle;
}
} }
label { label {
width: 100%; width: 100%;
.Input { .Input {
border: 1px solid $grey-70; background: $grey-90;
border: none;
border-radius: $unit / 2; border-radius: $unit / 2;
box-sizing: border-box; box-sizing: border-box;
font-size: $font-regular; font-size: $font-regular;
@ -40,15 +38,20 @@
} }
} }
} }
#Results {
margin: 0;
max-height: 356px;
padding: 0 ($unit * 1.5);
overflow-y: scroll;
.WeaponResult:last-child {
margin-bottom: $unit * 1.5;
}
}
} }
.Search.Modal #results_container { .Search.Dialog #NoResults {
margin: 0;
max-height: 330px;
padding: 0 12px 12px 12px;
}
.Search.Modal #NoResults {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -56,7 +59,7 @@
flex-grow: 1; flex-grow: 1;
} }
.Search.Modal #NoResults h2 { .Search.Dialog #NoResults h2 {
color: #ccc; color: #ccc;
font-size: $font-large; font-size: $font-large;
font-weight: 500; font-weight: 500;

52
components/SearchModal/index.tsx
View file

@ -11,7 +11,7 @@ import WeaponResult from '~components/WeaponResult'
import SummonResult from '~components/SummonResult' import SummonResult from '~components/SummonResult'
import './index.scss' import './index.scss'
import PlusIcon from '~public/icons/Add.svg' import CrossIcon from '~public/icons/Cross.svg'
interface Props { interface Props {
send: (object: Character | Weapon | Summon, position: number) => any send: (object: Character | Weapon | Summon, position: number) => any
@ -115,7 +115,7 @@ const SearchModal = (props: Props) => {
/> />
}) })
return (<ul id="results_container">{elements}</ul>) return (<ul id="Results">{elements}</ul>)
} }
function renderSummonSearchResults(results: { [key: string]: any }) { function renderSummonSearchResults(results: { [key: string]: any }) {
@ -127,7 +127,7 @@ const SearchModal = (props: Props) => {
/> />
}) })
return (<ul id="results_container">{elements}</ul>) return (<ul id="Results">{elements}</ul>)
} }
function renderCharacterSearchResults(results: { [key: string]: any }) { function renderCharacterSearchResults(results: { [key: string]: any }) {
@ -139,7 +139,7 @@ const SearchModal = (props: Props) => {
/> />
}) })
return (<ul id="results_container">{elements}</ul>) return (<ul id="Results">{elements}</ul>)
} }
function renderEmptyState() { function renderEmptyState() {
@ -172,29 +172,27 @@ const SearchModal = (props: Props) => {
{props.children} {props.children}
</Dialog.Trigger> </Dialog.Trigger>
<Dialog.Portal> <Dialog.Portal>
<div className="ModalContainer"> <Dialog.Content className="Search Dialog">
<Dialog.Content className="Search Modal"> <div id="Header">
<div id="ModalHeader"> <label className="search_label" htmlFor="search_input">
<label className="search_label" htmlFor="search_input"> <input
<input autoComplete="off"
autoComplete="off" type="text"
type="text" name="query"
name="query" className="Input"
className="Input" id="search_input"
id="search_input" ref={searchInput}
ref={searchInput} value={query}
value={query} placeholder={props.placeholderText}
placeholder={props.placeholderText} onChange={inputChanged}
onChange={inputChanged} />
/> </label>
</label> <Dialog.Close className="DialogClose" onClick={resetAndClose}>
<Dialog.Close onClick={resetAndClose}> <CrossIcon />
<PlusIcon /> </Dialog.Close>
</Dialog.Close> </div>
</div> { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
{ ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) } </Dialog.Content>
</Dialog.Content>
</div>
<Dialog.Overlay className="Overlay" /> <Dialog.Overlay className="Overlay" />
</Dialog.Portal> </Dialog.Portal>
</Dialog.Root> </Dialog.Root>

91
components/SummonResult/index.scss
View file

@ -1,48 +1,63 @@
.SummonResult { .SummonResult {
-webkit-font-smoothing: antialiased;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; gap: $unit;
gap: 8px; padding: $unit * 1.5;
padding: 12px;
}
.SummonResult img { &:hover {
background: #e9e9e9; background: $grey-90;
border-radius: 6px; cursor: pointer;
display: inline-block; }
height: auto;
width: 120px;
}
.SummonResult h5 { img {
color: #555; background: $grey-80;
display: inline-block; border-radius: 6px;
font-size: $font-large; display: inline-block;
font-weight: 500; height: auto;
margin: 2px 4px 4px 0; width: 120px;
} }
.SummonResult .WeaponLabelIcon { .Info {
margin-right: 4px; display: flex;
} flex-direction: column;
flex-grow: 1;
gap: $unit / 2;
.SummonResult .stars { h5 {
display: inline-block; color: #555;
color: #FFA15E; display: inline-block;
font-size: $font-xlarge; font-size: $font-medium;
} font-weight: $medium;
}
.SummonResult .stars > span { .UncapIndicator {
color: #65DAFF; justify-content: left;
} pointer-events: none;
}
.SummonResult:hover { .stars {
background: #e9e9e9; display: inline-block;
cursor: pointer; color: #FFA15E;
} font-size: $font-xlarge;
.SummonResult:hover .image_placeholder { & > span {
background: #dadada; color: #65DAFF;
} }
}
.tags {
display: flex;
flex-direction: row;
gap: $unit / 2;
.WeaponLabelIcon {
$aspect-ratio: calc(25 / 60);
$height: 22px;
background-size: calc($height / $aspect-ratio) $height;
background-repeat: no-repeat;
height: $height;
width: calc($height/ $aspect-ratio);
}
}
}
}

16
components/SummonResult/index.tsx
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import UncapIndicator from '~components/UncapIndicator'
import WeaponLabelIcon from '~components/WeaponLabelIcon' import WeaponLabelIcon from '~components/WeaponLabelIcon'
import './index.scss' import './index.scss'
@ -17,12 +18,17 @@ class SummonResult extends React.Component<Props> {
return ( return (
<li className="SummonResult" onClick={this.props.onClick}> <li className="SummonResult" onClick={this.props.onClick}>
<img alt={summon.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`} /> <img alt={summon.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}.jpg`} />
<div> <div className="Info">
<div> <h5>{summon.name.en}</h5>
<h5>{summon.name.en}</h5> <UncapIndicator
<div className="stars">⭑⭑⭑{(summon.uncap.flb) ? <span>⭑</span> : ''}{(summon.uncap.ulb) ? <span>⭑</span> : ''}</div> type="summon"
flb={summon.uncap.flb}
ulb={summon.uncap.ulb}
special={false}
/>
<div className="tags">
<WeaponLabelIcon labelType={Element[summon.element]} />
</div> </div>
<WeaponLabelIcon labelType={Element[summon.element]} />
</div> </div>
</li> </li>
) )

18
components/UncapIndicator/index.tsx
View file

@ -6,11 +6,11 @@ import './index.scss'
interface Props { interface Props {
type: 'character' | 'weapon' | 'summon' type: 'character' | 'weapon' | 'summon'
rarity?: number rarity?: number
uncapLevel: number uncapLevel?: number
flb: boolean flb: boolean
ulb: boolean ulb: boolean
special: boolean special: boolean
updateUncap: (uncap: number) => void updateUncap?: (uncap: number) => void
} }
const UncapIndicator = (props: Props) => { const UncapIndicator = (props: Props) => {
@ -52,25 +52,27 @@ const UncapIndicator = (props: Props) => {
} }
function toggleStar(index: number, empty: boolean) { function toggleStar(index: number, empty: boolean) {
if (empty) props.updateUncap(index + 1) if (props.updateUncap) {
else props.updateUncap(index) if (empty) props.updateUncap(index + 1)
else props.updateUncap(index)
}
} }
const transcendence = (i: number) => { const transcendence = (i: number) => {
return <UncapStar ulb={true} empty={i >= props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> return <UncapStar ulb={true} empty={ (props.uncapLevel) ? i >= props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} />
} }
const ulb = (i: number) => { const ulb = (i: number) => {
return <UncapStar ulb={true} empty={i >= props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> return <UncapStar ulb={true} empty={ (props.uncapLevel) ? i >= props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} />
} }
const flb = (i: number) => { const flb = (i: number) => {
return <UncapStar flb={true} empty={i >= props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> return <UncapStar flb={true} empty={ (props.uncapLevel) ? i >= props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} />
} }
const mlb = (i: number) => { const mlb = (i: number) => {
// console.log("MLB; Number of stars:", props.uncapLevel) // console.log("MLB; Number of stars:", props.uncapLevel)
return <UncapStar empty={i >= props.uncapLevel} key={`star_${i}`} index={i} onClick={toggleStar} /> return <UncapStar empty={ (props.uncapLevel) ? i >= props.uncapLevel : false } key={`star_${i}`} index={i} onClick={toggleStar} />
} }
return ( return (

89
components/WeaponResult/index.scss
View file

@ -1,48 +1,63 @@
.WeaponResult { .WeaponResult {
-webkit-font-smoothing: antialiased;
border-radius: 6px; border-radius: 6px;
display: flex; display: flex;
font-family: -apple-system, "Helvetica Neue", "Lucida Grande"; gap: $unit;
gap: 8px; padding: $unit * 1.5;
padding: 12px;
}
.WeaponResult img { &:hover {
background: #e9e9e9; background: $grey-90;
border-radius: 6px; cursor: pointer;
display: inline-block; }
height: 72px;
width: 120px;
}
.WeaponResult h5 { img {
color: #555; background: $grey-80;
display: inline-block; border-radius: 6px;
font-size: $font-large; display: inline-block;
font-weight: 500; height: 72px;
margin: 2px 4px 4px 0; width: 120px;
} }
.WeaponResult .WeaponLabelIcon { .Info {
margin-right: 4px; display: flex;
} flex-direction: column;
flex-grow: 1;
gap: $unit / 2;
.WeaponResult .stars { h5 {
display: inline-block; color: #555;
color: #FFA15E; display: inline-block;
font-size: $font-xlarge; font-size: $font-medium;
} font-weight: $medium;
}
.WeaponResult .stars > span { .UncapIndicator {
color: #65DAFF; justify-content: left;
} pointer-events: none;
}
.WeaponResult:hover { .stars {
background: #e9e9e9; display: inline-block;
cursor: pointer; color: #FFA15E;
} font-size: $font-xlarge;
.WeaponResult:hover .image_placeholder { & > span {
background: #dadada; color: #65DAFF;
}
}
.tags {
display: flex;
flex-direction: row;
gap: $unit / 2;
.WeaponLabelIcon {
$aspect-ratio: calc(25 / 60);
$height: 22px;
background-size: calc($height / $aspect-ratio) $height;
background-repeat: no-repeat;
height: $height;
width: calc($height/ $aspect-ratio);
}
}
}
} }

18
components/WeaponResult/index.tsx
View file

@ -1,4 +1,5 @@
import React from 'react' import React from 'react'
import UncapIndicator from '~components/UncapIndicator'
import WeaponLabelIcon from '~components/WeaponLabelIcon' import WeaponLabelIcon from '~components/WeaponLabelIcon'
import './index.scss' import './index.scss'
@ -19,13 +20,18 @@ class WeaponResult extends React.Component<Props> {
return ( return (
<li className="WeaponResult" onClick={this.props.onClick}> <li className="WeaponResult" onClick={this.props.onClick}>
<img alt={weapon.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`} /> <img alt={weapon.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`} />
<div> <div className="Info">
<div> <h5>{weapon.name.en}</h5>
<h5>{weapon.name.en}</h5> <UncapIndicator
<div className="stars">⭑⭑⭑{(weapon.uncap.flb) ? <span>⭑</span> : ''}{(weapon.uncap.ulb) ? <span>⭑</span> : ''}</div> type="weapon"
flb={weapon.uncap.flb}
ulb={weapon.uncap.ulb}
special={false}
/>
<div className="tags">
<WeaponLabelIcon labelType={Element[weapon.element]} />
<WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
</div> </div>
<WeaponLabelIcon labelType={Element[weapon.element]} />
<WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
</div> </div>
</li> </li>
) )

1
styles/variables.scss
View file

@ -63,6 +63,7 @@ $font-tiny: 11px;
$font-small: 13px; $font-small: 13px;
$font-button: 15px; $font-button: 15px;
$font-regular: 16px; $font-regular: 16px;
$font-medium: 18px;
$font-large: 21px; $font-large: 21px;
$font-xlarge: 24px; $font-xlarge: 24px;
$font-xxlarge: 28px; $font-xxlarge: 28px;