I’d like notifications to be structured a bit differently! Here’s a mockup
Trying to achieve two basic goals:
- Float icons to the left and clear text from below, so I can visually separate type of notification and notification content.
- Enable entire notification row to be selectable rather than just a text link (similar to links under the hamburger icon)
I think to accomplish this the HTML would have to be structured like this
<li> <a href="#"> <i>icon</i> <p> <span>Username</span> This is a notification </p> </a> </li> ``` The `a` tag would get `display: block` which would make the entire `li` clickable, the `i` could be floated left, `p` would get `overflow: hidden;` so the text wouldn't float under the icon, and the `span` would be styled to differentiate username from notification content. Any thoughts/concerns? Unfortunately this would mess with a translation, so it's not as simple as just changing the HTML!