Guillermo.Arrieta/acad-ia-2
0
0
Fork 0
Code Issues 9 Pull Requests Actions Wiki Activity

Resumen de cambios del commit y de los dos wips anteriores:

Browse Source 
• Cambio del estilo visual del layout del detalle de asignatura
	• El nivel de un plan de estudios se muestra como editable con un select
	• se quitó 'disabled:pointer-events-none' del componente button para permitir que el cursor cambie a cursor-not-allowed sobre botones disabled
	• todos los botones y elementos con role de button no deshabilitados tienen cursor-pointer
	• todos los botones y elementos con role de button deshabilitados tienen cursor-not-allowed
cada cambio tanto en el historial de un plan como de una asignatura se puede abrir picandole en cualquier parte del cambio
This commit is contained in:
Guillermo Arrieta Medina
2026-04-13 13:54:28 -06:00
parent d3267e5890
commit b37d36fe15
7 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/asignaturas/detalle/HistorialTab.tsx
+11 -12
View File
@@ -11,7 +11,6 @@ import {
Filter,
Calendar,
Loader2,
Eye,
} from 'lucide-react'
import { useState, useMemo } from 'react'
@@ -249,7 +248,16 @@ export function HistorialTab() {
`bg-current ${config.color}`,
)}
/>
<Card className="card-interactive">
<Card
className="border-border card-interactive hover:border-primary/50 flex-1 cursor-pointer shadow-none transition-colors"
onClick={() => openCompareModal(cambio)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ')
openCompareModal(cambio)
}}
>
<CardContent className="py-4">
<div className="flex items-start gap-4">
<div
@@ -265,16 +273,7 @@ export function HistorialTab() {
<p className="font-medium">
{cambio.descripcion}
</p>
{/* BOTÓN PARA VER CAMBIOS */}
<Button
variant="ghost"
size="sm"
className="gap-2 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
onClick={() => openCompareModal(cambio)}
>
<Eye className="h-4 w-4" />
Ver cambios
</Button>
<span className="text-muted-foreground text-xs">
{format(cambio.fecha, 'HH:mm')}
</span>
src/components/auth/LoginCard.tsx
+7 -5
View File
@@ -9,11 +9,13 @@ export function LoginCard() {
return (
<div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl">
<img
src="/4_IMAGOTIPO_LASALLE_MEXICO_COLOR_RGB_2020.png"
alt="La Salle México"
className="mb-6 h-20 w-auto"
/>
<div className="flex justify-center">
<img
src="/4_IMAGOTIPO_LASALLE_MEXICO_COLOR_RGB_2020.png"
alt="La Salle México"
className="mb-6 h-20 w-auto"
/>
</div>
<h1 className="mb-1 text-center text-2xl font-semibold">
Iniciar sesión
</h1>
src/components/ui/button.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import type { VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'
const buttonVariants = cva(
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
{
variants: {
variant: {
src/routes/planes/$planId/_detalle/historial.tsx
+10 -11
View File
@@ -9,7 +9,6 @@ import {
User,
Loader2,
Clock,
Eye,
History,
Calendar,
ChevronLeft,
@@ -156,7 +155,16 @@ function RouteComponent() {
</div>
</div>
<Card className="border-border hover:border-primary/50 flex-1 shadow-none transition-colors">
<Card
className="border-border hover:border-primary/50 flex-1 cursor-pointer shadow-none transition-colors"
onClick={() => openCompareModal(event)}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ')
openCompareModal(event)
}}
>
<CardContent className="p-4">
<div className="flex flex-col gap-2">
{/* LÍNEA SUPERIOR: Título a la izquierda --- Usuario, Botón y Fecha a la derecha */}
@@ -186,15 +194,6 @@ function RouteComponent() {
</span>
</div>
{/* Botón Ver Cambios */}
<button
onClick={() => openCompareModal(event)}
className="text-primary md:text-muted-foreground md:hover:text-primary group/btn flex items-center gap-1.5 text-xs font-medium"
>
<Eye className="text-muted-foreground/70 group-hover/btn:text-primary h-4 w-4" />
<span>Ver cambios</span>
</button>
{/* Fecha exacta (Solo visible en desktop para no amontonar) */}
<span className="text-muted-foreground/70 hidden text-[11px] lg:block">
{format(event.date, 'yyyy-MM-dd HH:mm')}
src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+1 -1
View File
@@ -246,7 +246,7 @@ function AsignaturaLayout() {
{/* Badge Estático del Tipo (Estilo oscuro sutil) */}
<Badge
variant="outline"
className="flex h-8 items-center gap-1.5 border-white/10 bg-white/5 px-3 text-white hover:border-white/20 hover:bg-white/10"
className="flex h-8 cursor-default items-center gap-1.5 border-white/10 bg-white/5 px-3 text-white"
>
<Tag size={12} className="text-white/70" />
{asignaturaApi.tipo}
src/routes/planes/_lista.tsx
+1 -3
View File
@@ -194,9 +194,7 @@ function RouteComponent() {
variant="secondary"
onClick={resetFilters}
disabled={isClearDisabled}
className={`shadow-md ${
isClearDisabled ? 'cursor-not-allowed opacity-50' : ''
}`}
className={`shadow-md`}
>
<Icons.X className="h-4 w-4" /> Limpiar
</Button>
src/styles.css
+12
View File
@@ -346,3 +346,15 @@ body {
.login-bg {
background-image: url('/fondo_login.png');
}
@layer base {
button:not(:disabled),
[role='button']:not(:disabled) {
cursor: pointer;
}
button:disabled,
[role='button']:disabled {
cursor: not-allowed !important;
}
}