Add a dismiss button to alerts #8
Conversation
"Important" alerts have a sticky position by default. I don't like sticky/fixed elements that I can't dismiss because they're annoying, so this commit introduces an unpin/pin button on the alert that un-stickies it.
|
Great idea, the UX confused me at first though:
I think we probably only really need the X to completely dismiss the alert, and have it not come back? |
|
Yeah, I don't know why I thought it needed a re-pin button too... And an X button usually dismisses something, not un-sticky it, so that behaviour doesn't make sense either. Once somebody's read an alert, it's probably better we don't keep alerting them. Thanks for the feedback; I'll make those changes. |
Rather than showing an unpin button only on "important" alerts, which created a confusing UX, add a dismiss button to all alerts that permanently dismisses the alert.
cmmartti
changed the title
cmmartti
changed the title
|
When reloading the page, after having dismissed the cookies, one can see for a short amount of time that the alerts are still there. It is a little bit annoying. Moreover, I would suggest to use Local Storage rather than cookies. |
Also, hide alerts by default, and only show them if the user has not dismissed them. With this change, clients without JavaScript will not see any alerts.
| padding: 0.4em; | ||
| height: 1.5em; | ||
| width: 1.5em; | ||
|
|
There was a problem hiding this comment.
Historically, cursor: pointer has only been used for links. It's obvious this isn't a link so using it here wouldn't be a problem, but I don't think it necessarily needs more affordance (people know what an X button does).
There was a problem hiding this comment.
If anything, I would add a subtle background on hover.
* Add an unpin/pin button to alerts "Important" alerts have a sticky position by default. I don't like sticky/fixed elements that I can't dismiss because they're annoying, so this commit introduces an unpin/pin button on the alert that un-stickies it. * Change unpin button to a dismiss button Rather than showing an unpin button only on "important" alerts, which created a confusing UX, add a dismiss button to all alerts that permanently dismisses the alert. * fix: Store alert prefs in localStorage Also, hide alerts by default, and only show them if the user has not dismissed them. With this change, clients without JavaScript will not see any alerts. * fix: Change initial alert state to be dismissed
"Important" alerts have a sticky position by default. I don't like sticky/fixed elements that I can't dismiss because they're annoying, so this commit introduces
an unpin/pin button on the alert that un-stickies ita close button on each alert that permanently dismisses it. Preferences are saved ina cookielocalStorage.See https://cmmartti-pokeapi-co.netlify.com for a demo.