Merge pull request #100 from jedmund/fix-awakening-skill-select
Fix awakening and skill select
This commit is contained in:
commit
d5f4ff6c0a
7 changed files with 30 additions and 5 deletions
|
|
@ -20,8 +20,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.Label {
|
.Label {
|
||||||
|
display: none;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
|
|
||||||
|
&.Visible {
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.Input {
|
.Input {
|
||||||
min-width: $unit * 12;
|
min-width: $unit * 12;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
|
|
|
||||||
|
|
@ -187,6 +187,7 @@ const AwakeningSelect = (props: Props) => {
|
||||||
max={maxValue}
|
max={maxValue}
|
||||||
step="1"
|
step="1"
|
||||||
onChange={handleInputChange}
|
onChange={handleInputChange}
|
||||||
|
visible={awakeningType !== -1}
|
||||||
ref={awakeningLevelInput}
|
ref={awakeningLevelInput}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,15 @@ interface Props
|
||||||
React.InputHTMLAttributes<HTMLInputElement>,
|
React.InputHTMLAttributes<HTMLInputElement>,
|
||||||
HTMLInputElement
|
HTMLInputElement
|
||||||
> {
|
> {
|
||||||
|
visible?: boolean
|
||||||
error?: string
|
error?: string
|
||||||
label?: string
|
label?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const defaultProps = {
|
||||||
|
visible: true,
|
||||||
|
}
|
||||||
|
|
||||||
const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
|
const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
|
||||||
props: Props,
|
props: Props,
|
||||||
forwardedRef
|
forwardedRef
|
||||||
|
|
@ -34,7 +39,13 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<label className="Label" htmlFor={props.name}>
|
<label
|
||||||
|
className={classNames({
|
||||||
|
Label: true,
|
||||||
|
Visible: props.visible,
|
||||||
|
})}
|
||||||
|
htmlFor={props.name}
|
||||||
|
>
|
||||||
<input
|
<input
|
||||||
{...inputProps}
|
{...inputProps}
|
||||||
autoComplete="off"
|
autoComplete="off"
|
||||||
|
|
@ -52,4 +63,6 @@ const Input = React.forwardRef<HTMLInputElement, Props>(function Input(
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
Input.defaultProps = defaultProps
|
||||||
|
|
||||||
export default Input
|
export default Input
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
|
||||||
|
|
||||||
// Set current job from state on mount
|
// Set current job from state on mount
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (party.job.id !== '-1') {
|
if (party.job?.id !== '-1') {
|
||||||
setCurrentJob(party.job)
|
setCurrentJob(party.job)
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
& svg {
|
& svg {
|
||||||
fill: var(--icon-tertiary-hover);
|
fill: var(--icon-secondary-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -42,10 +42,9 @@ const JobSkillSearchFilterBar = (props: Props) => {
|
||||||
<Select
|
<Select
|
||||||
value={-1}
|
value={-1}
|
||||||
triggerClass="Bound"
|
triggerClass="Bound"
|
||||||
trigger={'All elements'}
|
|
||||||
open={open}
|
open={open}
|
||||||
onValueChange={onChange}
|
onValueChange={onChange}
|
||||||
onClick={openSelect}
|
onOpenChange={openSelect}
|
||||||
>
|
>
|
||||||
<SelectItem key="all" value={-1}>
|
<SelectItem key="all" value={-1}>
|
||||||
{t(`job_skills.all`)}
|
{t(`job_skills.all`)}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,10 @@
|
||||||
.Weapon.Dialog {
|
.Weapon.Dialog {
|
||||||
|
min-width: 480px;
|
||||||
|
|
||||||
|
@include breakpoint(phone) {
|
||||||
|
min-width: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
.mods {
|
.mods {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue