Skip to content

Commit

Permalink
fix(layout):improveme UI elements for mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@CODEmartigarcia
CODEmartigarcia committed Dec 17, 2024
1 parent b262e0c commit 05bfffa
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 83 deletions.
95 changes: 63 additions & 32 deletions app/src/app/Layouts/Admin/AdminInventoryLayout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,84 +14,115 @@
<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/tailwind.js"></script>
<script src="https://kit.fontawesome.com/f80b94bd90.js" crossorigin="anonymous"></script>
<script src="https://cdn.lordicon.com/lordicon.js"></script>

</head>

<body>
<!-- Navigation Bar -->
<div class="border-b border-gray">
<nav class="flex items-center justify-between px-4 py-4 h-16 max-w-7xl mx-auto">
<div class="border-b border-softGray">
<nav class="flex items-center px-2 py-4 h-16 max-w-7xl mx-auto justify-between">

<!-- Logo -->
<a href="#">
<a href="#" class="md:basis-1/3 basis-1/5 flex justify-start">
<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">
<img class="md:hidden block w-12" src="/assets/images/resized-isotip.png" alt="Logo">
</a>
<!-- Navigation Links (Visible only on large screens) -->
<div class="hidden md:flex gap-6">

<div class="flex md:flex gap-3 md:gap-6 basis-0 flex-grow justify-center">
<a href="/admin"
class="menu-link <?= (strpos($currentPath, '/admin') === 0 && strpos($currentPath, '/admin/inventory') === false) ? 'active' : ''; ?>">
class="menu-link text-sm sm:text-lg align-middle <?= (strpos($currentPath, '/admin') === 0 && strpos($currentPath, '/admin/inventory') === false) ? 'active' : ''; ?>">

Check warning on line 34 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminInventoryLayout.php#L34 

Added line #L34 was not covered by tests
Gestión
</a>
<a href="/admin/inventory"
class="menu-link <?= ($currentPath === '/admin/inventory') ? 'active' : ''; ?>">
class="menu-link text-sm sm:text-lg align-middle <?= ($currentPath === '/admin/inventory') ? 'active' : ''; ?>">

Check warning on line 38 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminInventoryLayout.php#L38 

Added line #L38 was not covered by tests
Inventario
</a>
</div>


<!-- User Section -->
<div class="flex items-center gap-4 mx-2">
<div class="flex items-center gap-4 mx-2 basis-1/3 justify-end">
<!-- User Info Dropdown -->
<div class="relative inline-block text-left">
<button onclick="toggleSubmenu()"
class="flex items-center gap-2 bg-white px-3 py-2 text-sm text-gray-900 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
Contratos
<svg class="-mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
<span class="hidden sm:block">Contratos</span>
<svg class="hidden sm:block -mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
<lord-icon class="block sm:hidden" src="https://cdn.lordicon.com/vdjwmfqs.json" trigger="hover"
colors="primary:#747474" style="width:22px;height:22px">
</lord-icon>
</button>
</div>

<!-- Notifications Icon -->
<a href="#" class="hidden md:block text-gray-700 hover:text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
</svg>
<lord-icon src="https://cdn.lordicon.com/vspbqszr.json" trigger="hover" state="loop-bell"
colors="primary:#747474" style="width:28px;height:28px">
</lord-icon>
</a>

<!-- User Avatar -->
<div class="relative flex items-center gap-2 cursor-pointer"
onclick="profileDropdown.classList.toggle('hidden')">
<img class="h-10 rounded-full" src="/assets/images/avatar.png" alt="User Avatar">
<img class="h-10 rounded-full" style="width: 25px; height: 25px" src="/assets/images/avatar.png"
alt="User Avatar">
<div class="hidden md:block text-sm relative">
<span
class="block text-gray-700"><?= $_SESSION['user']['name'] . ' ' . $_SESSION['user']['surname']; ?></span>
<span class="block text-gray-500">
<?= User::role_name($_SESSION['user']['role']); ?>
</span>
<div id="profile-dropdown"
class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800"
role="menuitem" tabindex="-1" id="menu-item-0">Configuración de la cuenta</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
id="menu-item-1">Soporte</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
id="menu-item-2">Licencia</a>
<a href="/logout" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800"
role="menuitem" tabindex="-1" id="menu-item-3">Cerrar sesión</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>


<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">
<div class="submenu text-center flex items-center justify-center space-x-6 w-full">
<div class="submenu-item">
<a href="/admin/contracts"
class="link-primary <?= ($currentPath == '/admin/contracts') ? 'active' : ''; ?>">

Check warning on line 92 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminInventoryLayout.php#L87-L92 

Added lines #L87 - L92 were not covered by tests
<i class="fas fa-file-contract block"></i>
<span class="text-sm font-medium whitespace-nowrap">Contratos</span>
</a>
</div>

<div class="submenu-item">
<a href="/admin/zones" class="link-primary <?= ($currentPath == '/admin/zones') ? 'active' : ''; ?>">

Check warning on line 99 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminInventoryLayout.php#L99 

Added line #L99 was not covered by tests
<i class="fas fa-map-marker-alt md:block"></i>
<span class="text-sm font-medium whitespace-nowrap">Zonas</span>
</a>
</div>

<div class="submenu-item">
<a href="/admin/elements"
class="link-primary <?= ($currentPath == '/admin/elements') ? 'active' : ''; ?>">

Check warning on line 107 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Layouts/Admin/AdminInventoryLayout.php#L107 

Added line #L107 was not covered by tests
<i class="fas fa-cube md:block"></i>
<span class="text-sm font-medium whitespace-nowrap">Elementos</span>
</a>
</div>
</div>
</div>

</div>










<!-- Main Content -->
<div class="max-w-7xl mx-auto px-6">
<?php if (Session::has('success')): ?>
Expand Down
63 changes: 29 additions & 34 deletions app/src/app/Layouts/Admin/AdminLayout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,74 +14,69 @@
<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/tailwind.js"></script>
<script src="https://kit.fontawesome.com/f80b94bd90.js" crossorigin="anonymous"></script>
<script src="https://cdn.lordicon.com/lordicon.js"></script>

</head>

<body>
<!-- Navigation Bar -->
<div class="border-b border-gray">
<nav class="flex items-center justify-between px-4 py-4 h-16 max-w-7xl mx-auto">
<div class="border-b border-softGray">
<nav class="flex items-center px-2 py-4 h-16 max-w-7xl mx-auto justify-between">

<!-- Logo -->
<a href="#">
<a href="#" class="md:basis-1/3 basis-1/5 flex justify-start">
<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">
<img class="md:hidden block w-12" src="/assets/images/resized-isotip.png" alt="Logo">
</a>
<!-- Navigation Links (Visible only on large screens) -->
<div class="hidden md:flex gap-6">

<div class="flex md:flex gap-3 md:gap-6 basis-0 flex-grow justify-center">
<a href="/admin"
class="menu-link <?= (strpos($currentPath, '/admin') === 0 && strpos($currentPath, '/admin/inventory') === false) ? 'active' : ''; ?>">
class="menu-link text-sm sm:text-lg align-middle <?= (strpos($currentPath, '/admin') === 0 && strpos($currentPath, '/admin/inventory') === false) ? 'active' : ''; ?>">

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

View check run for this annotation

Codecov / codecov/patch

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

Added line #L34 was not covered by tests
Gestión
</a>
<a href="/admin/inventory"
class="menu-link <?= ($currentPath === '/admin/inventory') ? 'active' : ''; ?>">
class="menu-link text-sm sm:text-lg align-middle <?= ($currentPath === '/admin/inventory') ? 'active' : ''; ?>">

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

View check run for this annotation

Codecov / codecov/patch

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

Added line #L38 was not covered by tests
Inventario
</a>
</div>


<div class="flex items-center gap-4 mx-2">
<!-- User Section -->
<div class="flex items-center gap-4 mx-2 basis-1/3 justify-end">
<!-- User Info Dropdown -->
<div class="relative inline-block text-left">
<button onclick="toggleSubmenu()"
class="flex items-center gap-2 bg-white px-3 py-2 text-sm text-gray-900 rounded-md shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
Contratos
<svg class="-mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
<span class="hidden sm:block">Contratos</span>
<svg class="hidden sm:block -mr-1 size-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
<lord-icon class="block sm:hidden" src="https://cdn.lordicon.com/vdjwmfqs.json" trigger="hover"
colors="primary:#747474" style="width:22px;height:22px">
</lord-icon>
</button>
</div>
<button class="hidden md:block text-gray-700 hover:text-blue-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0" />
</svg>
</button>

<!-- Notifications Icon -->
<a href="#" class="hidden md:block text-gray-700 hover:text-blue-600">
<lord-icon src="https://cdn.lordicon.com/vspbqszr.json" trigger="hover" state="loop-bell"
colors="primary:#747474" style="width:28px;height:28px">
</lord-icon>
</a>

<!-- User Avatar -->
<div class="relative flex items-center gap-2 cursor-pointer"
onclick="profileDropdown.classList.toggle('hidden')">
<img class="h-10 rounded-full" src="/assets/images/avatar.png" alt="User Avatar">
<img class="h-10 rounded-full" style="width: 25px; height: 25px" src="/assets/images/avatar.png"
alt="User Avatar">
<div class="hidden md:block text-sm relative">
<span
class="block text-gray-700"><?= $_SESSION['user']['name'] . ' ' . $_SESSION['user']['surname']; ?></span>
<span class="block text-gray-500">
<?= User::role_name($_SESSION['user']['role']); ?>
</span>
<div id="profile-dropdown"
class="hidden absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none"
role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800"
role="menuitem" tabindex="-1" id="menu-item-0">Configuración de la cuenta</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
id="menu-item-1">Soporte</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
id="menu-item-2">Licencia</a>
<a href="/logout" class="block px-4 py-2 text-sm text-gray-700 hover:text-gray-800"
role="menuitem" tabindex="-1" id="menu-item-3">Cerrar sesión</a>
</div>
</div>
</div>
</div>
</div>
Expand Down
9 changes: 5 additions & 4 deletions app/src/app/Views/Admin/Contracts.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,10 @@
</tr>
</thead>
<tbody>
<?php foreach ($contracts as $contract) { ?>
<tr class="border-b hover:bg-gray-50">
<?php foreach ($contracts as $index => $contract) {
$isLast = $index === count($contracts) - 1;

Check warning on line 23 in app/src/app/Views/Admin/Contracts.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/Contracts.php#L22-L23 

Added lines #L22 - L23 were not covered by tests
?>
<tr class="border-b <?= $isLast ? '' : 'hover:bg-gray-50'; ?>">

Check warning on line 25 in app/src/app/Views/Admin/Contracts.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/Contracts.php#L25 

Added line #L25 was not covered by tests
<th scope="row" class="px-5 py-4 font-medium text-gray-900 whitespace-nowrap dark\:text-white">
<?= $contract->name; ?>
</th>
Expand Down Expand Up @@ -51,7 +53,6 @@ class="text-lime-600 hover:scale-110" title="Editar">
<a href="/admin/contract/<?= htmlspecialchars($contract->getId()); ?>/delete"
onclick="return confirm('¿Desea eliminar el contrato <?= htmlspecialchars($contract->name); ?>?');"
class="text-red-600 hover:scale-110" title="Eliminar">
<!-- <i class="fa-regular fa-trash-can"></i> -->
<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"
Expand All @@ -63,4 +64,4 @@ class="text-red-600 hover:scale-110" title="Eliminar">
<?php } ?>
</tbody>
</table>
</div>
</div>

Check warning on line 67 in app/src/app/Views/Admin/Contracts.php

View check run for this annotation

Codecov / codecov/patch

app/src/app/Views/Admin/Contracts.php#L67 

Added line #L67 was not covered by tests
Binary file added app/src/public/assets/images/resized-isotip.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 05bfffa

Please sign in to comment.