From 0765d5d3cd7e3f7654f4facd2ae34000dffddf95 Mon Sep 17 00:00:00 2001 From: "soroush.asadi" Date: Tue, 2 Jun 2026 11:47:14 +0330 Subject: [PATCH] fix: move gallery captions and before/after labels below images MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Instead of overlaying text on top of the image (hard to read), restructure each gallery card to flex-column: - Image section (.gallery-img-wrap) on top with aspect-ratio:4/3 - Before/After labels row (.ba-labels) below the image, full text visible - Caption (.gallery-caption) below that, with padding and border Labels now show full text 'قبل از درمان' / 'بعد از درمان' in a clean row under the split image — never overlapping, always readable. Co-Authored-By: Claude Sonnet 4.5 --- DrSousan.Api/Pages/Index.cshtml | 50 ++++++++++++++++++++------------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/DrSousan.Api/Pages/Index.cshtml b/DrSousan.Api/Pages/Index.cshtml index 025490f..b07ffb3 100644 --- a/DrSousan.Api/Pages/Index.cshtml +++ b/DrSousan.Api/Pages/Index.cshtml @@ -111,21 +111,27 @@ .tab-btn { background:transparent; border:1.5px solid var(--border); color:var(--mid); padding:0.45rem 1.2rem; border-radius:50px; font-family:'Vazirmatn',sans-serif; font-size:0.85rem; cursor:pointer; transition:all 0.25s; } .tab-btn.active, .tab-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--white); } .gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; } - .gallery-item { border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg, var(--gold-pale), #EDE0CA); position:relative; cursor:pointer; } - .gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; } - .gallery-item:hover img { transform:scale(1.05); } + .gallery-item { border-radius:16px; overflow:hidden; background:var(--white); border:1px solid var(--border); cursor:pointer; display:flex; flex-direction:column; } + .gallery-img-wrap { aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--gold-pale), #EDE0CA); flex-shrink:0; } + .gallery-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; display:block; } + .gallery-item:hover .gallery-img-wrap img { transform:scale(1.05); } + .gallery-item-overlay { position:absolute; inset:0; background:rgba(184,149,90,0); transition:background 0.3s; } + .gallery-item:hover .gallery-item-overlay { background:rgba(184,149,90,0.15); } .gallery-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; color:var(--gold); opacity:0.45; } .gallery-placeholder svg { width:36px; height:36px; } .gallery-placeholder p { font-size:0.75rem; } - .gallery-item-overlay { position:absolute; inset:0; background:rgba(184,149,90,0); display:flex; align-items:center; justify-content:center; transition:background 0.3s; } - .gallery-item:hover .gallery-item-overlay { background:rgba(184,149,90,0.15); } - .gallery-item.before-after { display:flex; flex-direction:row; } + /* Before/After layout */ + .gallery-item.before-after .gallery-img-wrap { display:flex; flex-direction:row; } .gallery-item.before-after .ba-half { flex:1; position:relative; overflow:hidden; } .gallery-item.before-after .ba-half img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; } .gallery-item.before-after:hover .ba-half img { transform:scale(1.05); } - .gallery-item.before-after .ba-label { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.58); color:#fff; font-size:0.72rem; line-height:1.35; padding:4px 10px; border-radius:14px; white-space:normal; word-break:break-word; text-align:center; width:calc(100% - 10px); max-width:90%; pointer-events:none; box-sizing:border-box; display:block; } - .gallery-item.before-after .ba-divider { width:2px; background:rgba(255,255,255,0.7); flex-shrink:0; } - .gallery-caption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,0.5)); color:#fff; font-size:0.75rem; padding:1.2rem 0.8rem 0.5rem; text-align:center; pointer-events:none; } + .gallery-item.before-after .ba-divider { width:2px; background:var(--border); flex-shrink:0; } + /* Labels row — BELOW the image */ + .ba-labels { display:flex; flex-shrink:0; } + .ba-label { flex:1; text-align:center; padding:6px 8px; font-size:0.78rem; font-weight:600; color:var(--mid); border-top:1px solid var(--border); line-height:1.3; word-break:break-word; } + .ba-label:first-child { border-left:1px solid var(--border); } + /* Caption row — BELOW image (or below labels for before/after) */ + .gallery-caption { padding:0.55rem 0.8rem; font-size:0.8rem; color:var(--mid); text-align:center; border-top:1px solid var(--border); line-height:1.5; word-break:break-word; } .gallery-item[style*="display:none"] { display:none !important; } /* ─── Testimonials ─────────────────────────────────────────── */ #testimonials { background:var(--section-bg); } @@ -430,25 +436,31 @@ if (hasBoth) {
-
- قبل از درمان - قبل +
+
+ قبل از درمان +
+
+
+ بعد از درمان +
+
-
-
- بعد از درمان - بعد +
+ قبل از درمان + بعد از درمان
@if (!string.IsNullOrEmpty(item.Caption)) {
@item.Caption
} -
} else if (hasImg) {
- @item.Caption +
+ @item.Caption +
+
@if (!string.IsNullOrEmpty(item.Caption)) {
@item.Caption
} -
} }