Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-11 17:26:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Adjust ribbon text position and styling within the image editor

Browse Source 
Refactor CSS classes and HTML structure for ribbon text (`.ribbon-text` to `.ribbon-label`) in the image editor, repositioning the text to be within the banner and preventing it from being too close to the edges.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/nlpElis
This commit is contained in:
michaelschal committed 2025-10-13 06:32:47 +00:00
1 parent f208d26d5b
commit fedcea5a19
2 files changed
+37 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

attached_assets/image_1760337078835.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

client/src/pages/image-editor.tsx
+37 -32
View File
@@ -338,28 +338,32 @@ export default function ImageEditor() {
border-left-color: transparent; border-left-color: transparent;
} }
.ribbon-text { .ribbon-label {
position: absolute; position: absolute;
color: white; top: 0;
font-weight: bold; left: 0;
z-index: 11; width: 140px;
text-transform: uppercase; height: 140px;
white-space: nowrap;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 11;
padding: 15px;
} }
.ribbon-container.north_west .ribbon-text { .ribbon-container.north_west .ribbon-label {
top: 50%; transform: rotate(-45deg) translate(-25px, -25px);
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg) translateY(-15px);
} }
.ribbon-container.north_east .ribbon-text { .ribbon-container.north_east .ribbon-label {
top: 50%; transform: rotate(45deg) translate(25px, -25px);
right: 50%; }
transform: translate(50%, -50%) rotate(45deg) translateY(-15px);
.ribbon-text {
color: white;
font-weight: bold;
text-transform: uppercase;
text-align: center;
} }
`}</style> `}</style>
@@ -752,24 +756,25 @@ export default function ImageEditor() {
{ribbon.enabled && ribbon.text && ( {ribbon.enabled && ribbon.text && (
<div className={`ribbon-container ${ribbon.position}`}> <div className={`ribbon-container ${ribbon.position}`}>
<div className={`ribbon-triangle ${ribbon.color}`} /> <div className={`ribbon-triangle ${ribbon.color}`} />
<div <div className="ribbon-label">
className="ribbon-text" <div
style={{ className="ribbon-text"
fontSize: ribbon.text === "Stock limité" ? '20px' : style={{
ribbon.text.length <= 5 ? '28px' : fontSize: ribbon.text === "Stock limité" ? '20px' :
ribbon.text.length <= 8 ? '24px' : ribbon.text.length <= 5 ? '28px' :
ribbon.text.length <= 11 ? '20px' : '16px', ribbon.text.length <= 8 ? '24px' :
lineHeight: ribbon.text === "Stock limité" ? '1.2' : 'normal', ribbon.text.length <= 11 ? '20px' : '16px',
textAlign: ribbon.text === "Stock limité" ? 'center' : 'inherit' lineHeight: ribbon.text === "Stock limité" ? '1.2' : 'normal'
}} }}
> >
{ribbon.text === "Stock limité" ? ( {ribbon.text === "Stock limité" ? (
<> <>
Stock Stock
<br /> <br />
limité limité
</> </>
) : ribbon.text} ) : ribbon.text}
</div>
</div> </div>
</div> </div>
)} )}