Filament•2mo ago

curator filament plugin view

why is the view like this? everything is out of place.

46 Replies

toeknee•2mo ago

have you run npm run build? php artisan filament:upgrade?

raheel3031OP•2mo ago

yes i have

toeknee•2mo ago

So what is the problem exactly looks like an overflow issue with the image

raheel3031OP•2mo ago

the grid view in the table is not like it should be. and when adding media the images and styling is out of place

toeknee•2mo ago

Has it always done that? please provide the table code

raheel3031OP•2mo ago

yes from the resource?

raheel3031OP•2mo ago

public static function make(): static
    {
        return parent::make()
            ->label('Media')
            ->pluralLabel('Media')
            ->navigationIcon('heroicon-o-photo')
            ->navigationGroup('Content')
            ->navigationSort(3)
            ->navigationCountBadge()
            ->registerNavigation(true)
            ->defaultListView('grid' || 'list');
    }

public static function make(): static
    {
        return parent::make()
            ->label('Media')
            ->pluralLabel('Media')
            ->navigationIcon('heroicon-o-photo')
            ->navigationGroup('Content')
            ->navigationSort(3)
            ->navigationCountBadge()
            ->registerNavigation(true)
            ->defaultListView('grid' || 'list');
    }

message.txt

raheel3031OP•2mo ago

i have just installed it again, no result

awcodes•2mo ago

You missed the instructions about adding the plugin’s styles and views. It’s the second step in the installation instruction.

raheel3031OP•2mo ago

i have to create a custom theme to do this how stupid

toeknee•2mo ago

Why's it stupid....

awcodes•2mo ago

There's actually a very good reason for it. It's just the nature of how Tailwind works. https://filamentphp.com/docs/3.x/support/assets#using-tailwind-css-in-plugins

Assets - Core Concepts - Filament

raheel3031OP•2mo ago

Unable to locate fi le in Vite manifest: resources/css/filament/admin/theme.css. i am getting this error now i am sorry

awcodes•2mo ago

It doesn’t exist until you run npm run build

raheel3031OP•2mo ago

It gives an error then for cropper.js I have added the right path in app.css

awcodes•2mo ago

Then you need to install cropper.js too

raheel3031OP•2mo ago

I did that too I followed the instructions from curator Step by step

awcodes•2mo ago

Something’s off then. Hard to say what.

raheel3031OP•2mo ago

I will share what I did @import '/vendor/filament/filament/resources/css/theme.css'; @import '/node-modules/cropperjs/dist/cropper.css'; @import '/vendor>awcodes/filament-curator/resources/css/plugin.css'; this i have added error during build: [vite:css] [postcss] ENOENT: no such file or directory, open 'C:\node-modules\cropperjs\dist\cropper.css' error during build: [vite:css] [postcss] ENOENT: no such file or directory, open 'C:\node-modules\cropperjs\dist\cropper.css' file: C:\xampp\htdocs\nextxlfabricator\resources\css\filament\admin\theme.css:undefined:NaN at async open (node:internal/fs/promises:639:25) at async Object.readFile (node:internal/fs/promises:1242:14) at async Object.load (file:///C:/xampp/htdocs/nextxlfabricator/node_modules/vite/dist/node/chunks/dep-Cyk9bIUq.js:36826:25) at async loadImportContent (file:///C:/xampp/htdocs/nextxlfabricator/node_modules/vite/dist/node/chunks/dep-Bs_uPLzU.js:844:19) at async Promise.all (index 0) at async resolveImportId (file:///C:/xampp/htdocs/nextxlfabricator/node_modules/vite/dist/node/chunks/dep-Bs_uPLzU.js:800:27) at async parseStyles$1 (file:///C:/xampp/htdocs/nextxlfabricator/node_modules/vite/dist/node/chunks/dep-Bs_uPLzU.js:708:5) at async Object.Once (file:///C:/xampp/htdocs/nextxlfabricator/node_modules/vite/dist/node/chunks/dep-Bs_uPLzU.js:965:22) at async LazyResult.runAsync (C:\xampp\htdocs\nextxlfabricator\node_modules\postcss\lib\lazy-result.js:261:11) at async compileCSS (file:///C:/xampp/htdocs/nextxlfabricator/node_modules/vite/dist/node/chunks/dep-Cyk9bIUq.js:36889:21)

awcodes•2mo ago

you're paths are off. they should be relative to the location of the stylesheet at least that's what it looks like to me

raheel3031OP•2mo ago

this is what documentation says the path should refer to i am following the documentation

awcodes•2mo ago

the docs say '<path-to-node-modules>',

raheel3031OP•2mo ago

@import '/vendor/filament/filament/resources/css/theme.css'; @import '/node-modules/cropperjs/dist/cropper.css'; @import '/vendor>awcodes/filament-curator/resources/css/plugin.css';

awcodes•2mo ago

you have to provide that yourself. the plugin / theme has no way of knowing exactly how your app is set up what is the path of your filament theme css file?

raheel3031OP•2mo ago

this 'resources/css/filament/admin/theme.css', in vite.config.js import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; export default defineConfig({ plugins: [ laravel({ input: [ 'resources/css/app.css', 'resources/css/filament/admin/theme.css', 'resources/js/app.js', ], refresh: true, }), ], });

awcodes•2mo ago

Ok, so you need to traverse up the directories with your import

raheel3031OP•2mo ago

what do you mean

awcodes•2mo ago

../../../node_modules

raheel3031OP•2mo ago

no still not working i have basic setup. i i didn't change folders or anything

awcodes•2mo ago

You have to get the number of ../ right Don’t just copy paste

raheel3031OP•2mo ago

look

raheel3031OP•2mo ago

it is at the top

awcodes•2mo ago

But your stylesheet and tailwind config aren’t. That’s why you have to be explicit the error you shared says it's look for node modules at the root of your drive, not the root of the app

raheel3031OP•2mo ago

yes in c which paths are we talking about in theme.css only?

awcodes•2mo ago

this works in my app.

@import '../../../vendor/awcodes/filament-curator/resources/css/plugin.css';

@import '../../../vendor/awcodes/filament-curator/resources/css/plugin.css';

with the filament:theme artisan command

raheel3031OP•2mo ago

it doesnm't work here you have anydesk?

awcodes•2mo ago

did you install cropperjs globally? or in the app

@import '../../../node_modules/cropperjs/dist/cropper.css';
@import '../../../vendor/awcodes/filament-curator/resources/css/plugin.css';

@import '../../../node_modules/cropperjs/dist/cropper.css';
@import '../../../vendor/awcodes/filament-curator/resources/css/plugin.css';

raheel3031OP•2mo ago

npm install -D cropperjs this is not working

awcodes•2mo ago

right but in the terminal were you actually in the app directory?

raheel3031OP•2mo ago

not working here yes in the app C:\xampp\htdocs\nextxlfabricator>npm install -D cropperjs owwww i see i haveto install it in c

awcodes•2mo ago

no, you need to change the path in your import statement

raheel3031OP•2mo ago

but this is not working

awcodes•2mo ago

have a meeting. back in a while

raheel3031OP•2mo ago

ok this was fine and now it is working @import '/vendor/filament/filament/resources/css/theme.css'; @import '/node_modules/cropperjs/dist/cropper.css'; @import '/vendor/awcodes/filament-curator/resources/css/plugin.css'; really strange

Gaming

Programming

curator filament plugin view