Classroom Responsive hale getirildi.

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

View file

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

View file

@ -166,27 +166,24 @@ const ClassroomPlannerPage: React.FC = () => {
titleTemplate="%s | Kurs Platform"
title={translate('::' + 'App.Classroom.Planning')}
defaultTitle="Kurs Platform"
></Helmet>
/>
<Container>
{/* Header */}
<header className="bg-white border-b border-gray-200 px-4 py-4">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
<FaThLarge className="h-8 w-8 text-primary" />
<h1 className="text-2xl font-bold text-gray-900">Sınıf Planlama</h1>
<header className="bg-white border-b border-gray-200 px-2 py-2 md:px-4 md:py-4">
<div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
<div className="flex items-center space-x-2 md:space-x-4">
<FaThLarge className="h-7 w-7 md:h-8 md:w-8 text-primary" />
<h1 className="text-xl md:text-2xl font-bold text-gray-900">Sınıf Planlama</h1>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="flex flex-wrap gap-2 md:gap-3 items-center">
<Button
variant="default"
size="sm"
className="flex flex-row w-full justify-center items-center"
className="flex flex-row justify-center items-center"
onClick={handleClearAll}
>
<FaUndo className="h-4 w-4 mr-2" />
Temizle
<span className="hidden sm:inline">Temizle</span>
</Button>
<Button
variant="default"
@ -195,30 +192,28 @@ const ClassroomPlannerPage: React.FC = () => {
onClick={handleAutoAssign}
>
<FaBolt className="h-4 w-4 mr-2 text-yellow-400" />
Otomatik Ata
<span className="hidden sm:inline">Otomatik Ata</span>
</Button>
<Button size="sm" className="flex flex-row w-full justify-center items-center">
<Button size="sm" className="flex flex-row justify-center items-center">
<FaSave className="h-4 w-4 mr-2" />
Kaydet
<span className="hidden sm:inline">Kaydet</span>
</Button>
</div>
</div>
</header>
<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 */}
<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="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" />
Öğrenciler ({unassignedStudents.length})
</h2>
</div>
<div className="space-y-3">
<div className="space-y-2 md:space-y-3">
<div className="relative">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
<input
@ -226,12 +221,11 @@ const ClassroomPlannerPage: React.FC = () => {
placeholder="Öğrenci ara..."
value={searchQuery}
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>
<StudentList
students={unassignedStudents}
searchQuery={searchQuery}
@ -243,13 +237,12 @@ const ClassroomPlannerPage: React.FC = () => {
<div className="flex-1 flex flex-col">
<div className="p-2 border-b border-gray-200">
<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" />
Sınıflar
</h2>
</div>
<div className="space-y-3">
<div className="space-y-2 md:space-y-3">
<div className="relative">
<ClassroomSelector
selectedClassroom={selectedClassroom}
@ -258,7 +251,6 @@ const ClassroomPlannerPage: React.FC = () => {
</div>
</div>
</div>
{/* Seat Grid */}
<div className="flex-1 overflow-auto">
{selectedClassroom && (
@ -275,7 +267,7 @@ const ClassroomPlannerPage: React.FC = () => {
</div>
{/* 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
selectedSeats={selectedSeats}
seats={seats}