Merge pull request #22 from seiyanz16/main

Enhance Responsive Design & Group Permissions in Form

Author: akechi17

app/Http/Controllers/RoleController.php

@@ -99,7 +99,17 @@ public function search(Request $request)
     public function create()
     {
         $permissions = Permission::all();
-        return view('roles.create', compact('permissions'));
+        $groupedPermissions = [];
+
+        foreach ($permissions as $permission) {
+            $parts = explode('-', $permission->name);
+
+            if (count($parts)) {
+                $group = $parts[0];
+                $groupedPermissions[$group][] = $permission;
+            }
+        }
+        return view('roles.create', compact('groupedPermissions'));
     }
 
     /**
@@ -156,8 +166,19 @@ public function edit($id)
         $role = Role::find($id);
         $permissions = Permission::all();
 
+        $groupedPermissions = [];
+
+        foreach ($permissions as $permission) {
+            $parts = explode('-', $permission->name);
+
+            if (count($parts)) {
+                $group = $parts[0];
+                $groupedPermissions[$group][] = $permission;
+            }
+        }
+
         return $role
-        ? view('roles.edit', compact('role', 'permissions'))
+        ? view('roles.edit', compact('role', 'groupedPermissions'))
         : redirect()->route('roles.index')->with('error', 'Role tidak ditemukan');
     }
 

resources/css/auth/signin.scss

@@ -25,31 +25,42 @@
             #00f0c5 100%
         );
         height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
 
         h1 {
             font-weight: 700;
-            margin-bottom: 50px;
+            margin-bottom: 30px;
         }
     }
 
     .side-left {
         background-color: white;
         height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 20px;
 
         img {
-            margin-bottom: 50px;
-            width: 200px;
+            margin-bottom: 30px;
+            width: 150px;
         }
 
         h1 {
             color: #0161a7;
             font-weight: 700;
+            font-size: 2rem;
         }
 
         p {
             color: #2697d8;
             font-weight: 600;
-            font-size: large;
+            font-size: 1.2rem;
         }
 
         span {
@@ -63,7 +74,13 @@
         position: relative;
         font-weight: 500;
         font-size: large;
-        width: 450px;
+        width: 100%;
+        max-width: 450px;
+        margin-bottom: 20px;
+    }
+
+    #show {
+        display: none;
     }
 
     .input {
@@ -73,18 +90,7 @@
         border-bottom: 2px solid white;
         outline: none;
         color: white;
-    }
-
-    #email {
-        margin-bottom: 50px;
-    }
-
-    #password {
-        margin-bottom: 30px;
-    }
-
-    #show {
-        display: none;
+        width: 100%;
     }
 
     .submit {
@@ -97,6 +103,8 @@
         margin: 20px 0;
         text-align: center;
         font-weight: 700;
+        width: 100%;
+        cursor: pointer;
     }
 
     .submit:hover {
@@ -112,7 +120,6 @@
         align-items: center;
 
         a {
-            float: right;
             color: white;
             text-decoration: none;
         }
@@ -150,79 +157,71 @@
     }
 }
 
-// @media screen and (max-width: 450px) {
-//     .side-left {
-//         h1 {
-//             font-size: 26px;
-//         }
-
-//         p {
-//             font-size: 13px;
-//         }
-//     }
-// }
-
-// @media screen and (max-width: 550px) {
-//     .side-left {
-//         height: 30vh;
-//         margin-top: 10px;
-
-//         img {
-//             margin-bottom: 10px;
-//             width: 100px;
-//         }
-
-//         h1 {
-//             font-size: 28px;
-//         }
-
-//         p {
-//             font-size: 14px;
-//         }
-//     }
-
-//     .side-right {
-//         height: 70vh;
-
-//         h1 {
-//             margin-bottom: 40px;
-//         }
-//     }
-
-//     .input-field {
-//         width: 350px;
-//         font-size: medium;
-//     }
-
-//     #login-page #email {
-//         margin-bottom: 30px;
-//     }
-
-//     #login-page #password {
-//         margin-bottom: 15px;
-//     }
-// }
-
-// @media screen and (max-width: 767px){
-//     .side-left {
-//         height: 30vh;
-
-//         img {
-//             margin-bottom: 10px;
-//             width: 100px;
-//         }
-//     }
-
-//     .side-right {
-//         height: 70vh;
-
-//         h1 {
-//             margin-bottom: 40px;
-//         }
-//     }
-
-//     .input-field {
-//         width: 500px;
-//     }
-
-// }
+@media screen and (max-width: 767px) {
+    .side-left {
+        height: 40vh;
+
+        img {
+            margin-bottom: 20px;
+            width: 120px;
+        }
+
+        h1 {
+            font-size: 1.8rem;
+        }
+
+        p {
+            font-size: 1rem;
+        }
+    }
+
+    .side-right {
+        height: 60vh;
+        padding: 20px;
+
+        h1 {
+            margin-bottom: 20px;
+            font-size: 1.8rem;
+        }
+    }
+
+    .input-field {
+        max-width: 350px;
+        font-size: medium;
+    }
+
+    .submit {
+        margin: 15px 0;
+    }
+}
+
+@media screen and (max-width: 450px) {
+    .side-left {
+        height: 30vh;
+
+        img {
+            margin-bottom: 10px;
+            width: 100px;
+        }
+
+        h1 {
+            font-size: 1.5rem;
+        }
+
+        p {
+            font-size: 0.9rem;
+        }
+    }
+
+    .side-right {
+        height: 70vh;
+
+        h1 {
+            font-size: 1.5rem;
+        }
+    }
+
+    .input-field {
+        max-width: 300px;
+    }
+}

resources/css/form/checkbox.scss

@@ -1,19 +1,34 @@
 .form-input {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1em;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5em; 
 
-    .form-check {
+    .permission-group {
         display: flex;
-        align-items: center;
-        margin-bottom: 0;
-
-        .form-check-input {
-            margin-top: 0 !important;
+        flex-direction: column;
+        
+        h5 {
+            font-size: 12px;
+            margin-bottom: 10px;
         }
 
-        .form-check-label {
+        .form-check {
+            display: flex;
+            align-items: center;
             margin-bottom: 0;
+
+            .form-check-input {
+                margin-top: 0 !important;
+            }
+
+            .form-check-label {
+                margin-bottom: 0;
+                font-size: 14px;
+            }
         }
     }
+
+    @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+    }
 }

resources/css/form/form.scss

@@ -21,3 +21,17 @@ form.form-data {
         }
     }
 }
+
+
+@media screen and (max-width: 767px) {
+    form.form-data {
+        width: 100%;
+        padding: 2em 1em;
+        margin: 1em auto 0;
+
+        .footer {
+            flex-direction: column;
+            row-gap: 3px;
+        }
+    }
+}

resources/css/form/radio.scss

@@ -1,6 +1,42 @@
 .input-radio {
+    margin-bottom: 1.5rem;
+
+    .form-label {
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+        display: block;
+    }
+
     .form-input {
         display: flex;
-        column-gap: 1em;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+
+    .form-check {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .form-check-input {
+        margin: 0;
+    }
+
+    .form-check-label {
+        margin: 0;
     }
 }
+
+@media screen and (max-width: 768px) {
+    .input-radio {
+        .form-input {
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .form-check {
+            width: 100%;
+        }
+    }
+}