search

diogogpinto / filament-auth-ui-enhancer

This Filament plugin empowers you to transform your auth pages with ease, allowing you to make them truly stand out. It offers a flexible alternative to the default auth pages in the Filament Panels package.
MIT License
89 stars 9 forks source link

[Bug]: What's wrong why it looks like this? #6

Closed devhoussam1998 closed 4 months ago

devhoussam1998 commented 4 months ago

What happened?

thei mage not displayed as expected I follow the README

How to reproduce the bug

Screenshot 2024-10-22 at 17 59 43

Package Version

v1.0.1

PHP Version

^8.2

Laravel Version

^11.9

Which operating systems does with happen with?

macOS

Notes

No response

Jam0r85 commented 4 months ago

I'm also getting this so doesn't appear to be a one off.

Removing w-full from the login section and replacing with w-1/2 fixes the issue for me. Seems to be that the login panel is dictating the wrong width.

diogogpinto commented 4 months ago

Hey @devhoussam1998 and @Jam0r85

It looks like you haven't registered the views in your custom theme and ran npm run build in your terminal.

If you created a custom theme like 'admin', navigate to /resources/css/filament/admin and add the following to your content array in tailwind.config.js:

content: [
    './vendor/diogogpinto/filament-auth-ui-enhancer/resources/**/*.blade.php',
]

After, you should run npm run build in your terminal.

You should note that this plugin requires a custom theme to run.

Jam0r85 commented 4 months ago

I've 110% loaded this into my tailwind.config.js and still having the issue.

diogogpinto commented 4 months ago

I've 110% loaded this into my tailwind.config.js and still having the issue.

Do you have any repo I can replicate to test this out? In all the tests we've run we never found this issue.

Jam0r85 commented 4 months ago

Screenshot 2024-10-22 at 18 27 16 Screenshot 2024-10-22 at 18 27 26 Screenshot 2024-10-22 at 18 27 45

I don't at the moment i'm afraid. Mobile works fine? I'll see if I can sort one.

diogogpinto commented 4 months ago

I don't at the moment i'm afraid. Mobile works fine? I'll see if I can sort one.

Weird. Would you mind sharing your plugin config methods? Or paste this one to test out:

        AuthUIEnhancerPlugin::make()
            ->showEmptyPanelOnMobile(false)
            ->formPanelPosition('right')
            ->formPanelWidth('40%')
            ->emptyPanelBackgroundImageOpacity('70%')
            ->emptyPanelBackgroundImageUrl('https://images.pexels.com/photos/466685/pexels-photo-466685.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2')
Jam0r85 commented 4 months ago 
AuthUIEnhancerPlugin::make()
                    ->formPanelBackgroundColor(Color::Zinc, 300)
                    ->formPanelPosition('right')
                    ->mobileFormPanelPosition('bottom')
                    ->formPanelWidth('40%')
                    ->emptyPanelBackgroundImageUrl('https://images.unsplash.com/photo-1496449903678-68ddcb189a24?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'),
devhoussam1998 commented 4 months ago

Hey @devhoussam1998 and @Jam0r85

It looks like you haven't registered the views in your custom theme and ran npm run build in your terminal.

If you created a custom theme like 'admin', navigate to /resources/css/filament/admin and add the following to your content array in tailwind.config.js:

content: [
    './vendor/diogogpinto/filament-auth-ui-enhancer/resources/**/*.blade.php',
]

After, you should run npm run build in your terminal.

You should note that this plugin requires a custom theme to run.

thanks it works

devhoussam1998 commented 4 months ago

I just add './vendor/diogogpinto/filament-auth-ui-enhancer/resources/**/*.blade.php', in /resources/css/filament/admin/tailwind.config.js

diogogpinto commented 4 months ago 
AuthUIEnhancerPlugin::make()
                    ->formPanelBackgroundColor(Color::Zinc, 300)
                    ->formPanelPosition('right')
                    ->mobileFormPanelPosition('bottom')
                    ->formPanelWidth('40%')
                    ->emptyPanelBackgroundImageUrl('https://images.unsplash.com/photo-1496449903678-68ddcb189a24?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'),

Whenever possible, please share a repo and open a new issue so we can debug this further. This seems more like a tailwind config thing, as many people were able to run the plugin.

Please reach out when ready! Thank you so much for your feedback, is greatly appreciated.

tominal commented 1 month ago

This definitely does not work out of the box and I can confirm it looks identical to the original poster here. I had to add custom CSS to get it to not do that:

.custom-auth-form-panel {
    width: var(--form-panel-width) !important;
}
diogogpinto commented 1 month ago

This definitely does not work out of the box and I can confirm it looks identical to the original poster here. I had to add custom CSS to get it to not do that:

.custom-auth-form-panel {
    width: var(--form-panel-width) !important;
}

@tominal It worked for previous users and has worked out of the box for more than 6 panels I’m running in production until a couple of releases ago (haven’t upgraded the production websites just yet).

This night or tomorrow I will make a video installing the plugin from scratch in a fresh installation just to see if it works or not.

To say that it “definitely” does not work out of the box when thousand of other people have used it with no issues is quite a stretch and a bit, just a tiny bit maybe, misleading.

tominal commented 1 month ago

This definitely does not work out of the box and I can confirm it looks identical to the original poster here. I had to add custom CSS to get it to not do that:

.custom-auth-form-panel {
    width: var(--form-panel-width) !important;
}

@tominal It worked for previous users and has worked out of the box for more than 6 panels I’m running in production until a couple of releases ago (haven’t upgraded the production websites just yet).

This night or tomorrow I will make a video installing the plugin from scratch in a fresh installation just to see if it works or not.

To say that it “definitely” does not work out of the box when thousand of other people have used it with no issues is quite a stretch and a bit, just a tiny bit maybe, misleading.

Looking forward to the video!

diogogpinto commented 1 month ago

@tominal I was almost heading to bed when I got an email with the notification. Here you go, a 3min and 35 sec video setting up Laravel and Filament from scratch with the plugin working out of the box, as promised.

https://github.com/user-attachments/assets/cb776f59-59fc-4a6a-bf3b-3e97d08107fd

(the video is long because I'm tired AF)

tominal commented 1 month ago

Maybe a CSS attribute not supported on Arc, yet? Does your Chrome browser show the same thing?

diogogpinto commented 1 month ago

Maybe a CSS attribute not supported on Arc, yet? Does your Chrome browser show the same thing?

Arc is chrome based, so the output should be similar. In the mobile browsers (Arc search, chrome and safari everything’s working as expected on prod apps)

In bed now but will update you tomorrow.

diogogpinto commented 1 month ago

Maybe a CSS attribute not supported on Arc, yet? Does your Chrome browser show the same thing?

Here's a Safari, Chrome and Arc screenshot

Image Image