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

Merge pull request 'Mejorar responsividad fix#219' (#221) from issue/219-mejorar-responsividad into main
Deploy to Azure Static Web Apps / build-and-deploy (push) Successful in 1m18s
Details

Browse Source 
Reviewed-on: #221
This commit was merged in pull request #221.
This commit is contained in:
Roberto Silva Corona
2026-03-24 16:55:32 +00:00
parent ad7a741d1e 0820bf19a5
commit 54a3b74836
5 changed files with 49 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/asignaturas/detalle/AsignaturaDetailPage.tsx
+25 -6
View File
@@ -323,7 +323,12 @@ function DatosGenerales({
initialContent={pre} initialContent={pre}
// Pasamos las materias del plan para el Select (excluyendo la actual) // Pasamos las materias del plan para el Select (excluyendo la actual)
availableSubjects={ availableSubjects={
availableSubjects?.filter((a) => a.id !== asignaturaId) || [] availableSubjects?.filter(
(a) =>
a.id !== asignaturaId &&
a.numero_ciclo < data?.numero_ciclo &&
a.numero_ciclo,
) || []
} }
onPersist={({ value }) => { onPersist={({ value }) => {
updateAsignatura.mutate({ updateAsignatura.mutate({
@@ -628,8 +633,14 @@ function InfoCard({
Materia de Seriación Materia de Seriación
</label> </label>
<Select <Select
value={tempText?.[0]?.id || 'none'} value={
Array.isArray(tempText) && tempText.length > 0
? tempText[0].id
: 'none'
}
onValueChange={(val) => { onValueChange={(val) => {
console.log(availableSubjects)
const selected = availableSubjects?.find( const selected = availableSubjects?.find(
(s) => s.id === val, (s) => s.id === val,
) )
@@ -651,16 +662,24 @@ function InfoCard({
} }
}} }}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue placeholder="Selecciona una materia" /> <div className="flex-1 truncate text-left">
<SelectValue placeholder="Selecciona una materia" />
</div>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="none"> <SelectItem value="none">
Ninguna (Sin seriación) Ninguna (Sin seriación)
</SelectItem> </SelectItem>
{availableSubjects?.map((asig) => ( {availableSubjects?.map((asig) => (
<SelectItem key={asig.id} value={asig.id}> <SelectItem
{asig.codigo} - {asig.nombre} key={asig.id}
value={asig.id}
className="max-w-[300px] sm:max-w-[500px]"
>
<span className="block truncate">
{asig.codigo} - {asig.nombre}
</span>
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
src/components/asignaturas/detalle/IAAsignaturaTab.tsx
+1 -1
View File
@@ -883,7 +883,7 @@ export function IAAsignaturaTab() {
<DrawerPortal> <DrawerPortal>
<DrawerOverlay className="fixed inset-0 bg-black/40" /> <DrawerOverlay className="fixed inset-0 bg-black/40" />
<DrawerContent className="fixed right-0 bottom-0 left-0 h-[70vh] p-4 outline-none"> <DrawerContent className="fixed right-0 bottom-0 left-0 h-[70vh] p-4 outline-none">
<div className="flex h-full flex-col overflow-hidden"> <div className="flex h-full flex-col overflow-hidden pt-8">
{/* Reutiliza aquí el componente de la lista de chats */} {/* Reutiliza aquí el componente de la lista de chats */}
<Button <Button
onClick={() => { onClick={() => {
src/routes/planes/$planId/_detalle/historial.tsx
+13 -10
View File
@@ -139,13 +139,16 @@ function RouteComponent() {
</div> </div>
<div className="relative space-y-0"> <div className="relative space-y-0">
<div className="absolute top-0 bottom-0 left-9 w-px bg-slate-200" /> <div className="absolute top-0 bottom-0 left-6 w-px bg-slate-200 md:left-9" />
{historyEvents.length === 0 ? ( {historyEvents.length === 0 ? (
<div className="ml-20 py-10 text-slate-500">No hay registros.</div> <div className="ml-20 py-10 text-slate-500">No hay registros.</div>
) : ( ) : (
historyEvents.map((event) => ( historyEvents.map((event) => (
<div key={event.id} className="group relative flex gap-6 pb-8"> <div
<div className="relative z-10 flex h-18 flex-col items-center"> key={event.id}
className="group relative flex gap-3 pb-8 md:gap-6"
>
<div className="relative z-10 flex flex-col items-center">
<div className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-4 border-white bg-slate-100 text-slate-600 shadow-sm transition-colors group-hover:bg-teal-50 group-hover:text-teal-600"> <div className="flex h-[42px] w-[42px] items-center justify-center rounded-full border-4 border-white bg-slate-100 text-slate-600 shadow-sm transition-colors group-hover:bg-teal-50 group-hover:text-teal-600">
{event.icon} {event.icon}
</div> </div>
@@ -153,10 +156,10 @@ function RouteComponent() {
<Card className="flex-1 border-slate-200 shadow-none transition-colors hover:border-teal-200"> <Card className="flex-1 border-slate-200 shadow-none transition-colors hover:border-teal-200">
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-2">
{/* LÍNEA SUPERIOR: Título a la izquierda --- Usuario, Botón y Fecha a la derecha */} {/* LÍNEA SUPERIOR: Título a la izquierda --- Usuario, Botón y Fecha a la derecha */}
<div className="flex items-center justify-between"> <div className="flex flex-col justify-between gap-2 md:flex-row md:items-center">
<div className="flex items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<span className="text-sm font-bold text-slate-800"> <span className="text-sm font-bold text-slate-800">
{event.type} {event.type}
</span> </span>
@@ -172,9 +175,9 @@ function RouteComponent() {
</div> </div>
{/* Grupo de elementos alineados a la derecha */} {/* Grupo de elementos alineados a la derecha */}
<div className="flex items-center gap-4 text-slate-500"> <div className="flex flex-wrap items-center gap-3 text-slate-500 md:gap-4">
{/* Usuario e Icono */} {/* Usuario e Icono */}
<div className="flex items-center gap-2 text-xs"> <div className="flex items-center gap-1.5 text-xs">
<User className="h-3.5 w-3.5" /> <User className="h-3.5 w-3.5" />
<span className="text-muted-foreground"> <span className="text-muted-foreground">
{event.user} {event.user}
@@ -184,14 +187,14 @@ function RouteComponent() {
{/* Botón Ver Cambios */} {/* Botón Ver Cambios */}
<button <button
onClick={() => openCompareModal(event)} onClick={() => openCompareModal(event)}
className="group/btn flex items-center gap-1.5 text-xs transition-colors hover:text-teal-600" className="group/btn flex items-center gap-1.5 text-xs font-medium text-teal-600 md:text-slate-500 md:hover:text-teal-600"
> >
<Eye className="h-4 w-4 text-slate-400 group-hover/btn:text-teal-600" /> <Eye className="h-4 w-4 text-slate-400 group-hover/btn:text-teal-600" />
<span>Ver cambios</span> <span>Ver cambios</span>
</button> </button>
{/* Fecha exacta (Solo visible en desktop para no amontonar) */} {/* Fecha exacta (Solo visible en desktop para no amontonar) */}
<span className="hidden text-[11px] text-slate-400 md:block"> <span className="hidden text-[11px] text-slate-400 lg:block">
{format(event.date, 'yyyy-MM-dd HH:mm')} {format(event.date, 'yyyy-MM-dd HH:mm')}
</span> </span>
</div> </div>
src/routes/planes/$planId/_detalle/iaplan.tsx
+2 -2
View File
@@ -482,9 +482,9 @@ function RouteComponent() {
} }
return ( return (
<div className="flex h-[calc(100vh-160px)] max-h-[calc(100vh-160px)] w-full flex-col gap-6 overflow-hidden p-4 md:flex-row"> <div className="flex min-h-[calc(100vh-80px)] w-full flex-col gap-4 p-4 md:h-[calc(100vh-160px)] md:max-h-[calc(100vh-160px)] md:flex-row md:overflow-hidden">
{/* --- HEADER MÓVIL (Solo visible en < md) --- */} {/* --- HEADER MÓVIL (Solo visible en < md) --- */}
<div className="flex items-center justify-between rounded-lg border bg-white p-2 md:hidden"> <div className="flex shrink-0 items-center justify-between rounded-lg border bg-white p-2 shadow-sm md:hidden">
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
src/routes/planes/$planId/asignaturas/$asignaturaId/route.tsx
+8 -3
View File
@@ -215,9 +215,14 @@ function AsignaturaLayout() {
{/* TABS */} {/* TABS */}
<nav className="border-b bg-white"> <nav className="sticky top-0 z-20 border-b bg-white">
<div className="mx-auto max-w-7xl px-6"> <div className="mx-auto max-w-7xl px-6">
<div className="flex justify-center gap-8"> {/* CAMBIOS CLAVE:
1. overflow-x-auto: Permite scroll horizontal.
2. scrollbar-hide: (Opcional) para que no se vea la barra fea.
3. justify-start md:justify-center: Alineado a la izquierda en móvil para que el scroll funcione, centrado en desktop.
*/}
<div className="no-scrollbar flex items-center justify-start gap-8 overflow-x-auto whitespace-nowrap md:justify-center">
{[ {[
{ label: 'Datos', to: '' }, { label: 'Datos', to: '' },
{ label: 'Contenido', to: 'contenido' }, { label: 'Contenido', to: 'contenido' },
@@ -241,7 +246,7 @@ function AsignaturaLayout() {
} }
from="/planes/$planId/asignaturas/$asignaturaId" from="/planes/$planId/asignaturas/$asignaturaId"
params={{ planId, asignaturaId }} params={{ planId, asignaturaId }}
className={`border-b-2 py-3 text-sm font-medium ${ className={`shrink-0 border-b-2 py-4 text-sm font-medium transition-colors ${
isActive isActive
? 'border-blue-600 text-blue-600' ? 'border-blue-600 text-blue-600'
: 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700' : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'