soroushdes/draletaha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move gallery captions and before/after labels below images
CI/CD / CI · dotnet build (push) Successful in 38s
Details
CI/CD / Deploy · drsousan (push) Successful in 57s
Details

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-02 11:47:14 +03:30
parent 60141b78f0
commit 0765d5d3cd
1 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DrSousan.Api/Pages/Index.cshtml
+25 -13
View File
@@ -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 { 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); } .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-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 { border-radius:16px; overflow:hidden; background:var(--white); border:1px solid var(--border); cursor:pointer; display:flex; flex-direction:column; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; } .gallery-img-wrap { aspect-ratio:4/3; position:relative; overflow:hidden; background:linear-gradient(135deg, var(--gold-pale), #EDE0CA); flex-shrink:0; }
.gallery-item:hover img { transform:scale(1.05); } .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 { 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 svg { width:36px; height:36px; }
.gallery-placeholder p { font-size:0.75rem; } .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; } /* Before/After layout */
.gallery-item:hover .gallery-item-overlay { background:rgba(184,149,90,0.15); } .gallery-item.before-after .gallery-img-wrap { display:flex; flex-direction:row; }
.gallery-item.before-after { display:flex; flex-direction:row; }
.gallery-item.before-after .ba-half { flex:1; position:relative; overflow:hidden; } .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 .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: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:var(--border); flex-shrink:0; }
.gallery-item.before-after .ba-divider { width:2px; background:rgba(255,255,255,0.7); flex-shrink:0; } /* Labels row — BELOW the image */
.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; } .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; } .gallery-item[style*="display:none"] { display:none !important; }
/* ─── Testimonials ─────────────────────────────────────────── */ /* ─── Testimonials ─────────────────────────────────────────── */
#testimonials { background:var(--section-bg); } #testimonials { background:var(--section-bg); }
@@ -430,26 +436,32 @@
if (hasBoth) if (hasBoth)
{ {
<div class="gallery-item before-after fade-in" data-cat="@item.Category"> <div class="gallery-item before-after fade-in" data-cat="@item.Category">
<div class="gallery-img-wrap">
<div class="ba-half"> <div class="ba-half">
<img src="@item.BeforeImageUrl" alt="قبل از درمان" loading="lazy"/> <img src="@item.BeforeImageUrl" alt="قبل از درمان" loading="lazy"/>
<span class="ba-label">قبل</span>
</div> </div>
<div class="ba-divider"></div> <div class="ba-divider"></div>
<div class="ba-half"> <div class="ba-half">
<img src="@item.AfterImageUrl" alt="بعد از درمان" loading="lazy"/> <img src="@item.AfterImageUrl" alt="بعد از درمان" loading="lazy"/>
<span class="ba-label">بعد</span> </div>
<div class="gallery-item-overlay"></div>
</div>
<div class="ba-labels">
<span class="ba-label">قبل از درمان</span>
<span class="ba-label">بعد از درمان</span>
</div> </div>
@if (!string.IsNullOrEmpty(item.Caption)) { <div class="gallery-caption">@item.Caption</div> } @if (!string.IsNullOrEmpty(item.Caption)) { <div class="gallery-caption">@item.Caption</div> }
<div class="gallery-item-overlay"></div>
</div> </div>
} }
else if (hasImg) else if (hasImg)
{ {
<div class="gallery-item fade-in" data-cat="@item.Category"> <div class="gallery-item fade-in" data-cat="@item.Category">
<div class="gallery-img-wrap">
<img src="@item.ImageUrl" alt="@item.Caption" loading="lazy"/> <img src="@item.ImageUrl" alt="@item.Caption" loading="lazy"/>
@if (!string.IsNullOrEmpty(item.Caption)) { <div class="gallery-caption">@item.Caption</div> }
<div class="gallery-item-overlay"></div> <div class="gallery-item-overlay"></div>
</div> </div>
@if (!string.IsNullOrEmpty(item.Caption)) { <div class="gallery-caption">@item.Caption</div> }
</div>
} }
} }
} }