Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-12 01:36:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

Center text within the banner element

Browse Source 
Adjusted CSS for `.ribbon-text` and related classes in `client/src/pages/image-editor.tsx` to center the text content.

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:36:11 +00:00
1 parent 15fbda3006
commit 1dbdee5d12
2 files changed
+33 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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

After

Width:  |  Height:  |  Size: 263 KiB

client/src/pages/image-editor.tsx
+33 -40
View File
@@ -338,32 +338,26 @@ export default function ImageEditor() {
border-left-color: transparent;
}
.ribbon-label {
position: absolute;
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-label {
transform: rotate(-45deg) translate(-35px, -50px);
}
.ribbon-container.north_east .ribbon-label {
transform: rotate(45deg) translate(35px, -50px);
}
.ribbon-text {
position: absolute;
color: white;
font-weight: bold;
z-index: 11;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
}
.ribbon-container.north_west .ribbon-text {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg) translateY(-20px);
}
.ribbon-container.north_east .ribbon-text {
top: 50%;
right: 50%;
transform: translate(50%, -50%) rotate(45deg) translateY(-20px);
}
`}</style>
@@ -756,25 +750,24 @@ export default function ImageEditor() {
{ribbon.enabled && ribbon.text && (
<div className={`ribbon-container ${ribbon.position}`}>
<div className={`ribbon-triangle ${ribbon.color}`} />
<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
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',
whiteSpace: ribbon.text === "Stock limité" ? 'normal' : 'nowrap'
}}
>
{ribbon.text === "Stock limité" ? (
<>
Stock
<br />
limité
</>
) : ribbon.text}
</div>
</div>
)}