Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +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

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

@ -106,7 +106,13 @@ 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
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) => ( {[1, 2, 3, 4, 5].map((n) => (
<span key={`input-group-${n}`}> <span key={`input-group-${n}`}>
<input <input
@ -136,7 +142,13 @@ export const FeedbackWrapper = ({ seedData }) => {
</label> </label>
</span> </span>
))} ))}
<span aria-hidden="true">Very satisfied</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;