🎨 Agencement basique de la saisie des objectifs
Mael
Laurent Bossavit
parent
36db06c30f
commit
fd1a16d1ee
|
|
@ -19,26 +19,31 @@
|
|||
width: 30em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#targetSelection #targets > div {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#targetSelection .main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: middle;
|
||||
}
|
||||
#targetSelection label {
|
||||
display: block;
|
||||
margin-bottom: 1.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
#targetSelection label i {
|
||||
font-size: 180%;
|
||||
}
|
||||
#targetSelection div {
|
||||
margin-left: 1em;
|
||||
font-size: 170%;
|
||||
}
|
||||
|
||||
#targetSelection .optionTitle {
|
||||
font-size: 130%;
|
||||
font-size: 120%;
|
||||
margin-left: 1em;
|
||||
}
|
||||
#targetSelection label p {
|
||||
#targetSelection p {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
#targetSelection input[type='checkbox'] {
|
||||
|
|
@ -65,4 +70,23 @@
|
|||
font-size: 80%;
|
||||
}
|
||||
|
||||
/* TODO styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
|
||||
#targetSelection input[type='text'] {
|
||||
border: 1px solid #3c4963;
|
||||
}
|
||||
|
||||
#targetSelection .targetValue {
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
#targetSelection .targetValue,
|
||||
#targetSelection input[type='text'] {
|
||||
width: 6em;
|
||||
display: inline-block;
|
||||
height: 1.4em;
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
padding: 0em 0.3em;
|
||||
}
|
||||
|
||||
/* Autre idée pour styler les checkboxes https://codepen.io/KenanYusuf/pen/PZKEKd */
|
||||
|
|
|
|||
|
|
@ -96,73 +96,79 @@ export default class TargetSelection extends Component {
|
|||
<div id="targets">
|
||||
{popularTargets.map(s => (
|
||||
<div key={s.name}>
|
||||
<input
|
||||
id={s.name}
|
||||
type="checkbox"
|
||||
disabled={optionDisabled(s.name)}
|
||||
checked={optionIsChecked(s)}
|
||||
onChange={() =>
|
||||
this.setState({
|
||||
targets: targets.find(t => t === s.name)
|
||||
? reject(t => t === s.name, targets)
|
||||
: [...targets, s.name]
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor={s.name}
|
||||
key={s.name}
|
||||
<div className="main">
|
||||
<input
|
||||
id={s.name}
|
||||
type="checkbox"
|
||||
disabled={optionDisabled(s.name)}
|
||||
checked={optionIsChecked(s)}
|
||||
onChange={() =>
|
||||
this.setState({
|
||||
targets: targets.find(t => t === s.name)
|
||||
? reject(t => t === s.name, targets)
|
||||
: [...targets, s.name]
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor={s.name}
|
||||
key={s.name}
|
||||
style={
|
||||
optionIsChecked(s)
|
||||
? {
|
||||
color: textColourOnWhite
|
||||
}
|
||||
: {}
|
||||
}>
|
||||
{optionIsChecked(s) ? (
|
||||
<i
|
||||
className="fa fa-check-square-o fa-2x"
|
||||
style={{ color: textColourOnWhite }}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-square-o fa-2x"
|
||||
style={{ color: '#4b4b66' }}
|
||||
/>
|
||||
)}
|
||||
<span className="optionTitle">{s.title || s.name}</span>
|
||||
</label>
|
||||
<span className="targetInputOrValue">
|
||||
{s.name.includes('salaire') &&
|
||||
this.state.activeInput === s.dottedName ? (
|
||||
<Field
|
||||
name={s.dottedName}
|
||||
component="input"
|
||||
type="text"
|
||||
placeholder="mon salaire"
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="targetValue"
|
||||
style={{ width: '6em' }}
|
||||
onClick={() =>
|
||||
this.setState({ activeInput: s.dottedName })
|
||||
}>
|
||||
{do {
|
||||
let rule = this.props.targets.find(
|
||||
propEq('dottedName', s.dottedName)
|
||||
),
|
||||
value = rule && rule.nodeValue
|
||||
;<RuleValue value={value} />
|
||||
}}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
style={
|
||||
optionIsChecked(s)
|
||||
? {
|
||||
color: textColourOnWhite
|
||||
}
|
||||
: {}
|
||||
? { color: textColourOnWhite }
|
||||
: { color: '#4b4b66' }
|
||||
}>
|
||||
{optionIsChecked(s) ? (
|
||||
<i
|
||||
className="fa fa-check-square-o fa-2x"
|
||||
style={{ color: textColourOnWhite }}
|
||||
/>
|
||||
) : (
|
||||
<i
|
||||
className="fa fa-square-o fa-2x"
|
||||
style={{ color: '#4b4b66' }}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<span className="optionTitle">{s.title || s.name}</span>
|
||||
<p
|
||||
style={
|
||||
optionIsChecked(s)
|
||||
? { color: textColourOnWhite }
|
||||
: { color: '#4b4b66' }
|
||||
}>
|
||||
{s['résumé']}
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
{s.name.includes('salaire') &&
|
||||
this.state.activeInput === s.dottedName ? (
|
||||
<Field
|
||||
name={s.dottedName}
|
||||
component="input"
|
||||
type="text"
|
||||
placeholder="mon salaire"
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
style={{ width: '6em' }}
|
||||
onClick={() => this.setState({ activeInput: s.dottedName })}>
|
||||
{do {
|
||||
let rule = this.props.targets.find(
|
||||
propEq('dottedName', s.dottedName)
|
||||
),
|
||||
value = rule && rule.nodeValue
|
||||
;<RuleValue value={value} />
|
||||
}}
|
||||
</span>
|
||||
)}
|
||||
{s['résumé']}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ export let RuleValue = ({ value }) =>
|
|||
let unsatisfied = value == null,
|
||||
irrelevant = value == 0
|
||||
let [className, text] = irrelevant
|
||||
? ['irrelevant', "Vous n'êtes pas concerné"]
|
||||
? ['irrelevant', 'Non applicable']
|
||||
: unsatisfied
|
||||
? ['unsatisfied', 'En attente de vos réponses...']
|
||||
? ['unsatisfied', '']
|
||||
: ['figure', humanFigure(0)(value) + ' €']
|
||||
;<ReactCSSTransitionGroup
|
||||
transitionName="flash"
|
||||
|
|
|
|||
Loading…
Reference in New Issue