F
Filament•17mo ago
Cench愛

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.
No description
13 Replies
awcodes
awcodes•17mo ago
Because you didn’t follow the docs about using and including a custom theme. 🙂
Cench愛
Cench愛OP•17mo ago
I did, I guess..
Cench愛
Cench愛OP•17mo ago
No description
No description
awcodes
awcodes•17mo ago
Well that’s part of it. You still have to include the views and styles in their perspective places.
Filament
Filament•17mo ago
Please read the #✅┊rules about how to format your code properly.
Cench愛
Cench愛OP•17mo 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
awcodes•17mo ago
And what’s in your theme.css
Cench愛
Cench愛OP•17mo 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
awcodes•17mo ago
Also this is not the right tailwind config for v3 filament app.
Cench愛
Cench愛OP•17mo 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
awcodes•17mo 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愛
Cench愛OP•17mo ago
if I change something in theme.css, it applies... so how's it not setup right?
awcodes
awcodes•17mo 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.

Did you find this page helpful?