fix: course structure edition bugs

This commit is contained in:
swve 2025-04-06 14:05:54 +02:00
parent db45d8ef31
commit 5fd794e9eb
3 changed files with 55 additions and 52 deletions

View file

@ -127,17 +127,25 @@ function ActivityElement(props: ActivitiyElementProps) {
>
{(provided, snapshot) => (
<div
className="flex flex-col sm:flex-row py-2 px-3 my-2 w-full rounded-md bg-gray-50 text-gray-500 hover:bg-gray-100 hover:scale-102 space-y-2 sm:space-y-0 sm:space-x-2 items-center shadow-md border-1 border-gray-200 nice-shadow transition-all duration-200"
className={`grid grid-cols-[auto_1fr_auto] gap-2 py-2 px-3 my-2 w-full rounded-md text-gray-500
${snapshot.isDragging
? 'nice-shadow bg-white ring-2 ring-blue-500/20 z-50 rotate-1 scale-[1.04]'
: 'nice-shadow bg-gray-50 hover:bg-gray-100 '
}
items-center border-1 border-gray-200`}
key={props.activity.id}
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={{
...provided.draggableProps.style
}}
>
{/* Activity Type Icon */}
<ActivityTypeIndicator activityType={props.activity.activity_type} isMobile={isMobile} />
{/* Centered Activity Name */}
<div className="grow items-center space-x-2 flex mx-auto justify-center">
<div className="flex items-center space-x-2 justify-center">
{selectedActivity === props.activity.id ? (
<div className="chapter-modification-zone text-[7px] text-gray-600 shadow-inner bg-gray-200/60 py-1 px-4 rounded-lg space-x-3">
<input
@ -179,7 +187,7 @@ function ActivityElement(props: ActivitiyElementProps) {
</div>
{/* Edit, View, Publish, and Delete Buttons */}
<div className="flex flex-wrap justify-center sm:justify-end gap-2 w-full sm:w-auto">
<div className="flex items-center gap-2 justify-end">
<ActivityElementOptions activity={props.activity} isMobile={isMobile} />
{/* Publishing */}
<button

View file

@ -72,7 +72,9 @@ function ChapterElement(props: ChapterElementProps) {
>
{(provided, snapshot) => (
<div
className="mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6"
className={`mx-2 sm:mx-4 md:mx-6 lg:mx-10 bg-white rounded-xl nice-shadow px-3 sm:px-4 md:px-6 pt-4 sm:pt-6 ${
snapshot.isDragging ? 'shadow-xl ring-2 ring-blue-500/20 rotate-1' : ''
}`}
key={props.chapter.chapter_uuid}
{...provided.draggableProps}
{...provided.dragHandleProps}
@ -149,23 +151,24 @@ function ChapterElement(props: ChapterElementProps) {
droppableId={props.chapter.chapter_uuid}
type="activity"
>
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
<div className="flex flex-col min-h-[60px]">
{activities.map((activity: any, index: any) => {
return (
<div key={activity.activity_uuid} className="flex items-center ">
<ActivityElement
orgslug={props.orgslug}
course_uuid={props.course_uuid}
activityIndex={index}
activity={activity}
/>
</div>
)
})}
{provided.placeholder}
</div>
{(provided, snapshot) => (
<div
{...provided.droppableProps}
ref={provided.innerRef}
className={`min-h-[60px] rounded-lg transition-colors duration-75 ${
snapshot.isDraggingOver ? 'bg-blue-50/50' : ''
}`}
>
{activities.map((activity: any, index: any) => (
<ActivityElement
key={activity.activity_uuid}
orgslug={props.orgslug}
course_uuid={props.course_uuid}
activityIndex={index}
activity={activity}
/>
))}
{provided.placeholder}
</div>
)}
</Droppable>