refactor: update Sidebar and layout styles for improved responsiveness, adjust chart dimensions and remove tooltip functionality in employee reports

This commit is contained in:
2025-10-25 07:53:08 -03:00
parent f0d3625045
commit 5dd00b63e1
4 changed files with 54 additions and 43 deletions

View File

@@ -23,7 +23,7 @@
</script>
<!-- Header Fixo acima de tudo -->
<div class="navbar bg-base-200 shadow-md px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-20">
<div class="navbar bg-primary/20 shadow-md px-6 lg:px-8 fixed top-0 left-0 right-0 z-50 min-h-24">
<div class="flex-none lg:hidden">
<label for="my-drawer-3" class="btn btn-square btn-ghost">
<svg
@@ -45,23 +45,23 @@
<img src={logo} alt="Logo do Governo de PE" class="h-14 lg:h-16 w-auto hidden lg:block" />
<div class="flex flex-col">
<h1 class="text-xl lg:text-3xl font-bold text-primary">SGSE</h1>
<p class="text-sm lg:text-base text-base-content/70 hidden sm:block font-medium">
<p class="text-base lg:text-2xl text-base-content/70 hidden sm:block font-semibold">
Sistema de Gerenciamento da Secretaria de Esportes
</p>
</div>
</div>
</div>
<div class="drawer lg:drawer-open" style="margin-top: 80px;">
<div class="drawer lg:drawer-open" style="margin-top: 96px;">
<input id="my-drawer-3" type="checkbox" class="drawer-toggle" />
<div class="drawer-content flex flex-col lg:ml-72" style="min-height: calc(100vh - 80px);">
<div class="drawer-content flex flex-col lg:ml-72" style="height: calc(100vh - 96px);">
<!-- Page content -->
<div class="flex-1">
<div class="flex-1 overflow-y-auto">
{@render children?.()}
</div>
<!-- Footer -->
<footer class="footer footer-center bg-base-200 text-base-content p-6 border-t border-base-300 mt-auto">
<footer class="footer footer-center bg-primary/20 text-base-content p-4 border-t border-base-300 flex-shrink-0">
<div class="grid grid-flow-col gap-4">
<a href="/" class="link link-hover text-sm">Sobre</a>
<a href="/" class="link link-hover text-sm">Contato</a>
@@ -79,14 +79,14 @@
</div>
</footer>
</div>
<div class="drawer-side z-40 fixed" style="margin-top: 80px;">
<div class="drawer-side z-40 fixed" style="margin-top: 96px;">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"
></label>
<div class="menu bg-base-200 w-72 p-4 flex flex-col gap-2 h-[calc(100vh-80px)] overflow-y-auto">
<div class="menu bg-primary/20 w-72 p-4 flex flex-col gap-2 h-[calc(100vh-96px)] overflow-y-auto">
<!-- Sidebar menu items -->
<ul class="flex flex-col gap-2">
<li class="bg-primary rounded-xl">
<a href="/" class="font-medium">
<li class="rounded-xl">
<a href="/" class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
@@ -105,19 +105,19 @@
</a>
</li>
{#each setores as s}
<li class="bg-primary rounded-xl">
<li class="rounded-xl">
<a
href={s.link}
class:active={page.url.pathname.startsWith(s.link)}
aria-current={page.url.pathname.startsWith(s.link) ? "page" : undefined}
class="font-medium"
class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors"
>
<span>{s.nome}</span>
</a>
</li>
{/each}
<li class="bg-primary rounded-xl mt-auto">
<a href="/" class="font-medium">
<li class="rounded-xl mt-auto">
<a href="/" class="font-medium flex items-center justify-center gap-2 text-center p-3 rounded-xl border border-base-300 bg-base-100 hover:bg-primary/60 active:bg-primary text-base-content hover:text-white active:text-white transition-colors">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"