Josh Comments - Answer Overflow

Josh

Posts Comments

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

Thanks 😊

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

🤦‍♂️ I think it’s good enough for now 😅

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Section::make()
                    ->columns(2)
                    ->schema([
                        Forms\Components\TextInput::make('name')
                            ->required()
                            ->maxLength(255),
                        Forms\Components\TextInput::make('email')
                            ->email()
                            ->required()
                            ->maxLength(255),
                        Forms\Components\DateTimePicker::make('email_verified_at'),
                        Forms\Components\TextInput::make('password')
                            ->password()
                            ->required()
                            ->maxLength(255),
                    ]),
            ]);
    }

public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Forms\Components\Section::make()
                    ->columns(2)
                    ->schema([
                        Forms\Components\TextInput::make('name')
                            ->required()
                            ->maxLength(255),
                        Forms\Components\TextInput::make('email')
                            ->email()
                            ->required()
                            ->maxLength(255),
                        Forms\Components\DateTimePicker::make('email_verified_at'),
                        Forms\Components\TextInput::make('password')
                            ->password()
                            ->required()
                            ->maxLength(255),
                    ]),
            ]);
    }

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

We can fix this fairly easily by wrapping the form in a Section

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

The User/Edit page, however, might be hard to read with the background

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

Here's the Users index page

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

Here's how it all looks now

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

This is looking pretty nice, however, I don't like the top bar being a solid color and the borders around the top bar look a bit inconsistent now as well. let's override that with a dark gray color with some transparency to let the the image come through, and apply some blur to the backdrop.

.fi-topbar nav {
  @apply !bg-slate-950/50 !ring-transparent !shadow-none backdrop-blur;
}

.fi-sidebar-header {
  @apply !bg-slate-950/50 !ring-transparent !shadow-none backdrop-blur;
}

.fi-topbar nav {
  @apply !bg-slate-950/50 !ring-transparent !shadow-none backdrop-blur;
}

.fi-sidebar-header {
  @apply !bg-slate-950/50 !ring-transparent !shadow-none backdrop-blur;
}

We had to override two classes, since the topbar and the sidebar have separate header classes. We also need to use ! to make our classes more important than the default styles in the case where those styles are already being defined.

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

The .fi-body seems like a good place to set a background image

.fi-body {
  @apply bg-center bg-cover relative -z-10;
  background-image: url('/admin/assets/images/bg.png');
}

.fi-body {
  @apply bg-center bg-cover relative -z-10;
  background-image: url('/admin/assets/images/bg.png');
}

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

Next let's add some styles to the classes that filament provides us as hooks to override the default styling.

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

First, let's get our custom fonts working, I've repeated this for all the font weights:

@font-face {
  font-family: 'Muli';
  src: url('/fonts/muli/Muli-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Muli';
  src: url('/fonts/muli/Muli-Regular.ttf') format('truetype');
  font-weight: 400;
}

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

I think we can really step this up a notch by adding a custom background. To do this we're going to need to extend the default theme's css with our own custom theme. Let's do that with php artisan make:filament-theme. Now we have a theme.css file that we can use to override some styles.

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

Thanks, I'll fix this soon

70 replies

FFilament

•Created by Josh on 1/15/2024 in #❓┊help

Implementing a replacement of existing admin panel with Filament (6+ year old active SaaS project)

70 replies

Gaming

Programming