fix(toc): حذف نوار اسکرول فهرست مطالب و پهنکردن ستون آن
- ستون فهرست در دسکتاپ از ۱۷rem به ۲۱rem پهنتر شد تا تیترهای بلند جا شوند - نوار اسکرول بومی مرورگر (با فلش) مخفی شد؛ اسکرول با چرخ ماوس/لمس سر جایش است
This commit is contained in:
@@ -110,7 +110,7 @@ export function TableOfContents({ items, title = 'فهرست مطالب', classN
|
|||||||
</p>
|
</p>
|
||||||
<div className="mt-5 h-px w-12 bg-copper/50" aria-hidden="true" />
|
<div className="mt-5 h-px w-12 bg-copper/50" aria-hidden="true" />
|
||||||
{/* ارتفاع فهرست به ارتفاع در دسترس صفحه (زیر نوار چسبان) محدود میشود تا بریده نشود */}
|
{/* ارتفاع فهرست به ارتفاع در دسترس صفحه (زیر نوار چسبان) محدود میشود تا بریده نشود */}
|
||||||
<ul className="mt-4 max-h-[60vh] space-y-0.5 overflow-y-auto border-s border-ivory/10 ps-3 lg:max-h-[calc(100vh_-_15rem)]">
|
<ul className="no-scrollbar mt-4 max-h-[60vh] space-y-0.5 overflow-y-auto border-s border-ivory/10 ps-3 lg:max-h-[calc(100vh_-_15rem)]">
|
||||||
{items.map((item) => {
|
{items.map((item) => {
|
||||||
const isActive = item.id === activeId
|
const isActive = item.id === activeId
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -256,6 +256,15 @@ html[lang='en'] .article-body h3 {
|
|||||||
border: 1px solid rgba(245, 243, 239, 0.1);
|
border: 1px solid rgba(245, 243, 239, 0.1);
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
/* فهرست مطالب: اسکرول بدون نوار اسکرول — چرخ ماوس و لمس کار میکنند */
|
||||||
|
.no-scrollbar {
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
-ms-overflow-style: none; /* IE/Edge legacy */
|
||||||
|
}
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none; /* Chrome / Safari / Edge */
|
||||||
|
}
|
||||||
|
|
||||||
/* ---------- تصویر کپشندار: <figure><img><figcaption> ---------- */
|
/* ---------- تصویر کپشندار: <figure><img><figcaption> ---------- */
|
||||||
.article-body figure {
|
.article-body figure {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
|
|||||||
@@ -92,7 +92,7 @@ export function ArticleDetail() {
|
|||||||
*/
|
*/
|
||||||
const hasToc = toc.length > 0;
|
const hasToc = toc.length > 0;
|
||||||
// در چیدمان راستبهچپ ستون شماره ۱ سمت راست است؛ پس ستونها صریح شماره میخورند
|
// در چیدمان راستبهچپ ستون شماره ۱ سمت راست است؛ پس ستونها صریح شماره میخورند
|
||||||
const gridColumns = hasToc ? 'lg:grid-cols-[17rem_minmax(0,1fr)]' : '';
|
const gridColumns = hasToc ? 'lg:grid-cols-[21rem_minmax(0,1fr)]' : '';
|
||||||
const bodyColumns = 'lg:col-start-2';
|
const bodyColumns = 'lg:col-start-2';
|
||||||
const tocColumns = 'lg:col-start-1';
|
const tocColumns = 'lg:col-start-1';
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user