sozsoft/erp-platform
1
0
Fork 0
Code Issues 6 Pull requests Projects 3 Releases Packages Wiki Activity Actions

Classroom Responsive hale getirildi.

Browse source
This commit is contained in:
Sedat Öztürk 2025-08-29 21:22:44 +03:00
parent 962c4a5c1d
commit 43f1cf9fe5
2 changed files with 23 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/classroom/planning/QuickActions.tsx
View file

@ -122,7 +122,7 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
{/* Selected Students */} {/* Selected Students */}
{selectedStudents.length > 0 && ( {selectedStudents.length > 0 && (
<Card bodyClass="md:p-3"> <Card bodyClass="md:p-3">
<body className="space-y-3"> <div className="space-y-3">
{selectedStudents.map((student) => ( {selectedStudents.map((student) => (
<div key={student.id} className="flex items-center space-x-3"> <div key={student.id} className="flex items-center space-x-3">
<Avatar <Avatar
@ -135,7 +135,7 @@ export const QuickActions: React.FC<QuickActionsProps> = ({
</div> </div>
</div> </div>
))} ))}
</body> </div>
</Card> </Card>
)} )}
</div> </div>

50
ui/src/views/classroom/PlanningPage.tsx
View file

@ -166,27 +166,24 @@ const ClassroomPlannerPage: React.FC = () => {
titleTemplate="%s | Kurs Platform" titleTemplate="%s | Kurs Platform"
title={translate('::' + 'App.Classroom.Planning')} title={translate('::' + 'App.Classroom.Planning')}
defaultTitle="Kurs Platform" defaultTitle="Kurs Platform"
></Helmet> />
<Container> <Container>
{/* Header */} {/* Header */}
<header className="bg-white border-b border-gray-200 px-4 py-4"> <header className="bg-white border-b border-gray-200 px-2 py-2 md:px-4 md:py-4">
<div className="flex items-center justify-between"> <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-2 md:space-x-4">
<div className="flex items-center space-x-2"> <FaThLarge className="h-7 w-7 md:h-8 md:w-8 text-primary" />
<FaThLarge className="h-8 w-8 text-primary" /> <h1 className="text-xl md:text-2xl font-bold text-gray-900">Sınıf Planlama</h1>
<h1 className="text-2xl font-bold text-gray-900">Sınıf Planlama</h1>
</div>
</div> </div>
<div className="flex flex-wrap gap-2 md:gap-3 items-center">
<div className="flex items-center space-x-3">
<Button <Button
variant="default" variant="default"
size="sm" size="sm"
className="flex flex-row w-full justify-center items-center" className="flex flex-row justify-center items-center"
onClick={handleClearAll} onClick={handleClearAll}
> >
<FaUndo className="h-4 w-4 mr-2" /> <FaUndo className="h-4 w-4 mr-2" />
Temizle <span className="hidden sm:inline">Temizle</span>
</Button> </Button>
<Button <Button
variant="default" variant="default"
@ -195,30 +192,28 @@ const ClassroomPlannerPage: React.FC = () => {
onClick={handleAutoAssign} onClick={handleAutoAssign}
> >
<FaBolt className="h-4 w-4 mr-2 text-yellow-400" /> <FaBolt className="h-4 w-4 mr-2 text-yellow-400" />
Otomatik Ata <span className="hidden sm:inline">Otomatik Ata</span>
</Button> </Button>
<Button size="sm" className="flex flex-row justify-center items-center">
<Button size="sm" className="flex flex-row w-full justify-center items-center">
<FaSave className="h-4 w-4 mr-2" /> <FaSave className="h-4 w-4 mr-2" />
Kaydet <span className="hidden sm:inline">Kaydet</span>
</Button> </Button>
</div> </div>
</div> </div>
</header> </header>
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}> <DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
<div className="flex h-[calc(100vh-80px)]"> <div className="flex flex-col md:flex-row h-auto md:h-[calc(100vh-80px)]">
{/* Left Sidebar - Student List */} {/* Left Sidebar - Student List */}
<div className="w-80 bg-white border-r border-gray-200 flex flex-col"> <div className="w-full md:w-80 bg-white border-b md:border-b-0 md:border-r border-gray-200 flex flex-col">
<div className="p-2 border-b border-gray-200"> <div className="p-2 border-b border-gray-200">
<div className="flex items-center justify-between pb-2"> <div className="flex items-center justify-between pb-2">
<h2 className="text-lg font-semibold text-gray-900 flex items-center"> <h2 className="text-base md:text-lg font-semibold text-gray-900 flex items-center">
<FaUsers className="h-5 w-5 mr-2" /> <FaUsers className="h-5 w-5 mr-2" />
Öğrenciler ({unassignedStudents.length}) Öğrenciler ({unassignedStudents.length})
</h2> </h2>
</div> </div>
<div className="space-y-2 md:space-y-3">
<div className="space-y-3">
<div className="relative"> <div className="relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" /> <FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
<input <input
@ -226,12 +221,11 @@ const ClassroomPlannerPage: React.FC = () => {
placeholder="Öğrenci ara..." placeholder="Öğrenci ara..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="w-full p-1 pl-8 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary" className="w-full p-1 pl-8 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-sm"
/> />
</div> </div>
</div> </div>
</div> </div>
<StudentList <StudentList
students={unassignedStudents} students={unassignedStudents}
searchQuery={searchQuery} searchQuery={searchQuery}
@ -243,13 +237,12 @@ const ClassroomPlannerPage: React.FC = () => {
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
<div className="p-2 border-b border-gray-200"> <div className="p-2 border-b border-gray-200">
<div className="flex items-center justify-between pb-2"> <div className="flex items-center justify-between pb-2">
<h2 className="text-lg font-semibold text-gray-900 flex items-center"> <h2 className="text-base md:text-lg font-semibold text-gray-900 flex items-center">
<FaUsers className="h-5 w-5 mr-2" /> <FaUsers className="h-5 w-5 mr-2" />
Sınıflar Sınıflar
</h2> </h2>
</div> </div>
<div className="space-y-2 md:space-y-3">
<div className="space-y-3">
<div className="relative"> <div className="relative">
<ClassroomSelector <ClassroomSelector
selectedClassroom={selectedClassroom} selectedClassroom={selectedClassroom}
@ -258,9 +251,8 @@ const ClassroomPlannerPage: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
{/* Seat Grid */} {/* Seat Grid */}
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto">
{selectedClassroom && ( {selectedClassroom && (
<SeatGrid <SeatGrid
classroom={selectedClassroom} classroom={selectedClassroom}
@ -275,7 +267,7 @@ const ClassroomPlannerPage: React.FC = () => {
</div> </div>
{/* Right Sidebar - Quick Actions */} {/* Right Sidebar - Quick Actions */}
<div className="w-80 bg-white border-l border-gray-200"> <div className="w-full md:w-80 bg-white border-t md:border-t-0 md:border-l border-gray-200">
<QuickActions <QuickActions
selectedSeats={selectedSeats} selectedSeats={selectedSeats}
seats={seats} seats={seats}