Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(layouts): improve admin layout with stick navbar mobile #206

Merged
merged 2 commits into from
Dec 12, 2024
+45 −58
Merged

fix(layouts): improve admin layout with stick navbar mobile #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bc4061
fix(layout): admin-layout improve
CODEmartigarcia Dec 12, 2024
33f13ca
fix(layout): stick navbar mobile
CODEmartigarcia Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 18 additions & 33 deletions app/src/app/Layouts/Admin/AdminLayout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,16 @@

<body>
<!-- Navigation Bar -->
<div class="border-b-2 border-slate-300">
<div class="border-b border-gray">
<nav class="flex items-center justify-between px-4 py-4 h-16 max-w-7xl mx-auto">
<!-- Mobile Menu Button (Visible only on small screens) -->
<button id="menuButton"
class="group inline-flex w-12 h-12 text-slate-800 bg-white text-center items-center justify-center rounded transition md:hidden"
aria-pressed="false"
onclick="this.setAttribute('aria-pressed', !(this.getAttribute('aria-pressed') === 'true'))">
<span class="sr-only">Menu</span>
<svg class="w-6 h-6 fill-current pointer-events-none" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg">
<rect
class="origin-center -translate-y-[5px] translate-x-[7px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-[[aria-pressed=true]]:translate-x-0 group-[[aria-pressed=true]]:translate-y-0 group-[[aria-pressed=true]]:rotate-[315deg]"
y="7" width="9" height="2" rx="1"></rect>
<rect
class="origin-center transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.8)] group-[[aria-pressed=true]]:rotate-45"
y="7" width="16" height="2" rx="1"></rect>
<rect
class="origin-center translate-y-[5px] transition-all duration-300 ease-[cubic-bezier(.5,.85,.25,1.1)] group-[[aria-pressed=true]]:translate-y-0 group-[[aria-pressed=true]]:rotate-[135deg]"
y="7" width="9" height="2" rx="1"></rect>
</svg>
</button>

<!-- Logo -->
<a href="#">
<img class="md:block hidden w-48" src="/assets/images/logotip-horizontal.png" alt="Logo">
<img class="md:hidden block" src="/assets/images/isotip.png" alt="Logo">
</a>
<!-- Navigation Links (Visible only on large screens) -->
<div class="hidden md:flex gap-6 ml-20">
<div class="hidden md:flex gap-6">
<a href="/admin"
class="menu-link <?php echo (strpos($currentPath, '/admin') === 0 && strpos($currentPath, '/admin/inventory') === false) ? 'active' : ''; ?>">
Gestión
Expand Down Expand Up @@ -106,14 +88,17 @@
</div>
<!-- Submenu Section (Hidden by default on small screens, visible on medium and larger screens) -->
<?php if ($currentPath !== '/admin/inventory') { ?>
<div id="submenu" class="md:flex hidden justify-center items-center gap-6 p-6 border-b-2 md:border-b-0">
<div class="submenu flex space-x-6">
<div id="submenu"
class="md:flex overflow-x-auto justify-center items-center gap-6 p-6 shadow-md sm:shadow-none px-2 py-1 sm:py-4">
<!-- class="md:flex hidden overflow-x-auto whitespace-nowrap justify-start items-center gap-4 p-4 shadow-md sm:shadow-none px-2 py-1 sm:py-4"> -->

Check warning on line 93 in app/src/app/Layouts/Admin/AdminLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminLayout.php#L91-L93 

Added lines #L91 - L93 were not covered by tests

<div class="submenu text-center flex items-center space-x-6">

Check warning on line 95 in app/src/app/Layouts/Admin/AdminLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminLayout.php#L95 

Added line #L95 was not covered by tests
<!-- Contracts -->
<div class="submenu-item">
<a href="/admin/contracts"
class="link-primary <?php echo ($currentPath == '/admin/contracts') ? 'active' : ''; ?>">
<i class="fas fa-file-contract md:block"></i>
<span>Contratos</span>
<i class="fas fa-file-contract block"></i>
<span class="text-sm font-medium whitespace-nowrap">Contratos</span>
</a>
</div>

Expand All @@ -122,7 +107,7 @@
<a href="/admin/work-orders"
class="link-primary <?php echo ($currentPath == '/admin/work-orders') ? 'active' : ''; ?>">
<i class="fas fa-briefcase md:block"></i>
<span>Orden de Trabajo</span>
<span class="text-sm font-medium whitespace-nowrap">Orden de Trabajo</span>
</a>
</div>

Expand All @@ -131,7 +116,7 @@
<a href="/admin/zones"
class="link-primary <?php echo ($currentPath == '/admin/zones') ? 'active' : ''; ?>">
<i class="fas fa-map-marker-alt md:block"></i>
<span>Zonas</span>
<span class="text-sm font-medium whitespace-nowrap">Zonas</span>
</a>
</div>

Expand All @@ -140,7 +125,7 @@
<a href="/admin/elements"
class="link-primary <?php echo ($currentPath == '/admin/elements') ? 'active' : ''; ?>">
<i class="fas fa-cube md:block"></i>
<span>Elementos</span>
<span class="text-sm font-medium whitespace-nowrap">Elementos</span>
</a>
</div>

Expand All @@ -149,7 +134,7 @@
<a href="/admin/task-types"
class="link-primary <?php echo ($currentPath == '/admin/task-types') ? 'active' : ''; ?>">
<i class="fas fa-tasks md:block"></i>
<span>Tipo Tarea</span>
<span class="text-sm font-medium whitespace-nowrap">Tipo Tarea</span>
</a>
</div>

Expand All @@ -158,7 +143,7 @@
<a href="/admin/users"
class="link-primary <?php echo ($currentPath == '/admin/users') ? 'active' : ''; ?>">
<i class="fas fa-users md:block"></i>
<span>Usuarios</span>
<span class="text-sm font-medium whitespace-nowrap">Usuarios</span>
</a>
</div>

Expand All @@ -167,7 +152,7 @@
<a href="/admin/work-reports"
class="link-primary <?php echo ($currentPath == '/admin/work-reports') ? 'active' : ''; ?>">
<i class="fas fa-clipboard-list md:block"></i>
<span>Partes</span>
<span class="text-sm font-medium whitespace-nowrap">Partes</span>
</a>
</div>

Expand All @@ -176,7 +161,7 @@
<a href="/admin/stats"
class="link-primary <?php echo ($currentPath == '/admin/stats') ? 'active' : ''; ?>">
<i class="fas fa-chart-bar md:block"></i>
<span>Estadísticas</span>
<span class="text-sm font-medium whitespace-nowrap">Estadísticas</span>
</a>
</div>
</div>
Expand Down Expand Up @@ -213,4 +198,4 @@
</script>
</body>

</html>
</html>

Check warning on line 201 in app/src/app/Layouts/Admin/AdminLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminLayout.php#L201 

Added line #L201 was not covered by tests
23 changes: 13 additions & 10 deletions app/src/app/Views/Admin/Users.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,14 @@
<?php } ?>

<div class="mb-4 flex justify-end">
<a href="/user/create"
class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg shadow focus:outline-none focus:ring focus:ring-green-500">
<a href="/user/create" class="btn-create">

Check warning on line 15 in app/src/app/Views/Admin/Users.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/Users.php#L15 

Added line #L15 was not covered by tests
Create User
</a>
</div>

<div class="overflow-x-auto">
<table class="min-w-full table-fixed bg-white border border-gray-300 rounded-lg shadow-md">
<thead>
<div class="rounded-lg shadow-md overflow-hidden overflow-x-auto">
<table class="table-auto w-full text-sm text-left text-gray-700">
<thead class="bg-darkGray text-white uppercase">

Check warning on line 22 in app/src/app/Views/Admin/Users.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/Users.php#L20-L22 

Added lines #L20 - L22 were not covered by tests
<tr class="bg-gray-700 text-white text-left h-14">
<th class="px-4 py-3 border-b">ID</th>
<th class="px-4 py-3 border-b">Company</th>
Expand Down Expand Up @@ -56,21 +55,25 @@
<!-- Edit Button (Pencil Icon) -->
<a href="/user/<?php echo htmlspecialchars($user->getId()); ?>/edit"
class="text-blue-500 hover:text-blue-700" title="Edit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</a>
<!-- Delete Button (Trash Icon) -->
<a href="/user/<?php echo htmlspecialchars($user->getId()); ?>/delete"
onclick="return confirm('Are you sure you want to delete this user?');"
class="text-red-500 hover:text-red-700" title="Delete">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
</svg>
</a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>

Check warning on line 79 in app/src/app/Views/Admin/Users.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/Users.php#L79 

Added line #L79 was not covered by tests
23 changes: 11 additions & 12 deletions app/src/app/Views/Admin/WorkOrders.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<?php } ?>

<div class="mb-4 flex justify-end">
<a href="/admin/work-order/create"
<a href="/work-order/create"

Check warning on line 15 in app/src/app/Views/Admin/WorkOrders.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/WorkOrders.php#L15 

Added line #L15 was not covered by tests
class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg shadow focus:outline-none focus:ring focus:ring-green-500">
Create Work Order
</a>
Expand All @@ -21,15 +21,14 @@
<div class="rounded-lg shadow-md overflow-hidden overflow-x-auto">
<table class="table-auto w-full text-sm text-left text-gray-700">
<thead class="bg-darkGray text-white uppercase">
<tr class="bg-gray-700 text-white text-left h-14">
<th class="py-2 px-4 border-b">ID</th>
<th class="py-2 px-4 border-b">Contracte</th>
<th class="py-2 px-4 border-b">Data</th>
<th class="py-2 px-4 border-b">Zones</th>
<th class="py-2 px-4 border-b">Tasca</th>
<th class="py-2 px-4 border-b">Operaris</th>
<th class="py-2 px-4 border-b">Notes</th>
<th class="py-2 px-4 border-b">Accions</th>
<th class="py-2 px-4 border-b">ID</th>
<th class="py-2 px-4 border-b">Contracte</th>
<th class="py-2 px-4 border-b">Data</th>
<th class="py-2 px-4 border-b">Zones</th>
<th class="py-2 px-4 border-b">Tasca</th>
<th class="py-2 px-4 border-b">Operaris</th>
<th class="py-2 px-4 border-b">Notes</th>
<th class="py-2 px-4 border-b">Accions</th>

Check warning on line 31 in app/src/app/Views/Admin/WorkOrders.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/WorkOrders.php#L24-L31 

Added lines #L24 - L31 were not covered by tests
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -69,7 +68,7 @@

<td class="px-4 py-3 border-b text-center flex justify-center space-x-4">
<!-- Edit Button (Pencil Icon) -->
<a href="/admin/work-order/<?php echo htmlspecialchars($workOrder->getId()); ?>/edit"
<a href="/user/<?php echo htmlspecialchars($workOrder->getId()); ?>/edit"

Check warning on line 71 in app/src/app/Views/Admin/WorkOrders.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/WorkOrders.php#L71 

Added line #L71 was not covered by tests
class="text-blue-500 hover:text-blue-700" title="Edit">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-5 h-5">
Expand All @@ -78,7 +77,7 @@
</svg>
</a>
<!-- Delete Button (Trash Icon) -->
<a href="/admin/work-order/<?php echo htmlspecialchars($workOrder->getId()); ?>/delete"
<a href="/work-order/<?php echo htmlspecialchars($workOrder->getId()); ?>/delete"

Check warning on line 80 in app/src/app/Views/Admin/WorkOrders.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/WorkOrders.php#L80 

Added line #L80 was not covered by tests
onclick="return confirm('Are you sure you want to delete this work order?');"
class="text-red-500 hover:text-red-700" title="Delete">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
Expand Down
6 changes: 3 additions & 3 deletions app/src/public/assets/js/tailwind.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ tailwind.config = {
colors: {
darkGreen: "#008037",
lightGreen: "#7FD959",
gray: "#717171",
gray: "#919191",
darkGray: "#444444",
black: "#222222",
hoverBlack: "#000000",
Expand Down Expand Up @@ -40,7 +40,7 @@ tailwind.config = {
},

".link-primary": {
"@apply text-sm tracking-wide font-medium text-gray font-sans hover:text-darkGray transition-colors relative":
"@apply text-sm tracking-tighter lg:tracking-widest font-medium text-gray font-sans hover:text-darkGray transition-colors relative":
{},
"&.active": {
"@apply text-darkGray font-bold": {},
Expand All @@ -62,7 +62,7 @@ tailwind.config = {
{},
},
".submenu-item": {
"@apply py-2 flex flex-col md:items-center md:text-center":
"@apply py-2 flex flex-col items-center text-center gap-1":
{},
},
".btn-create": {
Expand Down
Loading