rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: improve UI styling for course structure draggable elements

Browse source
This commit is contained in:
swve 2025-03-11 16:58:05 +01:00
parent 006c2c4072
commit 4e2c711227
2 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ActivityElement.tsx
View file

@ -114,7 +114,7 @@ function ActivityElement(props: ActivitiyElementProps) {
> >
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <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 ring-1 ring-inset ring-gray-400/10 nice-shadow" 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"
key={props.activity.id} key={props.activity.id}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps} {...provided.dragHandleProps}
@ -244,7 +244,7 @@ const ActivityTypeIndicator = ({activityType, isMobile} : { activityType: keyof
const {displayName, Icon} = ACTIVITIES[activityType] const {displayName, Icon} = ACTIVITIES[activityType]
return ( return (
<div className={`px-3 text-gray-300 space-x-1 w-28 flex ${isMobile ? 'flex-col' : ''}`}> <div className={`text-gray-300 space-x-1 w-28 flex ${isMobile ? 'flex-col' : ''}`}>
<div className="flex space-x-2 items-center"> <div className="flex space-x-2 items-center">
<Icon className="size-4" />{' '} <Icon className="size-4" />{' '}
<div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle"> <div className="text-xs bg-gray-200 text-gray-400 font-bold px-2 py-1 rounded-full mx-auto justify-center align-middle">

2
apps/web/components/Dashboard/Pages/Course/EditCourseStructure/DraggableElements/ChapterElement.tsx
View file

@ -151,7 +151,7 @@ function ChapterElement(props: ChapterElementProps) {
> >
{(provided) => ( {(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}> <div {...provided.droppableProps} ref={provided.innerRef}>
<div className="flex flex-col"> <div className="flex flex-col min-h-[60px]">
{activities.map((activity: any, index: any) => { {activities.map((activity: any, index: any) => {
return ( return (
<div key={activity.activity_uuid} className="flex items-center "> <div key={activity.activity_uuid} className="flex items-center ">