ui update

README.md

@@ -50,7 +50,7 @@ class Post extends Model
 
 Et Voila! That's all you have to do to get started. Visit `/admin` to access the admin dashboard after logging in.
 
-![](Screenshot.png)
+![Screenshot](Screenshot.png)
 
 ## Configuration
 
@@ -61,6 +61,7 @@ Et Voila! That's all you have to do to get started. Visit `/admin` to access the
 - `api_prefix`: Change the prefix for api routes.
 - `middleware`: Global middleware for the admin routes. By default, the auth middleware is set.
 - `api_middleware`: Middleware group for api routes.
+- `layout`: You can customize the layout that the admin pages use by changing this option. Make sure that you yield appropriately to include dynamic contents.
 
 ### Model specific configuration
 

src/ModelResolver.php

@@ -96,7 +96,13 @@ public function resolveModel(string $table): string|null
     // get the models registered
     public function getModels(): array
     {
-        return array_filter($this->models, fn($model) => (new $model)->hasAdminPage !== false);
+        return array_filter(
+            $this->models,
+            function ($model) {
+                $instance = new $model;
+                return $instance->hasAdminPage !== false && $instance->adminCanAccessIndex();
+            }
+        );
     }
 
     // function to get column information from the table

src/config/config.php

@@ -9,5 +9,8 @@
     // middleware for the routes group
     'middleware' => ['auth'],
     // middleware for api routes group
-    'api_middleware' => ['auth']
+    'api_middleware' => ['auth'],
+
+    // layout to be used by all the views
+    'layout' => 'seamless::layout',
 ];

src/resources/assets/src/scss/_helper.scss

@@ -1,4 +1,4 @@
-$green: #20a056;
+$green: #4E9F3D;
 $grey: #444;
 $yellow: #e4cf1b;
 $red: #cc2626;
@@ -12,6 +12,19 @@ $border-radius: 6px;
     }
 }
 
+@mixin link-variant($color, $name) {
+    &.#{$name} {
+        background: transparent;
+        color: $color;
+        border-bottom: 1px solid transparent;
+        transition: border-bottom-color 150ms;
+        padding: 1px;
+        border-radius: 0;
+
+        &:hover { border-bottom-color: $color; }
+    }
+}
+
 .btn {
     font-size: 1rem;
     padding: 0.4em 0.8em;
@@ -37,7 +50,12 @@ $border-radius: 6px;
     @include variant($yellow, 'yellow', #333);
     @include variant($red, 'red');
 
-    &.small { font-size: 0.8rem; }
+    &.link {
+        @include link-variant(#615803, 'yellow');
+        @include link-variant($red, 'red');
+    }
+
+    &.small { font-size: 0.9rem; }
 }
 
 .input {
@@ -51,10 +69,11 @@ $border-radius: 6px;
 
 .table {
     width: 100%;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     text-align: left;
     border-radius: $border-radius;
     overflow: hidden;
+    white-space: nowrap;
 
     tr td {
         background: #f6f6f6;
@@ -67,7 +86,7 @@ $border-radius: 6px;
     thead tr th {
         font-weight: 900;
         color: #ffffff;
-        background: #27ae60;
+        background: $green;
     }
 
     th, td {

src/resources/assets/src/scss/_layout.scss

@@ -5,6 +5,7 @@ body {
 
     display: grid;
     grid-template-columns: 300px 1fr;
+    grid-template-rows: auto 1fr;
 }
 
 #main {
@@ -19,30 +20,46 @@ body {
     font-size: 14px;
 }
 
+#logo {
+    background: var(--seamless-sidebar-background);
+    color: var(--seamless-sidebar-color);
+    border-bottom: 1px solid var(--seamless-sidebar-color);
+}
+
 #sidebar {
     background: var(--seamless-sidebar-background);
     color: var(--seamless-sidebar-color);
     position: sticky;
     top: 0;
     overflow-y: auto;
 
-    ul a {
-        display: flex;
-        width: 100%;
-        padding: 0.65rem 1rem;
-        transition: background 250ms ease;
+    ul {
+        padding: 0.25rem 0;
 
-        &:hover {
-            background: rgba(0, 0, 0, .2);
-        }
+        li {
+            padding: 0 0.5rem;
 
-        &.active {
-            background: rgba(0, 0, 0, .4);
-        }
-    }
+            &.blank {
+                padding: 0.75rem 1rem;
+            }
+
+            a {
+                display: flex;
+                width: 100%;
+                padding: 0.5rem 1rem;
+                transition: background 250ms ease;
+                border-radius: 6px;
+                margin: 0.25rem 0;
 
-    ul li.blank {
-        padding: 0.75rem 1rem;
+                &:hover {
+                    background: rgba(255, 255, 255, .1);
+                }
+
+                &.active {
+                    background: rgba(255, 255, 255, .15);
+                }
+            }
+        }
     }
 }
 

src/resources/assets/src/scss/_variables.scss

@@ -1,5 +1,5 @@
 :root {
-    --seamless-sidebar-background: #333;
+    --seamless-sidebar-background: #191A19;
     --seamless-sidebar-color: #fff;
     --seamless-background: #f2f2f2;
     --seamless-color: #333;

src/resources/views/layout.blade.php

@@ -4,11 +4,15 @@
     @include('seamless::partials.header')
 </head>
 <body>
+    <div class="uppercase font-bold text-2xl p-4" id="logo">
+        <a href="{{ url('') }}">{{ config('app.name') }}</a>
+    </div>
+
+    @include('seamless::partials.navbar')
+
     @include('seamless::partials.sidebar')
 
     <main id="main">
-        @include('seamless::partials.navbar')
-
         @yield('content')
 
         @include('seamless::partials.footer')

src/resources/views/partials/navbar.blade.php

@@ -1,8 +1,4 @@
-<header class="container px-4 py-6 flex justify-between items-center">
-    <div class="uppercase font-bold text-2xl">
-        <a href="{{ url('') }}">{{ config('app.name') }}</a>
-    </div>
-
+<header class="container p-4 flex justify-end items-center">
     <div>
         Hey <span class="font-semibold">{{ auth()->user()->name ?? auth()->user()->username }}</span>!
     </div>

src/resources/views/partials/sidebar.blade.php

@@ -1,6 +1,6 @@
 @php
     $resolver = app('modelResolver');
-    $models = array_filter($resolver->getModels(), fn($model) => (new $model)->adminCanAccessIndex());
+    $models = $resolver->getModels();
     $routes = app('seamlessAdmin')->getRoutes();
 @endphp
 

src/resources/views/type/create.blade.php

@@ -1,6 +1,6 @@
 @php $name = class_basename($type); @endphp
 
-@extends('seamless::layout')
+@extends(config('seamless-admin.layout'))
 
 @section('title', "Create $name")
 
@@ -9,7 +9,7 @@
 @endsection
 
 @section('content')
-    <div class="container px-4 py-2" id="app">
+    <div class="container mx-auto px-4 py-2" id="app">
         <h2 class="text-2xl font-semibold">
             Create {{ $name }}
         </h2>

src/resources/views/type/delete.blade.php

@@ -1,11 +1,11 @@
 @php $name = str(class_basename($type))->plural(); @endphp
 
-@extends('seamless::layout')
+@extends(config('seamless-admin.layout'))
 
 @section('title', "Delete $name")
 
 @section('content')
-    <div class="container px-4 py-2" id="app">
+    <div class="container mx-auto px-4 py-2" id="app">
         <div class="flex justify-between items-center">
             <h2 class="text-2xl font-semibold">
                 Delete {{ $name }}

src/resources/views/type/edit.blade.php

@@ -1,6 +1,6 @@
 @php $name = class_basename($type); @endphp
 
-@extends('seamless::layout')
+@extends(config('seamless-admin.layout'))
 
 @section('title', "Edit $name")
 
@@ -9,7 +9,7 @@
 @endsection
 
 @section('content')
-    <div class="container px-4 py-2" id="app">
+    <div class="container mx-auto px-4 py-2" id="app">
         <h2 class="text-2xl font-semibold">
             Edit {{ $name }}
         </h2>

src/resources/views/type/index.blade.php

@@ -3,7 +3,7 @@
     $instance = new $type;
 @endphp
 
-@extends('seamless::layout')
+@extends(config('seamless-admin.layout'))
 
 @section('title', "Manage $name")
 
@@ -12,7 +12,7 @@
 @endsection
 
 @section('content')
-    <div class="container px-4 py-2" id="app">
+    <div class="container mx-auto px-4 py-2" id="app">
         <div class="flex justify-between items-center">
             <h2 class="text-2xl font-semibold">
                 Manage {{ $name }}
@@ -120,11 +120,11 @@ class="flex justify-between items-center sort {{ $fill ?? '' }}"
                         <td>{{ $row[$f] }}</td>
                     @endforeach
                     <td>
-                        <div class="flex gap-2">
+                        <div class="flex gap-3">
                             @if($instance->adminCanAccessEdit())
                                 <a
                                     href="{{ route('admin.type.edit', [request()->type, $row->getKey()]) }}"
-                                    class="btn yellow small"
+                                    class="btn yellow small link"
                                     v-on:click.stop
                                 >
                                     <i data-feather="edit"></i>
@@ -134,7 +134,7 @@ class="btn yellow small"
                             @if($instance->adminCanAccessDelete())
                                 <a
                                     href="{{ route('admin.type.delete', [request()->type, 'ids' => [$row->getKey()]]) }}"
-                                    class="btn red small"
+                                    class="btn red small link"
                                     v-on:click.stop
                                 >
                                     <i data-feather="trash-2"></i>

src/resources/views/type/show.blade.php

@@ -3,12 +3,12 @@
     $instance = new $type;
 @endphp
 
-@extends('seamless::layout')
+@extends(config('seamless-admin.layout'))
 
 @section('title', "$name")
 
 @section('content')
-    <div class="container px-4 py-2">
+    <div class="container mx-auto px-4 py-2">
         <h2 class="text-2xl font-semibold">
             {{ $name }}
         </h2>

src/resources/views/welcome.blade.php

@@ -1,4 +1,4 @@
-@extends('seamless::layout')
+@extends(config('seamless-admin.layout'))
 
 @section('content')
     <div class="text-center my-8">