awcodes
commented
3 months ago In Filament v3 the asset system changed. See the second paragraph under Installation in the Read.me for the plugin.
Closed kingmaker-agm closed 3 months ago
awcodes
commented
3 months ago In Filament v3 the asset system changed. See the second paragraph under Installation in the Read.me for the plugin.
kingmaker-agm
commented
3 months ago Hi @awcodes
I am not using any Custom Themes in the Filament. I'm not much familiar with the Custom Themes and the project doesn't have Vite setup.
Can you suggest me how to get this Plugin working with the Default Filament provided Theme itself?
The documentation and the resources are not very clear.
awcodes
commented
3 months ago You have to use a custom theme with filament v3.
kingmaker-agm
commented
3 months ago For People who don't know how to Setup the Custom Theme in the Filament, please follow the Instruction below.
Official Filament Documentation
php artisan make:filament-themepostcss.config.js
b. resources/css/filament/admin/theme.css
c. resources/css/filament/admin/tailwind.config.jsvite.config.js files input array configuration
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/js/app.js', 'resources/css/filament/admin/theme.css', ], refresh: true, }), ], });
4. Add the `awcodes/overlook` blade views into the newly created `resources/css/filament/admin/tailwind.config.js`
```js
import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
export default {
presets: [preset],
content: [
'./app/Filament/**/*.php',
'./resources/views/filament/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
// Awcodes Overlook plugin
'./vendor/awcodes/overlook/resources/views/**/*.blade.php',
],
};AdminPanelProvider Service provider file
class AdminPanelProvider extends PanelProvider
{
public function panel(Panel $panel): Panel
{
return $panel
->default()
// other configs
->viteTheme('resources/css/filament/admin/theme.css');
}
}npm run buildThis will get the Issue resolved.
kingmaker-agm
commented
3 months ago @awcodes
Won't you think its appropriate to provide a Default Stylesheet for Users who are not using a Custom Filament Theme?
I believe as a package, it should be easier to use and work out-of-the-box if possible.
Thanks ;-)
awcodes
commented
3 months ago This is why it requires a custom theme. https://filamentphp.com/docs/3.x/support/assets#using-tailwind-css-in-plugins
kingmaker-agm
commented
3 months ago Hi @awcodes
I'm not stating that the Custom Themes was not a useful or less significant.
What I suggest is that Overlook plugin can detect if we are using a Custom Theme or not, and then decide on provide with a pre-built CSS for that case alone with all the Tailwind CSS classes used in your plugin.
We can simple copy the markup in the repository and paste it in the Tailwind playground to get the necessary TailwindCSS Utilities for your views, Am I right?
Please do let me know If I want to try to implement this and provide an PR?
awcodes
commented
3 months ago A custom theme is the recommended usage according to filament so I would prefer to stick with that to keep css bloat to a minimum.
kingmaker-agm
commented
3 months ago Thanks for Clarifying, Adam !!
Filament Version
v3
Plugin Version
v2.2.0
PHP Version
PHP 8.2.10
Problem description
After the Upgrade to the Filament
v3fromv2, the UI was broken for the Overlook pluginv2.2in the Dashboard page.The older version
v1.3worked perfectly for meStory
I upgraded my Filament version in the project from
v2tov3. Along with that I upgraded all the other dependencies in the project.Expected behavior
The Cards are having smaller Heights.
Steps to reproduce
Reproduction repository
https://github.com/kingmaker-agm/stories-filament
Relevant log output
No response