Mr.Gay100
/
steelforesight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: move slider navigation bar below cards to align left and right column heights

This commit is contained in:
alireza 2026-08-25 15:51:15 +03:30
parent 2f8984ebaa
commit 11b13a31ae
1 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/src/pages/Home/sections/TechnogenSection.tsx
View File

@ -343,67 +343,6 @@ export default function TechnogenSection() {
}}
className="max-lg:!col-span-1"
>
{/* Slider Navigation Bar */}
{totalPages > 1 && (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '2px 4px',
}}
>
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.75)', fontWeight: 700 }}>
{isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>
{isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
</span>
<button
onClick={goNext}
style={{
width: 26,
height: 26,
borderRadius: '50%',
background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.2)',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.15s',
}}
className="hover:!bg-gold hover:!text-navy"
title={isFa ? 'بعدی' : 'Next'}
>
<ChevronLeft size={14} />
</button>
<button
onClick={goPrev}
style={{
width: 26,
height: 26,
borderRadius: '50%',
background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.2)',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.15s',
}}
className="hover:!bg-gold hover:!text-navy"
title={isFa ? 'قبلی' : 'Previous'}
>
<ChevronRight size={14} />
</button>
</div>
</div>
)}
{/* Slider Content Frame */}
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, justifyContent: 'space-between' }}>
<AnimatePresence mode="wait" custom={direction}>
@ -558,6 +497,69 @@ export default function TechnogenSection() {
</motion.div>
</AnimatePresence>
</div>
{/* Slider Navigation Bar (Below the cards for perfect top alignment) */}
{totalPages > 1 && (
<div
style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '4px 4px 0',
borderTop: '1px solid rgba(255,255,255,0.08)',
marginTop: 2,
}}
>
<div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', fontWeight: 700 }}>
{isFa ? 'سایر یادداشت‌های تحلیلی' : 'Analytical Notes'}
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<span style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', fontWeight: 600 }}>
{isFa ? `${faNum(page + 1)} از ${faNum(totalPages)}` : `${page + 1} of ${totalPages}`}
</span>
<button
onClick={goNext}
style={{
width: 26,
height: 26,
borderRadius: '50%',
background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.2)',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.15s',
}}
className="hover:!bg-gold hover:!text-navy"
title={isFa ? 'بعدی' : 'Next'}
>
<ChevronLeft size={14} />
</button>
<button
onClick={goPrev}
style={{
width: 26,
height: 26,
borderRadius: '50%',
background: 'rgba(255,255,255,0.08)',
border: '1px solid rgba(255,255,255,0.2)',
color: '#fff',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
cursor: 'pointer',
transition: 'all 0.15s',
}}
className="hover:!bg-gold hover:!text-navy"
title={isFa ? 'قبلی' : 'Previous'}
>
<ChevronRight size={14} />
</button>
</div>
</div>
)}
</div>
</div>
</div>