Skip to content

Commit a9f5787

Browse files
nayarakarinesilvanayarakarinesilva
committed
feat(frontend): melhorias de responsividade e adaptação de layout
- melhora adaptação em mobile e tablet - ajustes de layout em componentes principais - refinamento da responsividade geral da aplicação - adiciona logo.svg em public, de acordo com a logo atual do figma; - configura lang como pt-br no index.html
1 parent 38e203c commit a9f5787

6 files changed

Lines changed: 62 additions & 26 deletions

File tree

‎frontend/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!doctype html>
2-
<html lang="en">
2+
<html lang="pt-br">
33
<head>
44
<meta charset="UTF-8" />
55
<!--C:\Users\benev\projetos\Node\vagas-full\frontend\src\assets\logo-painel-vagas.svg-->
6-
<link rel="icon" type="image/svg+xml" href="/asset/logo-painel-vagas.svg" />
6+
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<script>
99
(function () {

‎frontend/public/logo.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎frontend/src/App.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { useJobsFiltering } from "@/hooks/useJobsFiltering";
77
import { useJobsPagination } from "@/hooks/useJobsPagination";
88
import type { JobsMeta } from "@/types/jobs";
99
import { useCallback, type SetStateAction } from "react";
10-
import { FiRefreshCw } from "react-icons/fi";
10+
import { FiRefreshCw } from "react-icons/fi";
1111

1212
function formatDate(timestamp: JobsMeta["modifiedAt"]): string {
1313
if (!timestamp) {
@@ -85,8 +85,7 @@ function App() {
8585
<Button
8686
onClick={handleScraper}
8787
disabled={scraping}
88-
className="h-12 rounded-2xl bg-[#0c6b35] px-5 text-white shadow-sm hover:bg-[#0a5b2d]"
89-
>
88+
className="h-12 md:h-14 w-full sm:w-auto rounded-xl md:rounded-2xl bg-[#0c6b35] px-6 text-base text-white shadow-sm hover:bg-[#0a5b2d] whitespace-nowrap flex items-center gap-2" >
9089
<FiRefreshCw className={`h-4 w-4 ${scraping ? "animate-spin" : ""}`} />
9190
{scraping ? "Buscando vagas..." : "Buscar vagas"}
9291
</Button>

‎frontend/src/components/JobsFiltersCard.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function JobsFiltersCard({
8282
<>
8383
<Card className="rounded-[24px] border border-slate-200 bg-white/95 shadow-[0_18px_45px_rgba(15,23,42,0.08)] backdrop-blur dark:border-[#2b3f58] dark:bg-[#131d31]/95 dark:shadow-[0_18px_45px_rgba(3,8,20,0.25)]">
8484
<CardContent className="flex flex-col gap-4 p-5 md:p-6">
85-
<div className="flex flex-col gap-3 xl:flex-row xl:items-center">
85+
<div className="flex flex-col md:flex-row gap-3 md:items-center">
8686
<div className="relative flex-1">
8787
<FiSearch className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500 dark:text-slate-400" />
8888
<Input
@@ -96,7 +96,7 @@ export function JobsFiltersCard({
9696
</div>
9797

9898
<div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
99-
<div className="flex flex-1 flex-wrap items-center gap-2">
99+
<div className="flex flex-1 flex-col gap-2 md:flex-row md:flex-wrap md:items-center">
100100
<select
101101
aria-label="Filtrar por palavra-chave"
102102
className="h-12 min-w-[220px] rounded-2xl border border-slate-300 bg-white px-3 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-[#14AE5C]/40 dark:border-[#35506f] dark:bg-[#0b1527] dark:text-slate-100"
@@ -124,15 +124,17 @@ export function JobsFiltersCard({
124124
))}
125125
</select>
126126

127-
<Badge variant="secondary" className="gap-1.5 rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs text-slate-700 dark:border-[#35506f] dark:bg-[#24324c] dark:text-slate-100">
128-
<FiFileText className="h-3.5 w-3.5" />
129-
{meta.file || "Sem arquivo"}
130-
</Badge>
131-
132-
<Badge className="gap-1.5 rounded-full bg-[#0c6b35] px-3 py-1 text-xs text-white">
133-
<FiBriefcase className="h-3.5 w-3.5" />
134-
{meta.total} vagas
135-
</Badge>
127+
<div>
128+
<Badge variant="secondary" className="gap-1.5 rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs text-slate-700 dark:border-[#35506f] dark:bg-[#24324c] dark:text-slate-100">
129+
<FiFileText className="h-3.5 w-3.5" />
130+
{meta.file || "Sem arquivo"}
131+
</Badge>
132+
133+
<Badge className="gap-1.5 rounded-full bg-[#0c6b35] px-3 py-1 text-xs text-white">
134+
<FiBriefcase className="h-3.5 w-3.5" />
135+
{meta.total} vagas
136+
</Badge>
137+
</div>
136138
</div>
137139

138140
<div className="flex items-center gap-2 self-start xl:self-auto">

‎frontend/src/components/JobsHeaderCard.tsx‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,34 @@ import { useTheme } from "@/hooks/useTheme";
88

99
export function JobsHeaderCard() {
1010
const { resolvedTheme, toggleTheme } = useTheme();
11+
1112
return (
12-
<>
13-
<div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">
13+
<div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-4 md:-mx-8 flex flex-col gap-4 md:flex-row md:items-end">
14+
<div className="flex items-start justify-between w-full md:w-auto">
1415
<CardTitle className="text-3xl text-white">
15-
<img src={Logo} alt="Painel de Vagas" />
16+
<img src={Logo} alt="Painel de Vagas" className="w-16 md:w-auto" />
1617
</CardTitle>
17-
<CardDescription className="text-white">
18-
Leitura automatica dos arquivos XLSX gerados em output.
19-
</CardDescription>
20-
<div className="ml-auto self-start mr-8">
21-
<ThemeToggle theme={resolvedTheme} onToggle={toggleTheme} />
18+
19+
<div className="md:hidden">
20+
<ThemeToggle
21+
theme={resolvedTheme}
22+
onToggle={toggleTheme}
23+
/>
2224
</div>
2325
</div>
24-
25-
</>
26+
27+
<CardDescription className="text-white text-sm md:text-base">
28+
Leitura automática dos arquivos
29+
<br />
30+
XLSX gerados em output.
31+
</CardDescription>
32+
33+
<div className="hidden md:block ml-auto self-start mr-8">
34+
<ThemeToggle
35+
theme={resolvedTheme}
36+
onToggle={toggleTheme}
37+
/>
38+
</div>
39+
</div>
2640
);
2741
}

‎package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)