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