Add filament backgrounds styles for simple layout and main components
- Introduced CSS styles for .fi-simple-layout and .fi-simple-main classes. - Implemented background image, gradient overlays, and responsive design features. - Added support for dark mode and backdrop filters to enhance visual aesthetics.
This commit is contained in:
Yoga Pangestu
parent
28ec50494d
commit
fdda62b2a5
@ -21,11 +21,27 @@
|
||||
use Illuminate\Routing\Middleware\SubstituteBindings;
|
||||
use Illuminate\Session\Middleware\StartSession;
|
||||
use Illuminate\View\Middleware\ShareErrorsFromSession;
|
||||
use Swis\Filament\Backgrounds\FilamentBackgroundsPlugin;
|
||||
use Swis\Filament\Backgrounds\ImageProviders\MyImages;
|
||||
|
||||
class DashboardPanelProvider extends PanelProvider
|
||||
{
|
||||
public function panel(Panel $panel): Panel
|
||||
{
|
||||
$directoryAuthBg = 'auth-bg';
|
||||
$fullPath = storage_path("app/public/{$directoryAuthBg}");
|
||||
|
||||
if (! is_dir($fullPath)) {
|
||||
mkdir($fullPath, 0777, true);
|
||||
}
|
||||
|
||||
$files = glob($fullPath.'/*');
|
||||
if (! $files || count($files) === 0) {
|
||||
$defaultImage = public_path('assets/img/bg/default.jpg');
|
||||
$targetImage = $fullPath.'/default.png';
|
||||
copy($defaultImage, $targetImage);
|
||||
}
|
||||
|
||||
return $panel
|
||||
->default()
|
||||
->id('dashboard')
|
||||
@ -61,6 +77,12 @@ public function panel(Panel $panel): Panel
|
||||
FilamentShieldPlugin::make()
|
||||
->navigationSort(10)
|
||||
->globallySearchable(false),
|
||||
|
||||
FilamentBackgroundsPlugin::make()
|
||||
->imageProvider(
|
||||
MyImages::make()
|
||||
->directory('storage/'.$directoryAuthBg)
|
||||
),
|
||||
])
|
||||
->authMiddleware([
|
||||
Authenticate::class,
|
||||
|
||||
@ -10,7 +10,8 @@
|
||||
"bezhansalleh/filament-shield": "^4.0",
|
||||
"filament/filament": "^4.0",
|
||||
"laravel/framework": "^12.0",
|
||||
"laravel/tinker": "^2.10.1"
|
||||
"laravel/tinker": "^2.10.1",
|
||||
"swisnl/filament-backgrounds": "^2.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"fakerphp/faker": "^1.23",
|
||||
|
||||
78
composer.lock
generated
78
composer.lock
generated
@ -4,7 +4,7 @@
|
||||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "aa7873cd5d15f6140efb985c4ea9d50d",
|
||||
"content-hash": "c554ed46d8227040d3699d0f225bff90",
|
||||
"packages": [
|
||||
{
|
||||
"name": "anourvalar/eloquent-serialize",
|
||||
@ -5526,6 +5526,82 @@
|
||||
],
|
||||
"time": "2025-02-21T14:16:57+00:00"
|
||||
},
|
||||
{
|
||||
"name": "swisnl/filament-backgrounds",
|
||||
"version": "2.0.1",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/swisnl/filament-backgrounds.git",
|
||||
"reference": "08e2917a440243bb8eade4aea5ee7ea225137d10"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/swisnl/filament-backgrounds/zipball/08e2917a440243bb8eade4aea5ee7ea225137d10",
|
||||
"reference": "08e2917a440243bb8eade4aea5ee7ea225137d10",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"filament/filament": "^4.0",
|
||||
"illuminate/contracts": "^11.0|^12.0",
|
||||
"php": "^8.2",
|
||||
"spatie/laravel-package-tools": "^1.15.0"
|
||||
},
|
||||
"require-dev": {
|
||||
"larastan/larastan": "^2.9|^3.0",
|
||||
"laravel/pint": "^1.13",
|
||||
"nunomaduro/collision": "^7.10|^8.1",
|
||||
"orchestra/testbench": "^8.15|^9.0|^10.0",
|
||||
"pestphp/pest": "^2.25|^3.7",
|
||||
"pestphp/pest-plugin-arch": "^2.4|^3.0",
|
||||
"pestphp/pest-plugin-laravel": "^2.2|^3.1",
|
||||
"phpstan/extension-installer": "^1.4",
|
||||
"phpstan/phpstan-deprecation-rules": "^1.2|^2.0",
|
||||
"phpstan/phpstan-phpunit": "^1.4|^2.0"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Swis\\Filament\\Backgrounds\\FilamentBackgroundsServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Swis\\Filament\\Backgrounds\\": "src/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Jasper Zonneveld",
|
||||
"email": "jasper@swis.nl",
|
||||
"role": "Developer"
|
||||
}
|
||||
],
|
||||
"description": "Beautiful backgrounds for Filament auth pages",
|
||||
"homepage": "https://github.com/swisnl/filament-backgrounds",
|
||||
"keywords": [
|
||||
"backgrounds",
|
||||
"filament",
|
||||
"laravel",
|
||||
"swisnl"
|
||||
],
|
||||
"support": {
|
||||
"issues": "https://github.com/swisnl/filament-backgrounds/issues",
|
||||
"source": "https://github.com/swisnl/filament-backgrounds"
|
||||
},
|
||||
"funding": [
|
||||
{
|
||||
"url": "https://github.com/swisnl",
|
||||
"type": "github"
|
||||
}
|
||||
],
|
||||
"time": "2025-11-12T08:04:10+00:00"
|
||||
},
|
||||
{
|
||||
"name": "symfony/clock",
|
||||
"version": "v7.3.0",
|
||||
|
||||
BIN
public/assets/img/bg/default.jpg
Normal file
BIN
public/assets/img/bg/default.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
@ -0,0 +1 @@
|
||||
.fi-simple-layout{background-image:var(--filament-backgrounds-image);background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative;z-index:0}.fi-simple-layout:before{background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 25%) no-repeat;background-size:cover;content:var(--filament-backgrounds-attribution-backdrop);height:100%;left:0;position:fixed;top:0;width:100%}.fi-simple-layout:after{bottom:2rem;color:#fff;content:var(--filament-backgrounds-attribution);left:2rem;position:absolute;text-shadow:0 0 3px #000}.fi-simple-main{--tw-ring-color:transparent;background-color:hsla(0,0%,100%,.8);position:relative}@supports (color:color-mix(in lab,red,red)){.fi-simple-main{background-color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.fi-simple-main:where(.dark,.dark *){background-color:rgba(24,24,27,.9)}@supports (color:color-mix(in lab,red,red)){.fi-simple-main:where(.dark,.dark *){background-color:color-mix(in oklab,var(--gray-900) 90%,transparent)}}.fi-simple-main:before{backdrop-filter:blur(3px);border-radius:inherit;content:"";inset:0;position:absolute;z-index:-1}
|
||||
Loading…
Reference in New Issue
Block a user