update css + footer

HE-Arc · Nov 15, 2024 · fc29d42 · fc29d42
1 parent 279c6cb
commit fc29d42
Show file tree

Hide file tree

Showing 11 changed files with 265 additions and 109 deletions.
diff --git a/app/Http/Controllers/PokemonController.php b/app/Http/Controllers/PokemonController.php
@@ -12,41 +12,41 @@ public function index(Request $request): \Illuminate\Contracts\View\View|\Illumi
     {
         $query = Pokemon::query();
 
-        if (isset($request->namefilter) && !empty($request->namefilter)) {
-            $query->where('name', 'LIKE', '%' . $request->namefilter . '%');
+        if (!empty($request->name)) {
+            $query->where('name', 'LIKE', '%' . $request->name . '%');
         }
 
-        if (isset($request->type1filter) && !empty($request->type1filter) && isset($request->type2filter) && !empty($request->type2filter)) {
-            if ($request->type2filter == "None") {
+        if (!empty($request->type1) && !empty($request->type2)) {
+            if ($request->type2 == "None") {
                 $query->where(function ($q) use ($request) {
-                    $q->where('type1_id', $request->type1filter)
+                    $q->where('type1_id', $request->type1)
                         ->whereNull('type2_id');
                 });
             } else {
                 $query->where(function ($q) use ($request) {
                     $q->where(function ($q2) use ($request) {
-                        $q2->where('type1_id', $request->type1filter)
-                            ->where('type2_id', $request->type2filter);
+                        $q2->where('type1_id', $request->type1)
+                            ->where('type2_id', $request->type2);
                     })->orWhere(function ($q2) use ($request) {
-                        $q2->where('type1_id', $request->type2filter)
-                            ->where('type2_id', $request->type1filter);
+                        $q2->where('type1_id', $request->type2)
+                            ->where('type2_id', $request->type1);
                     });
                 });
             }
         } else {
-            if (isset($request->type1filter) && !empty($request->type1filter)) {
+            if (!empty($request->type1filter)) {
                 $query->where(function ($q) use ($request) {
-                    $q->where('type1_id', $request->type1filter)
-                        ->orWhere('type2_id', $request->type1filter);
+                    $q->where('type1_id', $request->type1)
+                        ->orWhere('type2_id', $request->type1);
                 });
             }
-            if (isset($request->type2filter) && !empty($request->type2filter)) {
-                if ($request->type2filter == "None") {
+            if (!empty($request->type2)) {
+                if ($request->type2 == "None") {
                     $query->where('type2_id', null);
                 } else {
                     $query->where(function ($q) use ($request) {
-                        $q->where('type2_id', $request->type2filter)
-                            ->orWhere('type1_id', $request->type2filter);
+                        $q->where('type2_id', $request->type2)
+                            ->orWhere('type1_id', $request->type2);
                     });
                 }
             }

diff --git a/app/Http/Requests/RegisterRequest.php b/app/Http/Requests/RegisterRequest.php
@@ -22,7 +22,7 @@ public function authorize(): bool
     public function rules(): array
     {
         return [
-            'name' => 'required|string|max:50',
+            'name' => 'required|string|max:30',
             'email' => 'required|email|unique:users,email',
             'password' => 'required|min:8|confirmed',
         ];

diff --git a/app/Http/Requests/TeamRequest.php b/app/Http/Requests/TeamRequest.php
@@ -14,7 +14,7 @@ public function authorize(): bool
     public function rules(): array
     {
         return [
-            'name' => 'required|min:5|max:255',
+            'name' => 'required|min:5|max:40',
             'selected_pokemons.*' => 'exists:pokemons,id',
         ];
     }
@@ -24,7 +24,7 @@ public function messages(): array
         return [
             'name.required' => 'The team name is required!',
             'name.min' => 'The team name must be at least 5 characters!',
-            'name.max' => 'The team name may not be greater than 30 characters!',
+            'name.max' => 'The team name may not be greater than 40 characters!',
             'selected_pokemons.max' => 'You can only select up to 6 Pokémon for a team!',
             'selected_pokemons.*.exists' => 'Some of the selected Pokemon are not valid.',
         ];

diff --git a/resources/css/app.css b/resources/css/app.css
@@ -12,3 +12,106 @@
     flex-shrink: 0;
 }
 
+.btn-primary {
+    background-color: #3B4CCA;
+    border-color: #2A3E90;
+    color: #FFF;
+    border-radius: 5px;
+}
+.btn-primary:hover {
+    background-color: #2A3E90;
+    border-color: #1F2E68;
+    color: #FFF;
+}
+.btn-primary:focus, .btn-primary:active {
+    background-color: #1F2E68;
+    border-color: #162052;
+    color: #FFF;
+}
+
+.btn-info {
+    background-color: #78C850;
+    border-color: #5E9640;
+    color: #FFF;
+    border-radius: 5px;
+}
+.btn-info:hover {
+    background-color: #5E9640;
+    border-color: #467235;
+    color: #FFF;
+}
+.btn-info:focus, .btn-info:active {
+    background-color: #467235;
+    border-color: #365527;
+    color: #FFF;
+}
+
+.btn-danger {
+    background-color: #D23B3B;
+    border-color: #A32D2D;
+    color: #FFF;
+    border-radius: 5px;
+}
+.btn-danger:hover {
+    background-color: #A32D2D;
+    border-color: #7A2323;
+    color: #FFF;
+}
+.btn-danger:focus, .btn-danger:active {
+    background-color: #7A2323;
+    border-color: #5A1A1A;
+    color: #FFF;
+}
+
+.btn-warning {
+    background-color: #E2C32A;
+    border-color: #B59D20;
+    color: #FFF;
+    border-radius: 5px;
+}
+.btn-warning:hover {
+    background-color: #B59D20;
+    border-color: #8E7919;
+    color: #FFF;
+}
+.btn-warning:focus, .btn-warning:active {
+    background-color: #8E7919;
+    border-color: #6A5E13;
+    color: #FFF;
+}
+
+.btn-success {
+    background-color: #6890F0;
+    border-color: #5270C0;
+    color: #FFF;
+    border-radius: 5px;
+}
+.btn-success:hover {
+    background-color: #5270C0;
+    border-color: #3E558F;
+    color: #FFF;
+}
+.btn-success:focus, .btn-success:active {
+    background-color: #3E558F;
+    border-color: #2D406B;
+    color: #FFF;
+}
+
+.btn-secondary {
+    background-color: #A8A878;
+    border-color: #7D7D5C;
+    color: #FFF;
+    border-radius: 5px;
+}
+.btn-secondary:hover {
+    background-color: #7D7D5C;
+    border-color: #5C5C45;
+    color: #FFF;
+}
+.btn-secondary:focus, .btn-secondary:active {
+    background-color: #5C5C45;
+    border-color: #454534;
+    color: #FFF;
+}
+
+
diff --git a/resources/js/initializePokemonSelection.js b/resources/js/initializePokemonSelection.js
@@ -26,7 +26,7 @@ export function initializePokemonSelection(slotSelector, addPokemonBtnSelector,
 
     function updateCardVisuals() {
         document.querySelectorAll('.pokemon-card').forEach(card => {
-            card.classList.remove('selected-green', 'selected-blue');
+            card.classList.remove('selected-green', 'selected-yellow');
             const pokemonId = card.querySelector('.add-pokemon-btn').dataset.pokemonId;
             const addButton = card.querySelector('.add-pokemon-btn');
 
@@ -48,7 +48,7 @@ export function initializePokemonSelection(slotSelector, addPokemonBtnSelector,
     }
 
     function updateCardIfSelectedOnAnotherSlot(card, addButton) {
-        card.classList.add('selected-blue');
+        card.classList.add('selected-yellow');
         addButton.classList.remove('btn-danger');
         addButton.classList.add('btn-success');
         addButton.innerHTML = '<i class="bi bi-plus"></i>';

diff --git a/resources/views/layout/app.blade.php b/resources/views/layout/app.blade.php
@@ -13,49 +13,49 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>
-<body>
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="{{ route('home') }}">PokeTeams</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarNav">
-            <ul class="navbar-nav mr-auto">
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ route('pokemons.index') }}">Pokemons</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="{{ route('teams.index') }}">Teams</a>
-                </li>
-            </ul>
-            <div class="navbar-nav ms-auto d-flex align-items-center">
-                @auth
-                    <span class="navbar-text text-white d-none d-lg-block me-3">{{ \Illuminate\Support\Facades\Auth::user()->name }}</span>
-                    <form class="d-inline d-none d-lg-block" action="{{ route('logout') }}" method="post">
-                        @method("delete")
-                        @csrf
-                        <button class="btn btn-outline-danger btn-sm">Logout</button>
-                    </form>
-                    <div class="d-lg-none navbar-text text-white me-3">
-                        {{ \Illuminate\Support\Facades\Auth::user()->name }}
-                    </div>
-                    <form class="d-inline d-lg-none" action="{{ route('logout') }}" method="post">
-                        @method("delete")
-                        @csrf
-                        <button class="btn btn-outline-danger btn-sm">Logout</button>
-                    </form>
-                @endauth
-                @guest
-                    <a class="btn btn-outline-primary btn-sm ms-3" href="{{ route('login') }}">Sign in</a>
-                    <a class="btn btn-outline-success btn-sm ms-3" href="{{ route('register') }}">Sign up</a>
-                @endguest
+<body class="d-flex flex-column min-vh-100">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="{{ route('home') }}">PokeTeams</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav mr-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ route('pokemons.index') }}">Pokemons</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ route('teams.index') }}">Teams</a>
+                    </li>
+                </ul>
+                <div class="navbar-nav ms-auto d-flex align-items-center">
+                    @auth
+                        <span class="navbar-text text-white d-none d-lg-block me-3">{{ \Illuminate\Support\Facades\Auth::user()->name }}</span>
+                        <form class="d-inline d-none d-lg-block" action="{{ route('logout') }}" method="post">
+                            @method("delete")
+                            @csrf
+                            <button class="btn btn-outline-danger btn-sm">Logout</button>
+                        </form>
+                        <div class="d-lg-none navbar-text text-white me-3">
+                            {{ \Illuminate\Support\Facades\Auth::user()->name }}
+                        </div>
+                        <form class="d-inline d-lg-none" action="{{ route('logout') }}" method="post">
+                            @method("delete")
+                            @csrf
+                            <button class="btn btn-outline-danger btn-sm">Logout</button>
+                        </form>
+                    @endauth
+                    @guest
+                        <a class="btn btn-outline-primary btn-sm ms-3" href="{{ route('login') }}">Sign in</a>
+                        <a class="btn btn-outline-success btn-sm ms-3" href="{{ route('register') }}">Sign up</a>
+                    @endguest
+                </div>
             </div>
         </div>
-    </div>
-</nav>
+    </nav>
 
-<div class="container mt-3">
+<div class="container mt-3 flex-grow-1">
     @if ($message = Session::get('success'))
         <div class="alert alert-success">
             <p>{{ $message }}</p>
@@ -71,10 +71,24 @@
     @yield('content')
 </div>
 
+    <footer class="bg-dark text-white text-center text-lg-start mt-4 py-3">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6 mb-3 mb-md-0">
+                    <h5>PokeTeams</h5>
+                </div>
+            </div>
+            <div class="text-center py-3">
+                &copy; {{ date('Y') }} PokeTeams. All rights reserved.
+            </div>
+        </div>
+    </footer>
+</body>
+
+
 <!-- Bootstrap JS -->
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-</body>
 </html>
diff --git a/resources/views/partials/pokemon-modal.blade.php b/resources/views/partials/pokemon-modal.blade.php
@@ -17,7 +17,7 @@
                                         data-bs-dismiss="modal">
                                     <i class="bi bi-plus"></i>
                                 </button>
-                                <a href="{{ route('pokemons.show', $pokemon) }}" target="_blank" class="btn btn-secondary">
+                                <a href="{{ route('pokemons.show', $pokemon) }}" target="_blank" class="btn btn-info">
                                     <i class="bi bi-eye"></i>
                                 </a>
                             </div>
@@ -33,16 +33,12 @@
     .pokemon-card {
         cursor: default;
     }
-    .pokemon-card.selected-blue {
-        background-color: #007bff;
-        color: white;
+    .pokemon-card.selected-yellow {
+        background-color: #f3dd81;
+        color: black;
     }
     .pokemon-card.selected-green {
         background-color: #28a745;
         color: white;
     }
-    .btn-remove {
-        background-color: #dc3545;
-        color: white;
-    }
 </style>