sybers.fr / leaflet
a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

increased click target for the listmarker to fold children, added hover state to list items with children to indicate foldability

celine 5708b696 bae55821

+20 -12
+3 -1
components/Blocks/TextBlock/index.tsx
··· 51 51 props.type === "heading" || (props.listData && props.nextBlock?.listData) 52 52 ? "pb-0" 53 53 : "pb-2" 54 - } ${first ? "pt-2 sm:pt-3" : "pt-1"}`; 54 + } 55 + ${props.listData ? "!pl-1" : ""} 56 + ${first ? "pt-2 sm:pt-3" : "pt-1"}`; 55 57 56 58 return ( 57 59 <>
+17 -11
components/Blocks/index.tsx
··· 368 368 if (children.length > 0) 369 369 useUIState.getState().toggleFold(props.value); 370 370 }} 371 - className="listMarker shrink-0 flex justify-end relative" 372 - style={{ 373 - width: 374 - props.listData && 375 - `calc(${props.listData.depth} * ${ 376 - props.compact ? "16px" : `var(--list-marker-width))` 377 - }`, 378 - }} 371 + className="listMarker pl-1 pr-2 sm:pr-3" 379 372 > 380 373 <div 381 - className={` ${props.className} ${folded ? " outline outline-1 outline-secondary outline-offset-1" : ""} absolute h-[5px] w-[5px] rounded-full bg-secondary shrink-0 -right-1 374 + className="h-full shrink-0 flex justify-end relative" 375 + style={{ 376 + width: 377 + props.listData && 378 + `calc(${props.listData.depth} * ${ 379 + props.compact ? "16px" : `var(--list-marker-width))` 380 + }`, 381 + }} 382 + > 383 + <div 384 + className={`absolute h-[5px] w-[5px] rounded-full bg-secondary shrink-0 right-0 385 + ${folded ? " outline outline-1 outline-secondary outline-offset-1" : ""} 382 386 ${props.first ? "mt-1 sm:mt-2" : ""} 383 387 ${ 384 388 props.type === "heading" ··· 388 392 ? "top-[15px]" 389 393 : "top-[20px]" 390 394 : "top-[13px]" 391 - }`} 392 - /> 395 + } 396 + ${props.className}`} 397 + /> 398 + </div> 393 399 </button> 394 400 </> 395 401 );