Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

feat: hide 'very unsatisfied'/'very satisfied' on smaller sreens

Browse Source
This commit is contained in:
Thomas Heartman 2022-02-27 19:40:14 +01:00
parent e007123c59
commit a629c36fe7
2 changed files with 68 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
website/src/components/UserFeedback/index.jsx
View File

@ -106,37 +106,49 @@ export const FeedbackWrapper = ({ seedData }) => {
</p> </p>
<div className={styles['satisfaction-input-container']}> <div className={styles['satisfaction-input-container']}>
<span aria-hidden="true">Very unsatisfied</span> <span
{[1, 2, 3, 4, 5].map((n) => ( aria-hidden="true"
<span key={`input-group-${n}`}> className={styles['satisfaction-input-visual-label']}
<input >
className={join( Very unsatisfied
'visually-hidden', </span>
styles['user-satisfaction-score-input'], <span className={styles['satisfaction-input-inputs']}>
)} {[1, 2, 3, 4, 5].map((n) => (
required <span key={`input-group-${n}`}>
id={`user-satisfaction-score-${n}`} <input
name="satisfaction-level" className={join(
type="radio" 'visually-hidden',
value={n} styles['user-satisfaction-score-input'],
defaultChecked={n === state.data.score} )}
onChange={(e) => { required
const value = parseInt(e.target.value); id={`user-satisfaction-score-${n}`}
console.log('the value is', value); name="satisfaction-level"
setNewValue(value); type="radio"
}} value={n}
/> defaultChecked={n === state.data.score}
<label onChange={(e) => {
className={ const value = parseInt(e.target.value);
styles['user-satisfaction-score-label'] console.log('the value is', value);
} setNewValue(value);
htmlFor={`user-satisfaction-score-${n}`} }}
> />
{n} <label
</label> className={
</span> styles['user-satisfaction-score-label']
))} }
<span aria-hidden="true">Very satisfied</span> htmlFor={`user-satisfaction-score-${n}`}
>
{n}
</label>
</span>
))}
</span>
<span
aria-hidden="true"
className={styles['satisfaction-input-visual-label']}
>
Very satisfied
</span>
</div> </div>
<div className={styles['button-container']}> <div className={styles['button-container']}>
<button <button

25
website/src/components/UserFeedback/styles.module.css
View File

@ -43,11 +43,36 @@
.satisfaction-input-container { .satisfaction-input-container {
display: flex; display: flex;
flex-flow: wrap;
place-content: center; place-content: center;
align-items: center; align-items: center;
gap: var(--element-horizontal-gap); gap: var(--element-horizontal-gap);
} }
.satisfaction-input-inputs {
display: flex;
flex-flow: wrap;
place-content: center;
align-items: center;
gap: var(--element-horizontal-gap);
}
.satisfaction-input-visual-label {
display: none;
}
@media screen and (min-width: 800px) {
.satisfaction-input-visual-label {
display: inline;
}
}
@media screen and (max-width: 400px) {
.satisfaction-input-inputs {
gap: calc(var(--element-horizontal-gap) / 2);
}
}
.user-satisfaction-score-label { .user-satisfaction-score-label {
display: grid; display: grid;
place-content: center; place-content: center;