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

fix: Badge template floating element covers toggle, makes it hard to close for when don't want to choose in editor page #366

Browse source
This commit is contained in:
swve 2024-11-28 22:51:06 +01:00
parent a6506d5339
commit 8acceb5ba9
1 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

12
apps/web/components/Objects/Editor/Extensions/Badges/BadgesExtension.tsx
View file

@ -135,13 +135,11 @@ const BadgesExtension: React.FC = (props: any) => {
return ( return (
<NodeViewWrapper> <NodeViewWrapper>
<div className='flex space-x-2 items-center'> <div className='flex space-x-2 items-center relative'>
<div <div className={twMerge(
className={twMerge(
'flex space-x-1 py-1.5 items-center w-fit rounded-full outline outline-2 outline-white/20 px-3.5 font-semibold nice-shadow text-sm my-2', 'flex space-x-1 py-1.5 items-center w-fit rounded-full outline outline-2 outline-white/20 px-3.5 font-semibold nice-shadow text-sm my-2',
getBadgeColor(color) getBadgeColor(color)
)} )}>
>
<div className="flex items-center justify-center space-x-1"> <div className="flex items-center justify-center space-x-1">
<span className='text'>{emoji}</span> <span className='text'>{emoji}</span>
{isEditable && ( {isEditable && (
@ -176,6 +174,7 @@ const BadgesExtension: React.FC = (props: any) => {
</div> </div>
)} )}
</div> </div>
{isEditable && ( {isEditable && (
<button <button
onClick={() => setShowPredefinedCallouts(!showPredefinedCallouts)} onClick={() => setShowPredefinedCallouts(!showPredefinedCallouts)}
@ -184,8 +183,9 @@ const BadgesExtension: React.FC = (props: any) => {
<ChevronRight size={16} /> <ChevronRight size={16} />
</button> </button>
)} )}
{isEditable && showPredefinedCallouts && ( {isEditable && showPredefinedCallouts && (
<div className='flex flex-wrap gap-2 absolute mt-8 bg-white/90 backdrop-blur-md p-2 rounded-lg nice-shadow'> <div className='flex flex-wrap gap-2 absolute top-full mt-2 left-0 bg-white/90 backdrop-blur-md p-2 rounded-lg nice-shadow z-10'>
{predefinedBadges.map((badge, index) => ( {predefinedBadges.map((badge, index) => (
<button <button
key={index} key={index}