canonical / canonical/vanilla-framework

Floating Notifications

Open
#4,494 11 comments 0 reactions 0 assignees View on GitHub
Review: Design needed Vanilla WG WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Pattern to amend

[Notifications](https://vanillaframework.io/docs/patterns/notification)

## Visual

![image](https://user-images.githubusercontent.com/30973042/174332560-05bb5519-cd40-4588-8727-6dcb5e56b0a3.png)
![Screenshot from 2022-06-17 21-19-21](https://user-images.githubusercontent.com/30973042/174332985-ec4ee36a-1871-4cd2-b9a5-9a5da2ee9e47.png)

On Vanilla, it could look something like this:
![Screenshot from 2022-06-17 21-32-07](https://user-images.githubusercontent.com/30973042/174334943-158f24aa-3c84-4f43-a0e1-652c8fcb26ed.png)

## Context
It is used to inform users of a process that has been performed or will be performed. They appear towards the bottom of the screen. They are detached from the rest of the page content and are positioned usually at the bottom of the screen offset to either side on larger screens.

Contributor guide

Open the contributing guide

Research direction

Start with the Notifications pattern linked in the issue and compare its current presentation with the supplied reference images. Implement the floating placement described in the context, including bottom-of-screen positioning and side offsets on larger screens; done means the notification pattern matches the proposed visuals and responsive placement.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.