Merge pull request #3294 from serlo/fix/droppable-blank-size-margins

fix(blank): droppable blank styling improvements
serlo · Jan 18, 2024 · 67c297a · 67c297a
2 parents 61f7cb0 + 01fe6c6
commit 67c297a
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/...ages/editor/src/plugins/fill-in-the-blanks-exercise/components/blank-draggable-answer.tsx b/...ages/editor/src/plugins/fill-in-the-blanks-exercise/components/blank-draggable-answer.tsx
@@ -8,11 +8,12 @@ export const blankDraggableAnswerDragType = 'blank-solution'
 interface BlankDraggableAnswerProps {
   text: string
   draggableId: DraggableId
+  isPending?: boolean
   isAnswerCorrect?: boolean
 }
 
 export function BlankDraggableAnswer(props: BlankDraggableAnswerProps) {
-  const { draggableId, text, isAnswerCorrect } = props
+  const { draggableId, text, isPending, isAnswerCorrect } = props
 
   const [, dragRef] = useDrag({
     type: blankDraggableAnswerDragType,
@@ -22,9 +23,10 @@ export function BlankDraggableAnswer(props: BlankDraggableAnswerProps) {
   return (
     <span
       className={cn(
-        'rounded-full border border-editor-primary-300 bg-editor-primary-100 px-2',
+        'cursor-grab rounded-full border border-editor-primary-300 bg-editor-primary-100 px-2',
         isAnswerCorrect && 'border-green-500',
-        isAnswerCorrect === false && 'border-red-500'
+        isAnswerCorrect === false && 'border-red-500',
+        isPending && 'mr-2'
       )}
       ref={dragRef}
     >

diff --git a/packages/editor/src/plugins/fill-in-the-blanks-exercise/components/droppable-blank.tsx b/packages/editor/src/plugins/fill-in-the-blanks-exercise/components/droppable-blank.tsx
@@ -37,12 +37,12 @@ export function DroppableBlank(props: DroppableBlankProps) {
     <span
       className={cn(
         !children &&
-          'rounded-full border border-editor-primary-300 bg-editor-primary-100 px-2',
+          'rounded-full border border-editor-primary-300 bg-editor-primary-100 px-6 text-editor-primary-100',
         isOver && !isDisabled && 'bg-slate-400'
       )}
       ref={dropRef}
     >
-      {children}
+      {children || '_'}
     </span>
   )
 }
diff --git a/packages/editor/src/plugins/fill-in-the-blanks-exercise/renderer.tsx b/packages/editor/src/plugins/fill-in-the-blanks-exercise/renderer.tsx
@@ -131,7 +131,7 @@ export function FillInTheBlanksRenderer(props: FillInTheBlanksRendererProps) {
           <BlankDraggableArea onDrop={handleDraggableAreaDrop}>
             {draggables.map((draggable, index) =>
               locationOfDraggables.get(draggable.draggableId) ? null : (
-                <BlankDraggableAnswer key={index} {...draggable} />
+                <BlankDraggableAnswer key={index} isPending {...draggable} />
               )
             )}
           </BlankDraggableArea>