Filament•14mo ago

Overlook-Plugin buggy?

Does anyone why my Overlook-Plugin implementation looks so glitchy? https://filamentphp.com/plugins/awcodes-overlook used this tutorial

Filament

Overlook by Adam Weston - Filament

An app overview widget for Filament panels.

13 Replies

awcodes•14mo ago

Because you didn’t follow the docs about using and including a custom theme. 🙂

Cench愛OP•14mo ago

I did, I guess..

Cench愛OP•14mo ago

awcodes•14mo ago

Well that’s part of it. You still have to include the views and styles in their perspective places.

Filament•14mo ago

Please read the #✅┊rules about how to format your code properly.

Cench愛OP•14mo ago

            ->plugins([
                OverlookPlugin::make()
                    ->sort(2)
                    ->columns([
                        'default' => 1,
                        'sm' => 2,
                        'md' => 3,
                        'lg' => 4,
                        'xl' => 5,
                        '2xl' => null,
                    ])
                    ->includes([
                        \App\Filament\Resources\GroupResource::class,
                        \App\Filament\Resources\PanelResource::class,
                    ]),
            ])
            ->widgets([
                Widgets\AccountWidget::class,
                //Widgets\FilamentInfoWidget::class,
                OverlookWidget::class,
            ])

            ->plugins([
                OverlookPlugin::make()
                    ->sort(2)
                    ->columns([
                        'default' => 1,
                        'sm' => 2,
                        'md' => 3,
                        'lg' => 4,
                        'xl' => 5,
                        '2xl' => null,
                    ])
                    ->includes([
                        \App\Filament\Resources\GroupResource::class,
                        \App\Filament\Resources\PanelResource::class,
                    ]),
            ])
            ->widgets([
                Widgets\AccountWidget::class,
                //Widgets\FilamentInfoWidget::class,
                OverlookWidget::class,
            ])

// tailwind.config.js
import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./node_modules/flowbite/**/*.js",
    "./vendor/awcodes/overlook/resources/**/*.blade.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('flowbite/plugin'),
      typography,
      forms,
      aspectRatio
  ],
}

// tailwind.config.js
import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./node_modules/flowbite/**/*.js",
    "./vendor/awcodes/overlook/resources/**/*.blade.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('flowbite/plugin'),
      typography,
      forms,
      aspectRatio
  ],
}

also got this.. so idk what else I could do

awcodes•14mo ago

And what’s in your theme.css

Cench愛OP•14mo ago

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

@import '/vendor/filament/filament/resources/css/theme.css';

@config 'tailwind.config.js';

awcodes•14mo ago

Also this is not the right tailwind config for v3 filament app.

Cench愛OP•14mo ago

// tailwind.config.js
import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  presets: [preset],
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./node_modules/flowbite/**/*.js",
    "./app/Filament/**/*.php",
    "./resources/views/filament/**/*.blade.php",
    "./vendor/awcodes/overlook/resources/**/*.blade.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('flowbite/plugin'),
      typography,
      forms,
      aspectRatio
  ],
}

// tailwind.config.js
import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';
import preset from './vendor/filament/support/tailwind.config.preset'

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'class',
  presets: [preset],
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
    "./node_modules/flowbite/**/*.js",
    "./app/Filament/**/*.php",
    "./resources/views/filament/**/*.blade.php",
    "./vendor/awcodes/overlook/resources/**/*.blade.php",
  ],
  theme: {
    extend: {},
  },
  plugins: [
      require('flowbite/plugin'),
      typography,
      forms,
      aspectRatio
  ],
}

now it is, I guess. Still the same in the dashboard

awcodes•14mo ago

This still doesn’t look right. Something is off in your setup. I promise it works fine. Sorry. I’m brain dead right now. Been working on achieving the impossible today. If your theme is setup right it works fine.

Cench愛OP•14mo ago

if I change something in theme.css, it applies... so how's it not setup right?

awcodes•14mo ago

Something you are doing is conflicting with what you’re expecting. If it was a problem in the plugin you wouldn’t be the only one having this issue. Sorry, not trying to be an asshole.

Gaming

Programming

Overlook-Plugin buggy?