feat(ui): mejorar la estructura y estilos en el Footer y LandingPage
Se ajustan los estilos y la estructura del componente Footer para mejorar la presentación y la alineación de los elementos. Además, se modifica el texto en LandingPage para una mejor claridad en la comunicación. Se optimizan las clases de Tailwind para una mejor responsividad y experiencia de usuario.
This commit is contained in:
Alexis
@@ -271,7 +271,8 @@ export function PublicationsTable({
|
||||
}`}
|
||||
>
|
||||
<FilterIcon />
|
||||
Filtros
|
||||
<span className="sm:hidden">Filtros</span>
|
||||
<span className="hidden sm:inline">Filtros avanzados</span>
|
||||
{hasYearFilter && (
|
||||
<span
|
||||
className="ml-0.5 inline-block h-1.5 w-1.5 rounded-full bg-brand-accent"
|
||||
@@ -303,51 +304,80 @@ export function PublicationsTable({
|
||||
{filtersOpen && (
|
||||
<div
|
||||
id="pubs-advanced-filters"
|
||||
className="flex flex-wrap items-end gap-4 border-t border-surface-border/60 bg-surface-secondary/40 px-5 py-3"
|
||||
className="border-t border-surface-border/60 bg-surface-secondary/40 px-5 py-3"
|
||||
>
|
||||
<div className="flex min-w-[140px] flex-1 flex-col gap-1">
|
||||
<label
|
||||
htmlFor="year-from"
|
||||
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
|
||||
>
|
||||
Desde año
|
||||
</label>
|
||||
<CustomSelect
|
||||
id="year-from"
|
||||
value={yearFrom}
|
||||
onChange={handleYearFromChange}
|
||||
disabled={availableYears.length === 0}
|
||||
options={availableYears.map((y) => ({
|
||||
value: String(y),
|
||||
label: String(y),
|
||||
}))}
|
||||
className="w-full"
|
||||
/>
|
||||
<div className="mb-2 flex flex-wrap items-center justify-between gap-2">
|
||||
<p className="text-xs font-medium text-ink-secondary">
|
||||
Filtrar por año de publicación
|
||||
</p>
|
||||
{yearFilterSummary && (
|
||||
<span className="rounded-full border border-brand-accent/30 bg-brand-accent/10 px-2 py-0.5 text-[11px] font-medium text-brand-accent">
|
||||
{yearFilterSummary}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex min-w-[140px] flex-1 flex-col gap-1">
|
||||
<label
|
||||
htmlFor="year-to"
|
||||
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
|
||||
>
|
||||
Hasta año
|
||||
</label>
|
||||
<CustomSelect
|
||||
id="year-to"
|
||||
value={yearTo}
|
||||
onChange={handleYearToChange}
|
||||
disabled={availableYears.length === 0}
|
||||
options={availableYears.map((y) => ({
|
||||
value: String(y),
|
||||
label: String(y),
|
||||
}))}
|
||||
className="w-full"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 items-end gap-3 sm:grid-cols-[1fr_auto_1fr_auto]">
|
||||
<div className="flex min-w-[140px] flex-1 flex-col gap-1">
|
||||
<label
|
||||
htmlFor="year-from"
|
||||
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
|
||||
>
|
||||
Desde
|
||||
</label>
|
||||
<CustomSelect
|
||||
id="year-from"
|
||||
value={yearFrom}
|
||||
onChange={handleYearFromChange}
|
||||
disabled={availableYears.length === 0}
|
||||
options={availableYears.map((y) => ({
|
||||
value: String(y),
|
||||
label: String(y),
|
||||
}))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="hidden pb-2 text-center text-sm text-ink-tertiary sm:block">
|
||||
—
|
||||
</div>
|
||||
|
||||
<div className="flex min-w-[140px] flex-1 flex-col gap-1">
|
||||
<label
|
||||
htmlFor="year-to"
|
||||
className="text-[11px] font-medium uppercase tracking-wide text-ink-tertiary"
|
||||
>
|
||||
Hasta
|
||||
</label>
|
||||
<CustomSelect
|
||||
id="year-to"
|
||||
value={yearTo}
|
||||
onChange={handleYearToChange}
|
||||
disabled={availableYears.length === 0}
|
||||
options={availableYears.map((y) => ({
|
||||
value: String(y),
|
||||
label: String(y),
|
||||
}))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{hasYearFilter && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearYearFilter}
|
||||
className="rounded-lg border border-surface-border-strong bg-surface-primary px-3 py-2 text-[13px] font-medium text-ink-secondary transition-colors hover:bg-surface-secondary"
|
||||
>
|
||||
Limpiar
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasYearFilter && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearYearFilter}
|
||||
className="mb-[2px] rounded-md px-2.5 py-1.5 text-xs font-medium text-ink-tertiary transition-colors hover:bg-surface-primary hover:text-ink-primary"
|
||||
className="sr-only"
|
||||
>
|
||||
Limpiar rango
|
||||
</button>
|
||||
|
||||
@@ -6,11 +6,11 @@ export default function Footer() {
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
|
||||
{/* Main row */}
|
||||
<div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="flex flex-col gap-7 lg:flex-row lg:items-start lg:justify-between">
|
||||
|
||||
{/* Brand */}
|
||||
<div className="flex flex-col gap-2 lg:max-w-xs">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex flex-col gap-2 text-center lg:max-w-xs lg:text-left">
|
||||
<div className="flex flex-wrap items-center justify-center gap-2 lg:justify-start">
|
||||
<span className="text-base font-extrabold tracking-tight text-ink-primary">
|
||||
ORCID<span className="text-orcid-green">2</span>SWORD
|
||||
</span>
|
||||
@@ -19,16 +19,16 @@ export default function Footer() {
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-ink-secondary">
|
||||
Sincronización de publicaciones ORCID al repositorio institucional.
|
||||
Extracción y preparación de publicaciones ORCID para repositorios académicos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Compatible con */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-ink-tertiary">
|
||||
<span className="text-center text-[10px] font-black uppercase tracking-[0.2em] text-ink-tertiary lg:text-left">
|
||||
Compatible con
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<div className="flex flex-wrap justify-center gap-1.5 lg:justify-start">
|
||||
{technologies.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
@@ -41,13 +41,13 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
{/* Institutional links */}
|
||||
<div className="flex flex-row gap-6 sm:gap-8">
|
||||
<div className="grid grid-cols-2 gap-2.5 sm:gap-3">
|
||||
|
||||
{/* Universidad de Jaén */}
|
||||
<a
|
||||
href="https://www.ujaen.es/"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="group flex items-center gap-2.5"
|
||||
className="group flex items-center justify-center gap-2.5 rounded-lg border border-surface-border bg-surface-secondary/30 px-3 py-2 transition-colors hover:bg-surface-secondary/60"
|
||||
title="Ir a la web oficial de la Universidad de Jaén"
|
||||
>
|
||||
<div className="flex h-8 flex-col justify-center border-r-2 border-surface-border-strong pr-2.5 text-right transition-colors group-hover:border-brand-accent">
|
||||
@@ -65,7 +65,7 @@ export default function Footer() {
|
||||
<a
|
||||
href="https://github.com/uja-dev-practices/orcid_system"
|
||||
target="_blank" rel="noopener noreferrer"
|
||||
className="group flex items-center gap-2.5"
|
||||
className="group flex items-center justify-center gap-2.5 rounded-lg border border-surface-border bg-surface-secondary/30 px-3 py-2 transition-colors hover:bg-surface-secondary/60"
|
||||
title="Ver repositorio oficial"
|
||||
>
|
||||
<div className="flex h-8 flex-col justify-center border-r-2 border-surface-border-strong pr-2.5 text-right transition-colors group-hover:border-brand-primary">
|
||||
|
||||
@@ -214,6 +214,14 @@ export function GroupResultsPage() {
|
||||
<AppHeader variant="group" />
|
||||
<main className="flex-1">
|
||||
<div className="mx-auto w-full max-w-7xl px-4 py-7">
|
||||
<Link
|
||||
to="/"
|
||||
className="mb-5 inline-flex items-center gap-1.5 text-sm text-ink-tertiary transition-colors hover:text-ink-primary"
|
||||
>
|
||||
<ArrowLeftIcon size={14} />
|
||||
Volver al inicio
|
||||
</Link>
|
||||
|
||||
{/* Page header */}
|
||||
<div className="mb-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
@@ -282,7 +290,6 @@ export function GroupResultsPage() {
|
||||
swordProfile,
|
||||
)
|
||||
}
|
||||
swordProfile={swordProfile}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -343,7 +350,6 @@ function ResearcherResultCard({
|
||||
isAuthenticated,
|
||||
exporting,
|
||||
onExport,
|
||||
swordProfile,
|
||||
}) {
|
||||
const researcher = bundle.researcher ?? {};
|
||||
const publications = bundle.publications ?? [];
|
||||
|
||||
@@ -221,7 +221,7 @@ export function LandingPage() {
|
||||
Tus publicaciones, listas para depositar.
|
||||
</h1>
|
||||
<p className="mx-auto max-w-xl text-[16px] leading-relaxed text-ink-secondary">
|
||||
Conecta tu ORCID y descárgalas en XML cuando quieras.
|
||||
Conecta tu ORCID y descárgalas cuando quieras.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user