Filament•4w ago

curator filament plugin view

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

46 Replies

toeknee•4w ago

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

raheel3031OP•4w ago

yes i have

toeknee•4w ago

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

raheel3031OP•4w 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•4w ago

Has it always done that? please provide the table code

raheel3031OP•4w ago

yes from the resource?

raheel3031OP•4w 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•4w ago

i have just installed it again, no result

awcodes•4w ago

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

raheel3031OP•4w ago

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

toeknee•4w ago

Why's it stupid....

awcodes•4w 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•4w 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•4w ago

It doesn’t exist until you run npm run build

raheel3031OP•4w ago

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

awcodes•4w ago

Then you need to install cropper.js too

raheel3031OP•4w ago

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

awcodes•4w ago

Something’s off then. Hard to say what.

raheel3031OP•4w 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•4w 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•4w ago

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

awcodes•4w ago

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

raheel3031OP•4w 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•4w 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•4w 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•4w ago

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

raheel3031OP•4w ago

what do you mean

awcodes•4w ago

../../../node_modules

raheel3031OP•4w ago

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

awcodes•4w ago

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

raheel3031OP•4w ago

look

raheel3031OP•4w ago

it is at the top

awcodes•4w 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•4w ago

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

awcodes•4w 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•4w ago

it doesnm't work here you have anydesk?

awcodes•4w 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•4w ago

npm install -D cropperjs this is not working

awcodes•4w ago

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

raheel3031OP•4w 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•4w ago

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

raheel3031OP•4w ago

but this is not working

awcodes•4w ago

have a meeting. back in a while

raheel3031OP•4w 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