a tool for shared writing and social publishing
0
fork

Configure Feed

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

fix image alignment

+11 -5
+11 -5
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
··· 40 40 isList?: boolean; 41 41 }) => { 42 42 let b = block; 43 - let alignment = b.alignment; 43 + let alignment = 44 + b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight" 45 + ? "text-right justify-end" 46 + : b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter" 47 + ? "text-center justify-center" 48 + : ""; 44 49 if (!alignment && PubLeafletBlocksImage.isMain(b.block)) 45 - alignment = "lex:pub.leaflet.pages.linearDocument#textAlignCenter"; 50 + alignment = "text-center justify-center"; 46 51 47 52 // non text blocks, they need this padding, pt-3 sm:pt-4, which is applied in each case 48 53 let className = ` 54 + flex 49 55 postBlockWrapper 50 56 pt-1 51 57 ${isList ? "isListItem pb-0 " : "pb-2 last:pb-3 last:sm:pb-4 first:pt-2 sm:first:pt-3"} 52 - ${alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight" ? "text-right" : alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter" ? "text-center" : ""} 58 + ${alignment} 53 59 `; 54 60 55 61 switch (true) { ··· 119 125 } 120 126 case PubLeafletBlocksImage.isMain(b.block): { 121 127 return ( 122 - <div className="relative"> 128 + <div className={`relative flex ${alignment}`}> 123 129 <img 124 130 alt={b.block.alt} 125 131 height={b.block.aspectRatio?.height} 126 132 width={b.block.aspectRatio?.width} 127 - className={`!pt-3 sm:!pt-4 ${className} rounded-md`} 133 + className={`!pt-3 sm:!pt-4 rounded-md ${className}`} 128 134 src={blobRefToSrc(b.block.image.ref, did)} 129 135 /> 130 136 {b.block.alt && (