🎨 améliorze le switch
Johan Girod
parent
ccf34fb2d7
commit
72e8ec58db
|
|
@ -1,38 +1,71 @@
|
|||
#PeriodSwitch {
|
||||
margin: 1em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#PeriodSwitch .base {
|
||||
background: var(--colour);
|
||||
border-radius: 0.3em;
|
||||
padding: 0.4em;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#PeriodSwitch label {
|
||||
.ui__.toggle {
|
||||
border: 1px solid var(--colour);
|
||||
border-radius: 0.3rem;
|
||||
display: flex;
|
||||
}
|
||||
.ui__.toggle label {
|
||||
padding: 0.6rem 1.2rem;
|
||||
color: var(--colour);
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui__.toggle.small label {
|
||||
font-size: 80%;
|
||||
overflow: hidden;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
.ui__.toggle label:not(:last-child) {
|
||||
border-right: 1px solid var(--colour);
|
||||
}
|
||||
|
||||
#PeriodSwitch input[type='radio'] {
|
||||
.ui__.toggle input[type='radio'] {
|
||||
position: fixed;
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
#PeriodSwitch .radioText {
|
||||
.ui__.toggle input[type='radio'] ~ *::before {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
content: '';
|
||||
margin: 0 0.3em;
|
||||
vertical-align: middle;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 0.3em;
|
||||
padding: 0 0.6em;
|
||||
box-shadow: 0 0 0px 1.5px rgb(41, 117, 209);
|
||||
transition: all 0.1s;
|
||||
border: 0.5em solid white;
|
||||
}
|
||||
.ui__.toggle input[type='radio'] ~ * {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.ui__.toggle input[type='radio']:checked ~ *::before {
|
||||
border: 4px solid white;
|
||||
background: var(--colour);
|
||||
}
|
||||
.ui__.toggle input[type='radio']:focus ~ .radioText {
|
||||
border: 1px dotted gray;
|
||||
}
|
||||
.ui__.toggle input[type='radio']:checked ~ .radioText {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ui__.toggle input[type='radio']:checked ~ * {
|
||||
background: var(--colour);
|
||||
box-shadow: 0 0 0 3rem var(--colour);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#PeriodSwitch .radioText:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#PeriodSwitch input[type='radio']:checked + .radioText {
|
||||
background: white;
|
||||
border: 4px solid white;
|
||||
color: var(--colour);
|
||||
text-decoration: none;
|
||||
.ui__.toggle label:hover input[type='radio']:not(:checked) ~ * {
|
||||
background: var(--lighterColour);
|
||||
box-shadow: 0 0 0 1rem var(--lighterColour);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { findRuleByDottedName, nestedSituationToPathMap } from 'Engine/rules'
|
||||
import { compose, filter, map, toPairs } from 'ramda'
|
||||
import React, { useEffect } from 'react'
|
||||
import emoji from 'react-easy-emoji'
|
||||
import { Trans, withTranslation } from 'react-i18next'
|
||||
import { connect } from 'react-redux'
|
||||
import { batchActions } from 'redux-batched-actions'
|
||||
|
|
@ -54,7 +53,7 @@ export default compose(
|
|||
})
|
||||
return (
|
||||
<div id="PeriodSwitch">
|
||||
<span className="base ui__ card">
|
||||
<div className="base ui__ small toggle">
|
||||
<label>
|
||||
<Field
|
||||
name="période"
|
||||
|
|
@ -65,7 +64,7 @@ export default compose(
|
|||
updateSituation('mois', batchPeriodChange, situation, rules)
|
||||
}
|
||||
/>
|
||||
<span className="radioText">
|
||||
<span>
|
||||
<Trans>mois</Trans>
|
||||
</span>
|
||||
</label>
|
||||
|
|
@ -79,11 +78,11 @@ export default compose(
|
|||
updateSituation('année', batchPeriodChange, situation, rules)
|
||||
}
|
||||
/>
|
||||
<span className="radioText">
|
||||
<span>
|
||||
<Trans>année</Trans>
|
||||
</span>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { React, T } from 'Components'
|
|||
import Answers from 'Components/AnswerList'
|
||||
import Conversation from 'Components/conversation/Conversation'
|
||||
import PageFeedback from 'Components/Feedback/PageFeedback'
|
||||
import PeriodSwitch from 'Components/PeriodSwitch'
|
||||
import withColours from 'Components/utils/withColours'
|
||||
import { compose } from 'ramda'
|
||||
import emoji from 'react-easy-emoji'
|
||||
|
|
@ -101,10 +100,11 @@ export default compose(
|
|||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
{showTargets && (
|
||||
<Animate.fromBottom>{this.props.targets}</Animate.fromBottom>
|
||||
)}
|
||||
|
||||
{!noUserInput && this.props.explanation}
|
||||
{!noUserInput && !noFeedback && (
|
||||
<Animate.appear delay={2000}>
|
||||
<PageFeedback
|
||||
|
|
@ -117,8 +117,6 @@ export default compose(
|
|||
/>
|
||||
</Animate.appear>
|
||||
)}
|
||||
<PeriodSwitch />
|
||||
{!noUserInput && this.props.explanation}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import classNames from 'classnames'
|
||||
import Controls from 'Components/Controls'
|
||||
import InputSuggestions from 'Components/conversation/InputSuggestions'
|
||||
import PeriodSwitch from 'Components/PeriodSwitch'
|
||||
import withColours from 'Components/utils/withColours'
|
||||
import withLanguage from 'Components/utils/withLanguage'
|
||||
import withSitePaths from 'Components/utils/withSitePaths'
|
||||
|
|
@ -84,7 +85,9 @@ export default compose(
|
|||
return (
|
||||
<div id="targetSelection">
|
||||
<QuickLinks />
|
||||
|
||||
{!noUserInput && <Controls controls={analysis.controls} />}
|
||||
<PeriodSwitch />
|
||||
<div style={{ height: '10px' }}>
|
||||
<Progress percent={progress} />
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue