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(layout):improve UI elements for mobile #218

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
+116 −83
Draft

fix(layout):improve UI elements for mobile #218

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
05bfffa
fix(layout):improveme UI elements for mobile
CODEmartigarcia Dec 17, 2024
9be39ed
Merge branch 'main' into feat/improvements-ui
CODEmartigarcia Dec 18, 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
94 changes: 62 additions & 32 deletions app/src/app/Layouts/Admin/AdminInventoryLayout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<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>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
<style>
Expand All @@ -31,80 +32,109 @@

<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 46 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

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

Added line #L46 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 50 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

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

Added line #L50 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 104 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-L104 

Added lines #L99 - L104 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 111 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

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

Added line #L111 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 119 in app/src/app/Layouts/Admin/AdminInventoryLayout.php

View check run for this annotation

Codecov / codecov/patch

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

Added line #L119 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 -->
<?= $content ?>

Expand Down
63 changes: 29 additions & 34 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,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
Open in desktop
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 @@
<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 @@
<?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
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading