Merge pull request #18 from jedmund/search-cleanup

Search cleanup
2022-02-28 18:26:05 -08:00 · 2022-02-28 18:26:05 -08:00 · 38e997d7df
commit 38e997d7df
parent 210b30ac2b 29f20ec33c
10 changed files with 252 additions and 185 deletions
--- a/components/CharacterResult/index.scss
+++ b/components/CharacterResult/index.scss
@ -1,48 +1,63 @@
 .CharacterResult {
-    -webkit-font-smoothing: antialiased;
-
    border-radius: 6px;
    display: flex;
-    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
-    gap: 8px;
-    padding: 12px;
-}
+    gap: $unit;
+    padding: $unit * 1.5;

-.CharacterResult img {
-    background: #e9e9e9;
-    border-radius: 6px;
-    display: inline-block;
-    height: 72px;
-    width: 120px;
-}
+    &:hover {
+        background: $grey-90;
+        cursor: pointer;
+    }

-.CharacterResult h5 {
-    color: #555;
-    display: inline-block;
-    font-size: $font-large;
-    font-weight: 500;
-    margin: 2px 4px 4px 0;
-}
+    img {
+        background: $grey-80;
+        border-radius: 6px;
+        display: inline-block;
+        height: 72px;
+        width: 120px;
+    }

-.CharacterResult .WeaponLabelIcon {
-    margin-right: 4px;
-}
+    .Info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: $unit / 2;

-.CharacterResult .stars {
-    display: inline-block;
-    color: #FFA15E;
-    font-size: $font-xlarge;
-}
+        h5 {
+            color: #555;
+            display: inline-block;
+            font-size: $font-medium;
+            font-weight: $medium;
+        }

-.CharacterResult .stars > span {
-    color: #65DAFF;
-}
+        .UncapIndicator {
+            justify-content: left;
+            pointer-events: none;
+        }

-.CharacterResult:hover {
-    background: #e9e9e9;
-    cursor: pointer;
-}
+        .stars {
+            display: inline-block;
+            color: #FFA15E;
+            font-size: $font-xlarge;

-.CharacterResult:hover .image_placeholder {
-    background: #dadada;
+            & > span {
+                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);
+            }
+        }
+    }
 }
--- a/components/CharacterResult/index.tsx
+++ b/components/CharacterResult/index.tsx
@ -1,4 +1,5 @@
 import React from 'react'
+import UncapIndicator from '~components/UncapIndicator'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'

 import './index.scss'
@ -17,12 +18,17 @@ class CharacterResult extends React.Component<Props> {
        return (
            <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`} />
-                <div>
-                    <div>
-                        <h5>{character.name.en}</h5>
-                        <div className="stars">{(character.rarity == 2) ? '⭑⭑⭑' : '⭑⭑⭑⭑'}{(character.uncap.flb) ? <span>⭑</span> : ''}</div>
+                <div className="Info">
+                    <h5>{character.name.en}</h5>
+                    <UncapIndicator 
+                        type="character"
+                        flb={character.uncap.flb}
+                        ulb={character.uncap.ulb}
+                        special={character.special}
+                    />
+                    <div className="tags">
+                        <WeaponLabelIcon labelType={Element[character.element]} />
                    </div>
-                    <WeaponLabelIcon labelType={Element[character.element]} />
                </div>
            </li>
        )
--- a/components/SearchModal/index.scss
+++ b/components/SearchModal/index.scss
@ -1,15 +1,18 @@
-.Modal.Search {
+.Search.Dialog {
    display: flex;
    flex-direction: column;
-    min-height: 420px;
-    min-width: 600px;
+    min-height: 431px;
+    width: 600px;
+    gap: 0;
    padding: 0;

-    #ModalHeader {
-        background: $grey-90;
-        gap: $unit;
+    #Header {
+        border-top-left-radius: $unit;
+        border-top-right-radius: $unit;
+        display: flex;
+        gap: $unit * 2.5;
        margin: 0;
-        padding: ($unit * 3) ($unit * 3) ($unit * 1.5) ($unit * 3);
+        padding: ($unit * 3) ($unit * 3) ($unit) ($unit * 3);
        position: sticky;
        top: 0;

@ -18,19 +21,14 @@
            border: none;
            height: 42px;
            padding: 0;
-
-            svg {
-                height: 24px;
-                width: 24px;
-                vertical-align: middle;
-            }
        }

        label {
            width: 100%;

            .Input {
-                border: 1px solid $grey-70;
+                background: $grey-90;
+                border: none;
                border-radius: $unit / 2;
                box-sizing: border-box;
                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 {
-    margin: 0;
-    max-height: 330px;
-    padding: 0 12px 12px 12px;
-}
-
-.Search.Modal #NoResults {
+.Search.Dialog #NoResults {
    display: flex;
    flex-direction: column;
    align-items: center;
@ -56,7 +59,7 @@
    flex-grow: 1;
 }

-.Search.Modal #NoResults h2 {
+.Search.Dialog #NoResults h2 {
    color: #ccc;
    font-size: $font-large;
    font-weight: 500;
--- a/components/SearchModal/index.tsx
+++ b/components/SearchModal/index.tsx
@ -11,7 +11,7 @@ import WeaponResult from '~components/WeaponResult'
 import SummonResult from '~components/SummonResult'

 import './index.scss'
-import PlusIcon from '~public/icons/Add.svg'
+import CrossIcon from '~public/icons/Cross.svg'

 interface Props {
    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 }) {
@ -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 }) {
@ -139,7 +139,7 @@ const SearchModal = (props: Props) => {
            />
        })

-        return (<ul id="results_container">{elements}</ul>)
+        return (<ul id="Results">{elements}</ul>)
    }

    function renderEmptyState() {
@ -172,29 +172,27 @@ const SearchModal = (props: Props) => {
                {props.children}
            </Dialog.Trigger>
            <Dialog.Portal>
-                <div className="ModalContainer">
-                    <Dialog.Content className="Search Modal">
-                        <div id="ModalHeader">
-                            <label className="search_label" htmlFor="search_input">
-                                <input 
-                                    autoComplete="off"
-                                    type="text"
-                                    name="query" 
-                                    className="Input" 
-                                    id="search_input"
-                                    ref={searchInput}
-                                    value={query}
-                                    placeholder={props.placeholderText}
-                                    onChange={inputChanged}
-                                />
-                            </label> 
-                            <Dialog.Close onClick={resetAndClose}>
-                                <PlusIcon />
-                            </Dialog.Close>
-                        </div>
-                        { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
-                    </Dialog.Content>
-                </div>
+                <Dialog.Content className="Search Dialog">
+                    <div id="Header">
+                        <label className="search_label" htmlFor="search_input">
+                            <input 
+                                autoComplete="off"
+                                type="text"
+                                name="query" 
+                                className="Input" 
+                                id="search_input"
+                                ref={searchInput}
+                                value={query}
+                                placeholder={props.placeholderText}
+                                onChange={inputChanged}
+                            />
+                        </label> 
+                        <Dialog.Close className="DialogClose" onClick={resetAndClose}>
+                            <CrossIcon />
+                        </Dialog.Close>
+                    </div>
+                    { ((Object.entries(results).length == 0) ? renderEmptyState() : renderResults()) }
+                </Dialog.Content>
                <Dialog.Overlay className="Overlay" />
            </Dialog.Portal>
        </Dialog.Root>
--- a/components/SummonResult/index.scss
+++ b/components/SummonResult/index.scss
@ -1,48 +1,63 @@
 .SummonResult {
-    -webkit-font-smoothing: antialiased;
-
    border-radius: 6px;
    display: flex;
-    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
-    gap: 8px;
-    padding: 12px;
-}
+    gap: $unit;
+    padding: $unit * 1.5;

-.SummonResult img {
-    background: #e9e9e9;
-    border-radius: 6px;
-    display: inline-block;
-    height: auto;
-    width: 120px;
-}
+    &:hover {
+        background: $grey-90;
+        cursor: pointer;
+    }

-.SummonResult h5 {
-    color: #555;
-    display: inline-block;
-    font-size: $font-large;
-    font-weight: 500;
-    margin: 2px 4px 4px 0;
-}
+    img {
+        background: $grey-80;
+        border-radius: 6px;
+        display: inline-block;
+        height: auto;
+        width: 120px;
+    }

-.SummonResult .WeaponLabelIcon {
-    margin-right: 4px;
-}
+    .Info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: $unit / 2;

-.SummonResult .stars {
-    display: inline-block;
-    color: #FFA15E;
-    font-size: $font-xlarge;
-}
+        h5 {
+            color: #555;
+            display: inline-block;
+            font-size: $font-medium;
+            font-weight: $medium;
+        }

-.SummonResult .stars > span {
-    color: #65DAFF;
-}
+        .UncapIndicator {
+            justify-content: left;
+            pointer-events: none;
+        }

-.SummonResult:hover {
-    background: #e9e9e9;
-    cursor: pointer;
-}
+        .stars {
+            display: inline-block;
+            color: #FFA15E;
+            font-size: $font-xlarge;

-.SummonResult:hover .image_placeholder {
-    background: #dadada;
-}
+            & > span {
+                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);
+            }
+        }
+    }
+}
--- a/components/SummonResult/index.tsx
+++ b/components/SummonResult/index.tsx
@ -1,4 +1,5 @@
 import React from 'react'
+import UncapIndicator from '~components/UncapIndicator'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'

 import './index.scss'
@ -17,12 +18,17 @@ class SummonResult extends React.Component<Props> {
        return (
            <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`} />
-                <div>
-                    <div>
-                        <h5>{summon.name.en}</h5>
-                        <div className="stars">⭑⭑⭑{(summon.uncap.flb) ? <span>⭑</span> : ''}{(summon.uncap.ulb) ? <span>⭑</span> : ''}</div>
+                <div className="Info">
+                    <h5>{summon.name.en}</h5>
+                    <UncapIndicator 
+                        type="summon"
+                        flb={summon.uncap.flb}
+                        ulb={summon.uncap.ulb}
+                        special={false}
+                    />
+                    <div className="tags">
+                        <WeaponLabelIcon labelType={Element[summon.element]} />
                    </div>
-                    <WeaponLabelIcon labelType={Element[summon.element]} />
                </div>
            </li>
        )
--- a/components/UncapIndicator/index.tsx
+++ b/components/UncapIndicator/index.tsx
@ -6,11 +6,11 @@ import './index.scss'
 interface Props {
    type: 'character' | 'weapon' | 'summon'
    rarity?: number
-    uncapLevel: number
+    uncapLevel?: number
    flb: boolean
    ulb: boolean
    special: boolean
-    updateUncap: (uncap: number) => void
+    updateUncap?: (uncap: number) => void
 }

 const UncapIndicator = (props: Props) => {
@ -52,25 +52,27 @@ const UncapIndicator = (props: Props) => {
    }

    function toggleStar(index: number, empty: boolean) {
-        if (empty) props.updateUncap(index + 1)
-        else props.updateUncap(index)
+        if (props.updateUncap) {
+            if (empty) props.updateUncap(index + 1)
+            else props.updateUncap(index)
+        }
    }

    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) => {
-        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) => {
-        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) => {
        // 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 (
--- a/components/WeaponResult/index.scss
+++ b/components/WeaponResult/index.scss
@ -1,48 +1,63 @@
 .WeaponResult {
-    -webkit-font-smoothing: antialiased;
-
    border-radius: 6px;
    display: flex;
-    font-family: -apple-system, "Helvetica Neue", "Lucida Grande";
-    gap: 8px;
-    padding: 12px;
-}
+    gap: $unit;
+    padding: $unit * 1.5;

-.WeaponResult img {
-    background: #e9e9e9;
-    border-radius: 6px;
-    display: inline-block;
-    height: 72px;
-    width: 120px;
-}
+    &:hover {
+        background: $grey-90;
+        cursor: pointer;
+    }

-.WeaponResult h5 {
-    color: #555;
-    display: inline-block;
-    font-size: $font-large;
-    font-weight: 500;
-    margin: 2px 4px 4px 0;
-}
+    img {
+        background: $grey-80;
+        border-radius: 6px;
+        display: inline-block;
+        height: 72px;
+        width: 120px;
+    }

-.WeaponResult .WeaponLabelIcon {
-    margin-right: 4px;
-}
+    .Info {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: $unit / 2;

-.WeaponResult .stars {
-    display: inline-block;
-    color: #FFA15E;
-    font-size: $font-xlarge;
-}
+        h5 {
+            color: #555;
+            display: inline-block;
+            font-size: $font-medium;
+            font-weight: $medium;
+        }

-.WeaponResult .stars > span {
-    color: #65DAFF;
-}
+        .UncapIndicator {
+            justify-content: left;
+            pointer-events: none;
+        }

-.WeaponResult:hover {
-    background: #e9e9e9;
-    cursor: pointer;
-}
+        .stars {
+            display: inline-block;
+            color: #FFA15E;
+            font-size: $font-xlarge;

-.WeaponResult:hover .image_placeholder {
-    background: #dadada;
+            & > span {
+                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);
+            }
+        }
+    }
 }
--- a/components/WeaponResult/index.tsx
+++ b/components/WeaponResult/index.tsx
@ -1,4 +1,5 @@
 import React from 'react'
+import UncapIndicator from '~components/UncapIndicator'
 import WeaponLabelIcon from '~components/WeaponLabelIcon'

 import './index.scss'
@ -19,13 +20,18 @@ class WeaponResult extends React.Component<Props> {
        return (
            <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`} />
-                <div>
-                    <div>
-                        <h5>{weapon.name.en}</h5>
-                        <div className="stars">⭑⭑⭑{(weapon.uncap.flb) ? <span>⭑</span> : ''}{(weapon.uncap.ulb) ? <span>⭑</span> : ''}</div>
+                <div className="Info">
+                    <h5>{weapon.name.en}</h5>
+                    <UncapIndicator 
+                        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>
-                    <WeaponLabelIcon labelType={Element[weapon.element]} />
-                    <WeaponLabelIcon labelType={Proficiency[weapon.proficiency]} />
                </div>
            </li>
        )
--- a/styles/variables.scss
+++ b/styles/variables.scss
@ -63,6 +63,7 @@ $font-tiny:     11px;
 $font-small:    13px;
 $font-button:   15px;
 $font-regular:  16px;
+$font-medium:   18px;
 $font-large:    21px;
 $font-xlarge:   24px;
 $font-xxlarge:  28px;