Filament•3w ago

Different toast alignments for frontend

I have an admin panel, and I am using the Toast notifications in a regular livewire component (https://filamentphp.com/docs/3.x/notifications/installation). The issue I am having is I cannot find a way of changing the position of the toast notifications only on the frontend. The code I am using to change it.

Notifications::alignment(Alignment::Center);
Notifications::verticalAlignment(VerticalAlignment::End);

Notifications::alignment(Alignment::Center);
Notifications::verticalAlignment(VerticalAlignment::End);

I have tried the following: 1. Adding it inside View::composer('layouts.app', function() {}) 2. Creating a middleware and applying it to the frontend routes. 3. Using request()->is('admin/*') It only happens when trying to send a toast in livewire, does work if I send it then redirect (like a regular flash msg).

Notification::make('foo')
    ->title('bar')
    ->send();

Notification::make('foo')
    ->title('bar')
    ->send();

It's like these attempts cannot tell if the livewire update request is frontend/admin panel so does not work, and Filament is generating the position during this request.

Installation - Notifications - Filament

Solution:

Ok have figured it out with: ``` .fi-no { @apply !items-center !flex-col-reverse !justify-end; }...

Jump to solution

17 Replies

LeandroFerreira•3w ago

You mean, Filament notifications?

HarveyOP•3w ago

yep I'm using them outside of a panel too though

LeandroFerreira•3w ago

maybe a custom middleware?

public function handle(Request $request, Closure $next): Response
{
    Notifications::alignment(Alignment::Center);
    Notifications::verticalAlignment(VerticalAlignment::End);

    return $next($request);
}

public function handle(Request $request, Closure $next): Response
{
    Notifications::alignment(Alignment::Center);
    Notifications::verticalAlignment(VerticalAlignment::End);

    return $next($request);
}

Route::get(...)->middleware([CustomMiddleware::class]);

Route::get(...)->middleware([CustomMiddleware::class]);

HarveyOP•3w ago

Tried that. Sadly it does not apply them when I send a notification. Still pops up from the top-right. Just tried your code verbatim too.

LeandroFerreira•3w ago

it should work. Maybe you could create a miminal repo on github to reproduce this issue

HarveyOP•3w ago

https://github.com/harvey-4thd/filament-notification-position here's a repo with the issue reproduced. Fullpage livewire component, with that custom middleware. You can click the button to test the notification.

GitHub

GitHub - harvey-4thd/filament-notification-position

Contribute to harvey-4thd/filament-notification-position development by creating an account on GitHub.

LeandroFerreira•3w ago

Hi, sorry for the delay. Maybe we can try another way to achieve it: add to resources/css/app.css

.fi-no {
    @apply items-center flex-col-reverse justify-end;
}

.fi-no {
    @apply items-center flex-col-reverse justify-end;
}

run npm run dev

HarveyOP•3w ago

Appreciate your time on this. I have decided to go with checking the request()->header('referer') and seeing if it has my /admin in there. If it does then we can assume we're on the frontend. That was it'll also retain the correct transition-in. In my service provider:

if (request()->hasHeader('referer') && ! str_starts_with(request()->header('referer'), url('/admin'))) {
    Notifications::alignment(Alignment::Center);
    Notifications::verticalAlignment(VerticalAlignment::Start);
}

if (request()->hasHeader('referer') && ! str_starts_with(request()->header('referer'), url('/admin'))) {
    Notifications::alignment(Alignment::Center);
    Notifications::verticalAlignment(VerticalAlignment::Start);
}

Seems to work for my case.

LeandroFerreira•3w ago

I believe applying the CSS is more appropriate and it avoids additional processing on the backend..

HarveyOP•3w ago

Yes, but it does not have the correct transition - it's still coming in from the right

LeandroFerreira•3w ago

same code here

LeandroFerreira•3w ago

you should also install the notifications following this section to add Filament preset, etc

Installation - Notifications - Filament

HarveyOP•3w ago

But it still slides in from the right? The animation I mean

HarveyOP•3w ago

Is this what you are seeing?

Solution

Harvey•3w ago

Ok have figured it out with:

.fi-no {
    @apply !items-center !flex-col-reverse !justify-end;
}

.fi-no .translate-x-12 {
    @apply -translate-y-12 translate-x-0;
}

.fi-no {
    @apply !items-center !flex-col-reverse !justify-end;
}

.fi-no .translate-x-12 {
    @apply -translate-y-12 translate-x-0;
}

which makes it slide in from the top (and is in the middle) like default

LeandroFerreira•3w ago

that works. I think it is better than process it on backend..

HarveyOP•3w ago

Yeah cheers. I just didn't want to give up those animations😂

Gaming

Programming

Different toast alignments for frontend

Did you find this page helpful?