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

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

@ -43,11 +43,36 @@
.satisfaction-input-container {
display: flex;
flex-flow: wrap;
place-content: center;
align-items: center;
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 {
display: grid;
place-content: center;