Notification Positioning about svelte-notifications HOT 2 OPEN

I forgot to provide a quick demo of how I am quickly handling this right now for a prototype I am trying to whip out.

Right after I programmatically call the notifier, I select the container element and add a class name to the element. Obviously, this repositions the container for all active toasts, which is not ideal.

// positioning override
.toast-top-left {
  left: 0;
}
.toast-bottom-left {
  bottom: 0;
  left: 0;
}
// and so on...

notifier.success('Notifications work!', 5000)
const el = document.querySelector('.toasts')


// replace existing overrides
el.className = el.className.replace(/ toast-bottom-right/g, '')

el.className = el.className.replace(/ toast-bottom-left/g, '')

el.className = el.className.replace(/ toast-top-left/g, '')

// add new class override
el.className += ' toast-bottom-left'

from svelte-notifications.

Hi @joelhickok - I've not really had need for re-positioning, so I've not done any work to this effect. Also most of the CSS was rewritten by a contributor, so I'm not 100% sure how it works - but it looks like you've figured some of it out!

Happy to accept a PR on this if you get a chance!

from svelte-notifications.