responsive design

app/Http/Controllers/HomeController.php

@@ -1,36 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use App\Models\Manga;
-use App\Models\User;
-use Illuminate\Http\Request;
-
-class HomeController extends Controller
-{
-    /**
-     * Create a new controller instance.
-     *
-     * @return void
-     */
-    public function __construct()
-    {
-        $this->middleware(['auth', 'admin.access']);
-    }
-
-    /**
-     * Show the application dashboard.
-     *
-     * @return \Illuminate\Contracts\Support\Renderable
-     */
-    public function index()
-    {
-        $authors = User::where('role', 'author')->get();
-        $users = User::where('role', 'user')->get();
-        $mangas = Manga::all();
-        // dd($authors);
-        return view('home', ['authors' => $authors, 'users'=> $users, 'mangas' => $mangas]);
-    }
-
-
-}

app/Http/Controllers/MangaChapterController.php

@@ -26,8 +26,7 @@ class MangaChapterController extends Controller
     public function manga(Manga $manga)
     {
         $chapters = $manga->chapters()
-        ->latest('chapter_no')
-        ->paginate(10);
+        ->paginate(40);
         $hotMangas = Manga::with(['chapters'])
         ->latest('id')->limit('3')->get();
         return view('manga',[

app/Http/Controllers/MangaController.php

@@ -18,13 +18,10 @@ class MangaController extends Controller
      */
     public function index()
     {
-        $mangas = Manga::when(auth()->user()->role != 'admin', function ($q) {
-            $user_id = auth()->id();
-            $q->where('author_id', $user_id);
-        })
-            ->latest('id')
-            ->paginate(10)
-            ->withQueryString();
+        $mangas = Manga::latest('id')
+        ->paginate(20)
+        ->withQueryString();
+        // dd($mangas);
         return view('manga.index', compact('mangas'));
     }
 

app/Http/Controllers/PageController.php

@@ -2,6 +2,8 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\User;
+use App\Models\Manga;
 use Illuminate\Http\Request;
 
 class PageController extends Controller
@@ -9,7 +11,7 @@ class PageController extends Controller
     public function redirect() {
         $role = auth()->user()->role;
         if($role != 'user') {
-            return redirect()->route('home')->with(['message' => 'Welcome to Admin Dashboard!']);
+            return redirect()->route('dashboard')->with(['message' => 'Welcome to Admin Dashboard!']);
         }else {
             return redirect()->route('page.index')->with(['message' => 'Welcome to MangaDex!']);
         }
@@ -18,4 +20,19 @@ class PageController extends Controller
     {
         return view('contact');
     }
+
+    public function dashboard()
+    {
+        $authors = User::where('role', 'author')->get();
+        $users = User::where('role', 'user')->get();
+        $mangas = Manga::all();
+        return view('dashboard', 
+        [
+            'authors' => $authors,
+            'users'=> $users,
+            'mangas' => $mangas,
+        ]);
+    }
+
+    
 }

app/Models/Chapter.php

@@ -22,4 +22,8 @@ class Chapter extends Model
     public function comments() {
         return $this->hasMany(Comment::class, 'chapter_id');
     }
+
+    public function user() {
+        return $this->belongsTo(User::class, 'user_id');
+    }
 }

app/Models/Manga.php

@@ -26,6 +26,7 @@ class Manga extends Model
     // {
     //     return $this->chapters()->one()->latestOfMany();
     // }
+    
     public function lastChap()
     {
         return $this->chapters()->one()->ofMany('chapter_no', 'max');

app/Policies/ChapterPolicy.php

@@ -45,7 +45,7 @@ class ChapterPolicy
      */
     public function update(User $user, Chapter $chapter): bool
     {
-        //
+        return $chapter->user()->is($user);
     }
 
     /**
@@ -53,7 +53,7 @@ class ChapterPolicy
      */
     public function delete(User $user, Chapter $chapter): bool
     {
-        return $user->id == $chapter->user_id;
+        return $this->update($user, $chapter);
     }
 
     /**

app/Policies/CommentPolicy.php

@@ -47,7 +47,7 @@ class CommentPolicy
      */
     public function update(User $user, Comment $comment): bool
     {
-        return $comment->user_id === $user->id;
+        return $comment->user()->is($user);
     }
 
     /**
@@ -55,7 +55,7 @@ class CommentPolicy
      */
     public function delete(User $user, Comment $comment): bool
     {
-        return $comment->user_id === $user->id || $user->role === 'admin';
+        return $this->update($user, $comment) || $user->role === 'admin';
     }
 
     /**

app/Policies/MangaPolicy.php

@@ -23,7 +23,7 @@ class MangaPolicy
 
     public function viewAny(User $user, Manga $manga): bool
     {
-        // return $user->id == $manga->author_id;
+        //
     }
 
     /**
@@ -31,7 +31,7 @@ class MangaPolicy
      */
     public function view(User $user, Manga $manga): bool
     {
-        return $user->id == $manga->author_id;
+        return true;
     }
 
     /**
@@ -47,7 +47,7 @@ class MangaPolicy
      */
     public function update(User $user, Manga $manga): bool
     {
-        return $user->id == $manga->author_id;
+        return $manga->user()->is($user);
     }
 
     /**
@@ -55,7 +55,7 @@ class MangaPolicy
      */
     public function delete(User $user, Manga $manga): bool
     {
-        return $user->id == $manga->author_id;
+        return $this->update($user, $manga);
     }
 
     /**

resources/js/app.js

@@ -1,10 +1,6 @@
 import './bootstrap';
 
-// let selectChapter = document.querySelector('#selectChapter');
-// selectChapter.addEventListener('change', function() {
-//     this.submit();
-// });
-
-
 import "./edit-box";
 import "./reply-box";
+
+

resources/js/side-bar.js

@@ -0,0 +1,11 @@
+const sideBar = document.getElementById('sideBar')
+const sideBarBtn = document.getElementById('sideBarBtn')
+
+sideBarBtn.addEventListener('click', () => {
+    sideBar.classList.toggle('d-none')
+    if(sideBar.classList.contains('d-none')) {
+        sideBarBtn.innerHTML = `<i class="bi bi-list h5"></i>`
+    }else {
+        sideBarBtn.innerHTML = `<i class="bi bi-x h5"></i>`
+    }
+})

resources/views/chapter/manageChapter.blade.php

@@ -8,21 +8,21 @@
     <h3> {{ $manga->title }} </h3>
     <hr>
     <div class="d-flex mb-4">
-        <h5> Manage Your Chapters </h5> <a href="{{route('chapter.create',['manga_id' => $manga->id])}}" title="Add New Chapter" class="btn btn-sm btn-outline-dark ms-2 rounded-circle"> <i class="bi bi-plus"></i> </a>
+        <h5> Manage Your Chapters </h5> <a href="{{ route('chapter.create', ['manga_id' => $manga->id]) }}"
+            title="Add New Chapter" class="btn btn-sm btn-outline-dark ms-2 rounded-circle"> <i class="bi bi-plus"></i> </a>
     </div>
 
-    <div class="row">
+    <div class="d-flex">
         @foreach ($manga->chapters()->orderBy('chapter_no', 'desc')->paginate(20) as $chapter)
-            <div class="col-2">
-                <div class="d-flex p-2 border border-1 border-dark rounded align-items-center justify-content-between mb-3">
-                    <p class="small mb-0"> Chapter {{ $chapter->chapter_no }} </p>
-                    <div class="btn-group">
-                        <form method="POST" action="{{ route('chapter.destroy', $chapter->id) }}">
-                            @csrf
-                            @method('delete')
-                            <button onclick="return confirm('Do you want to delete this?')" class="btn btn-outline-dark btn-sm"> <i class="bi bi-trash"></i> </button>
-                        </form>
-                    </div>
+            <div class="d-flex p-2 border border-1 border-dark rounded align-items-center justify-content-between mb-3 me-2">
+                <p class="small mb-0"> Chapter {{ $chapter->chapter_no }} </p>
+                <div class="btn-group ms-2">
+                    <form method="POST" action="{{ route('chapter.destroy', $chapter->id) }}">
+                        @csrf
+                        @method('delete')
+                        <button onclick="return confirm('Do you want to delete this?')" class="btn btn-outline-dark btn-sm">
+                            <i class="bi bi-trash"></i> </button>
+                    </form>
                 </div>
             </div>
         @endforeach

resources/views/components/footer.blade.php

@@ -1,3 +1,3 @@
-<div class="bg-dark py-5 mt-5">
+<div class="bg-dark py-4 mt-auto">
     <p class="text-center fw-bold text-white">Copyright All Served @MangaDex</p>
 </div>

resources/views/components/inner-manga.blade.php

@@ -1,5 +1,5 @@
 @props(['manga', 'chapters'])
-<div>
+<div class="mb-3 pb-4">
     <h5 class="fw-semibold my-3 text-primary"> <i class="bi bi-award-fill"></i> {{ $manga->title }}</h5>
 
     <div class="row my-3">
@@ -13,12 +13,13 @@
             <p>
                 <span class="fw-semibold">Genre</span> -
                 @foreach ($manga->genres as $genre)
-                    <span class="text-primary"> {{$genre->name}} </span> /
+                    <span class="text-primary"> {{ $genre->name }} </span> /
                 @endforeach
             </p>
             <p class="d-flex">
-                <a href="{{ route('page.chapter', [$manga, $manga->firstChap]) }}" class="btn btn-primary me-1">Read First</a>
-            <a href="{{ route('page.chapter', [$manga, $manga->lastChap]) }}" class="btn btn-primary">Read Last</a>
+                <a href="{{ route('page.chapter', [$manga, $manga->firstChap]) }}" class="btn btn-primary me-1">Read
+                    First</a>
+                <a href="{{ route('page.chapter', [$manga, $manga->lastChap]) }}" class="btn btn-primary">Read Last</a>
             </p>
         </div>
     </div>
@@ -34,18 +35,30 @@
             <i class="bi bi-award-fill"></i> Latest Chapter Release
         </h5>
 
-        @forelse ($chapters as $chapter)
-            <a href="{{ route('page.chapter', [$manga, $chapter]) }}"
-                class="list-group-item list-group-item-action pb-0 border-0 border-bottom
-                     d-inline-block d-flex align-items-center justify-content-between">
-                <p> Chapter {{ $chapter->chapter_no }} - {{ $chapter->title ?? '' }} </p>
-                <p class="text-black-50 small">
-                    {{ $chapter->updated_at->diffForHumans() }}
-                </p>
-            </a>
-        @empty
-            <p class="text-danger">No Chapter Yet!</p>
-        @endforelse
+        <div class="row flex-row px-3">
+            @forelse ($chapters as $chapter)
+                <div class="card px-3 pt-2 col-5 col-md-3 my-3 me-4">
+                    <a href="{{ route('page.chapter', [$manga, $chapter]) }}" class="text-decoration-none text-black">
+                        <p class="mb-1">
+                            <span class="fw-semibold text-primary">
+                                Chapter {{ $chapter->chapter_no }}
+                            </span>
+                            <span class="ms-2 small text-secondary fst-italic">
+                                {{ $chapter->updated_at->diffForHumans() }}
+                            </span>
+                        </p>
+                        <p class="small">
+                            <span>
+                                {{ $chapter->title ?? $chapter->title }}
+                            </span>
+
+                        </p>
+                    </a>
+                </div>
+            @empty
+                <p class="text-danger">No Chapter Yet!</p>
+            @endforelse
+        </div>
     </ul>
     {{ $chapters->links() }}
 </div>

resources/views/components/manga-list.blade.php

@@ -18,9 +18,9 @@
             </tr>
         </thead>
         <tbody>
-            @forelse ($mangas as $manga)
+            @forelse ($mangas as $key => $manga)
                 <tr>
-                    <th scope="row"> {{ $manga->id }} </th>
+                    <th scope="row"> {{ $key + 1 }} </th>
                     <td>
                         <p class="mb-0">{{ $manga->title }}</p>
                         <span class="small text-black-50">{{ $manga->excerpt }}</span>

resources/views/layouts/app.blade.php

@@ -15,10 +15,10 @@
     <link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
 
     <!-- Scripts -->
-    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
+    @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/side-bar.js'])
 </head>
 
-<body>
+<body class="min-vh-100 d-flex flex-column">
     <div id="app">
         <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
             <div class="container">
@@ -79,10 +79,11 @@
 
         <div class="container">
             <main class="py-4 row">
-                <div class="col-2">
+                <div class="col-12 col-lg-3 d-flex align-items-start">
                     @include('partials.side-bar')
                 </div>
-                <div class="col-10">
+                <hr class="d-block d-lg-none my-3">
+                <div class="col-12 col-lg-9 mt-4 mt-lg-0">
                     @yield('content')
                 </div>
             </main>

resources/views/layouts/dashboard.blade.php

@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>{{ config('app.name', 'MangaDex') }}</title>
-
-    <!-- Css -->
-    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
-</head>
-
-<body>
-    @include('partials.nav')
-    <div class="container">
-        <div class="row">
-            <!-- sidebar Here -->
-            <div class="col-3">
-
-            </div>
-
-            <!-- Content Here -->
-            <div class="main col-9">
-                @yield('content')
-            </div>
-        </div>
-    </div>
-
-
-
-</body>
-
-</html>

resources/views/manga.blade.php

@@ -5,11 +5,11 @@
     @include('partials.manga-breadcrum')
 
     <div class="row mt-5">
-        <div class="col-12 col-md-9">
+        <div class="col-12 col-lg-9">
             <x-inner-manga :manga="$manga" :chapters="$chapters" />
         </div>
 
-        <div class="col-12 col-md-3">
+        <div class="col-12 col-lg-3">
             @include('partials.hot-manga')
         </div>
     </div>

resources/views/partials/nav.blade.php

@@ -8,42 +8,38 @@
         </button>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                {{-- <li class="nav-item">
-                    <a class="nav-link" href="{{route('contact')}}">CONTACT US</a>
-                </li> --}}
-
-            </ul>
             <!-- search box -->
-            <form class="d-flex" role="search" method="GET" action="{{ route('page.index') }}">
+            <form class="d-flex ms-auto" role="search" method="GET" action="{{ route('page.index') }}">
                 <div class="input-group">
                     <input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
                     <button class="btn btn-dark" type="submit"> <i class="bi bi-search"></i> </button>
                 </div>
             </form>
-        </div>
 
-        <!--profile and logout -->
-        @auth
-            <div class="btn btn-outline-dark dropdown ms-3">
-                <a id="navbarDropdown" class="nav-link dropdown-toggle" role="button"
-                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
-                    <i class="bi bi-person-circle"></i> {{ Auth::user()->name }}
-                </a>
-
-                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
-                    <a class="dropdown-item" href="{{ route('logout') }}"
-                        onclick="event.preventDefault();
-                                 document.getElementById('logout-form').submit();">
-                        {{ __('Logout') }}
+            <!--profile and logout -->
+            @auth
+                <div class="btn btn-outline-dark dropdown ms-lg-3 mt-3 mt-lg-0">
+                    <a id="navbarDropdown" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false" v-pre>
+                        <i class="bi bi-person-circle"></i> {{ Auth::user()->name }}
                     </a>
 
-                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
-                        @csrf
-                    </form>
+                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" href="{{ route('logout') }}"
+                            onclick="event.preventDefault();
+                             document.getElementById('logout-form').submit();">
+                            {{ __('Logout') }}
+                        </a>
+
+                        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
+                            @csrf
+                        </form>
+                    </div>
                 </div>
-            </div>
-        @endauth
+            @endauth
+        </div>
+
+
 
 
     </div>

resources/views/partials/patreon-nav.blade.php

@@ -15,7 +15,7 @@
 
         @auth
             @can('dashboard')
-                <a href="{{ route('home') }}" class="btn btn-sm btn-dark rounded-pill"> <i class="bi bi-speedometer"></i> Go To
+                <a href="{{ route('dashboard') }}" class="btn btn-sm btn-dark rounded-pill"> <i class="bi bi-speedometer"></i> Go To
                     Dashboard</a>
             @endcan
         @endauth

resources/views/partials/side-bar.blade.php

@@ -1,9 +1,10 @@
-<ul class="list-group">
+<ul class="list-group d-none d-lg-block w-75 w-lg-100 me-3" id="sideBar">
     <h5>
-        <a href="{{ route('home') }}" class="list-group-item list-group-item-action text-primary">
+        <a href="{{ route('dashboard') }}" class="list-group-item list-group-item-action text-primary">
             <i class="bi bi-speedometer2"></i> Dashboard
         </a>
     </h5>
+
     <h5>Manga</h5>
     <a href="{{ route('manga.index') }}" class="list-group-item list-group-item-action">
         <i class="bi bi-book"></i> Manga List
@@ -34,3 +35,7 @@
         </a>
     @endcan
 </ul>
+
+<button id="sideBarBtn" class="btn btn-outline-dark d-block d-lg-none">
+    <i class="bi bi-list h4"></i>
+</button>

routes/web.php

@@ -42,17 +42,16 @@ Route::resource('replies', ReplyController::class)->middleware('auth');
 //auth
 Auth::routes();
 
-//home
-Route::get('/home', [HomeController::class, 'index'])
-    ->name('home');
 
 //admin dashboard
 Route::middleware(['auth', 'admin.access'])->group(function () {
+    Route::get('/dashboard', [PageController::class, 'dashboard'])
+        ->name('dashboard');
+
     Route::resource('manga', MangaController::class);
 
     Route::resource('chapter', ChapterController::class);
-    Route::get('/chapters/manage/{manga:slug}', [ChapterController::class, 'manage'])
-        ->name('chapters.manage');
+    Route::get('/chapters/manage/{manga:slug}', [ChapterController::class, 'manage'])->name('chapters.manage');
 
     Route::get('/users-list', [UserController::class, 'index'])->name('users.list')->middleware('can:admin-only');