leaflet.pub
a tool for shared writing and social publishing
adjusting full bleed styling for image blocks
cozylittle.house
+8
-10
+6
-2
components/Blocks/Block.tsx
+6
-2
components/Blocks/Block.tsx
···
393
393
isSelected?: boolean;
394
394
children: React.ReactNode;
395
395
className?: string;
396
+
optionsClassName?: string;
396
397
hasBackground?: "accent" | "page";
397
398
borderOnHover?: boolean;
398
399
hasAlignment?: boolean;
···
422
423
</div>
423
424
{props.isSelected && (
424
425
<NonTextBlockOptions
426
+
optionsClassName={props.optionsClassName}
425
427
areYouSure={props.areYouSure}
426
428
setAreYouSure={props.setAreYouSure}
427
429
/>
···
433
435
let debounced: null | number = null;
434
436
435
437
const NonTextBlockOptions = (props: {
436
-
isCanvas?: boolean;
437
438
areYouSure?: boolean;
438
439
setAreYouSure?: (value: boolean) => void;
440
+
optionsClassName?: string;
439
441
}) => {
440
442
let { rep } = useReplicache();
441
443
let entity_set = useEntitySetContext();
···
453
455
if (isMultiselected) return;
454
456
455
457
return (
456
-
<div className="flex gap-1 absolute -top-[25px] right-2 pb-0.5 pt-1 px-1 rounded-t-md bg-border text-bg-page">
458
+
<div
459
+
className={`flex gap-1 absolute -top-[25px] right-2 pb-0.5 pt-1 px-1 rounded-t-md bg-border text-bg-page ${props.optionsClassName}`}
460
+
>
457
461
{focusedEntityType?.data.value !== "canvas" && (
458
462
<>
459
463
<button
+2
-8
components/Blocks/ImageBlock.tsx
+2
-8
components/Blocks/ImageBlock.tsx
···
133
133
);
134
134
}
135
135
136
-
let imageClassName = isFullBleed
137
-
? ""
138
-
: isSelected
139
-
? "block-border-selected border-transparent! "
140
-
: "block-border border-transparent!";
141
-
142
136
let isLocalUpload = localImages.get(image.data.src);
143
137
144
138
let blockClassName = `
145
139
relative group/image border-transparent! p-0! w-fit!
146
-
${isFullBleed && "-mx-3 sm:-mx-4"}
140
+
${isFullBleed && "-mx-[14px] sm:-mx-[18px] rounded-[0px]! sm:outline-offset-[-16px]! -outline-offset[-12px]!"}
147
141
${isFullBleed ? (isFirst ? "-mt-3 sm:-mt-4" : prevIsFullBleed ? "-mt-1" : "") : ""}
148
142
${isFullBleed ? (isLast ? "-mb-4" : nextIsFullBleed ? "-mb-2" : "") : ""}
149
143
`;
···
153
147
hasAlignment
154
148
isSelected={!!isSelected}
155
149
className={blockClassName}
150
+
optionsClassName="top-[-8px]!"
156
151
>
157
152
{isLocalUpload || image.data.local ? (
158
153
<img
···
171
166
}
172
167
height={image?.data.height}
173
168
width={image?.data.width}
174
-
className={imageClassName}
175
169
/>
176
170
)}
177
171
{altText !== undefined && !props.preview ? (