Classroom Responsive hale getirildi.
This commit is contained in:
parent
962c4a5c1d
commit
43f1cf9fe5
2 changed files with 23 additions and 31 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</div>
|
||||
<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 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,9 +251,8 @@ const ClassroomPlannerPage: React.FC = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Seat Grid */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
<div className="flex-1 overflow-auto">
|
||||
{selectedClassroom && (
|
||||
<SeatGrid
|
||||
classroom={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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue