Skip to content

Commit a7406e0

Browse files
gaurav-nelsongaurav-nelson
committed
Redesign TOC as a responsive component
1 parent f8308e7 commit a7406e0

10 files changed

Lines changed: 298 additions & 69 deletions

File tree

‎layouts/blog/single.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@
1818
</div>
1919
</div>
2020
</div>
21-
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
21+
<main class="pf-c-page__main" tabindex="0">
2222
<section class="pf-c-page__main-section">
23+
{{ partial "toc-mobile.html" . }}
2324
<div class="pf-u-display-flex">
25+
{{ partial "toc.html" . }}
2426
<div class="pf-c-content">
2527
<h1>
2628
{{- .Title -}}
@@ -45,7 +47,6 @@ <h1>
4547
{{ .Content }}
4648
</div>
4749
</div>
48-
{{ partial "toc.html" . }}
4950
</div>
5051
</section>
5152
{{ partial "footer.html" . }}

‎layouts/contribute/single.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
{{ partial "menu-contribute.html" . }}
66
</div>
77
</div>
8-
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
8+
<main class="pf-c-page__main" tabindex="0">
99
<section class="pf-c-page__main-section pf-m-fill">
10+
{{ partial "toc-mobile.html" . }}
1011
{{ partial "page-toolbar.html" . }}
1112
<div class="pf-u-display-flex">
13+
{{ partial "toc.html" . }}
1214
<div class="pf-c-content">
1315
{{ .Content }}
1416
</div>
15-
{{ partial "toc.html" . }}
1617
</div>
1718
</section>
1819
{{ partial "footer.html" . }}

‎layouts/learn/single.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
{{ partial "menu-learn.html" . }}
66
</div>
77
</div>
8-
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
8+
<main class="pf-c-page__main" tabindex="0">
99
<section class="pf-c-page__main-section pf-m-fill">
10+
{{ partial "toc-mobile.html" . }}
1011
{{ partial "page-toolbar.html" . }}
1112
<div class="pf-u-display-flex">
13+
{{ partial "toc.html" . }}
1214
<div class="pf-c-content">
1315
{{ .Content }}
1416

@@ -39,7 +41,6 @@
3941
</div>
4042
</div>
4143
</div>
42-
{{ partial "toc.html" . }}
4344
</div>
4445
</section>
4546
{{ partial "footer.html" . }}

‎layouts/partials/footer.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,5 +70,6 @@
7070
<a href="//www.redhat.com" target="top" aria-label="Visit Red Hat.com"><img src="/images/RHlogo.svg" alt="Red Hat logo" width="145px" height="613px"></a><span class="site-copyright">Copyright &copy; {{ now.Year }} Red Hat, Inc. All third-party trademarks are the property of their respective owners.</span>
7171
</div>
7272
<script src="{{ "js/bootstrap.bundle.js" | relURL }}"></script>
73+
<script src="{{ "js/toc.js" | relURL }}"></script>
7374
{{ partial "search-index.html" . }}
7475
</footer>

‎layouts/partials/patterns-index.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
{{ partial "menu-patterns.html" . }}
44
</div>
55
</div>
6-
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
6+
<main class="pf-c-page__main" tabindex="0">
77
<section class="pf-c-page__main-section">
8+
{{ partial "toc-mobile.html" . }}
89
{{ partial "page-toolbar.html" . }}
910
<div class="pf-u-display-flex">
11+
{{ partial "toc.html" . }}
1012
<div class="pf-c-content">
1113
<div class="pf-c-panel pf-m-raised">
1214
<div class="pf-c-panel__main">
@@ -106,7 +108,6 @@ <h1 class="pf-c-title pf-m-4xl">{{ .Title }}</h1>
106108
</div>
107109
</div>
108110
</div>
109-
{{ partial "toc.html" . }}
110111
</div>
111112
</section>
112113
{{ partial "footer.html" . }}

‎layouts/partials/toc-mobile.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{{- $toc := .TableOfContents -}}
2+
{{- if and $toc (not (eq $toc "<nav id=\"TableOfContents\"></nav>")) -}}
3+
4+
{{- $tocHTML := $toc | replaceRE " id=\"TableOfContents\"" "" | replaceRE "<ul>" "<ul class=\"otp-list\">" | replaceRE "<li>" "<li class=\"otp-item\">" | replaceRE "<a" "<a class=\"otp-link\"" -}}
5+
6+
<nav class="otp-mobile" aria-label="On this page">
7+
<button class="otp-mobile__toggle" type="button" aria-expanded="false">
8+
<span class="otp-mobile__label">On this page</span>
9+
<span class="otp-mobile__chevron" aria-hidden="true">
10+
<i class="fas fa-chevron-right"></i>
11+
</span>
12+
<span class="otp-mobile__current">Overview</span>
13+
</button>
14+
<div class="otp-mobile__dropdown">
15+
{{- $tocHTML | safeHTML }}
16+
</div>
17+
</nav>
18+
19+
{{- end -}}

‎layouts/partials/toc.html‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1-
<aside class="pf-c-jump-links pf-m-vertical sticky pf-m-expandable pf-m-non-expandable-on-2xl" aria-label="Table of contents">
2-
<div class="pf-l-stack__item">
3-
<div class="pf-c-jump-links__header">
4-
<div class="pf-c-jump-links__label">
5-
<h1>Table of Contents</h1>
6-
</div>
7-
</div>
8-
{{- .TableOfContents | replaceRE "<ul>" "<ul class=\"pf-c-jump-links__list\">" | replaceRE "<li>" "<li class=\"pf-c-jump-links__item\">" | replaceRE "<a" "<a class=\"pf-c-jump-links__link\"" | safeHTML }}
9-
</div>
1+
{{- $toc := .TableOfContents -}}
2+
{{- if and $toc (not (eq $toc "<nav id=\"TableOfContents\"></nav>")) -}}
3+
4+
{{- $tocHTML := $toc | replaceRE " id=\"TableOfContents\"" "" | replaceRE "<ul>" "<ul class=\"otp-list\">" | replaceRE "<li>" "<li class=\"otp-item\">" | replaceRE "<a" "<a class=\"otp-link\"" -}}
5+
6+
<aside class="otp-desktop" aria-label="On this page">
7+
<div class="otp-desktop__header">
8+
<h2 class="otp-desktop__title">On this page</h2>
9+
</div>
10+
{{- $tocHTML | safeHTML }}
1011
</aside>
12+
13+
{{- end -}}

‎layouts/patterns/single.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
{{ partial "menu-patterns.html" . }}
66
</div>
77
</div>
8-
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
8+
<main class="pf-c-page__main" tabindex="0">
99
<section class="pf-c-page__main-section pf-m-fill">
10+
{{ partial "toc-mobile.html" . }}
1011
{{ partial "page-toolbar.html" . }}
1112
<div class="pf-u-display-flex">
13+
{{ partial "toc.html" . }}
1214
<div class="pf-c-content">
1315
{{ .Content }}
1416

@@ -39,7 +41,6 @@
3941
</div>
4042
</div>
4143
</div>
42-
{{ partial "toc.html" . }}
4344
</div>
4445
</section>
4546
{{ partial "footer.html" . }}

‎static/css/custom.css‎

Lines changed: 152 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,6 @@ td > code {
211211
border-color: #f3f3f3;
212212
}
213213

214-
.pf-c-jump-links__link.pf-m-current,
215-
.pf-c-jump-links__link.pf-m-current:hover,
216-
.pf-c-jump-links__link.pf-m-current:not(.pf-m-expanded)
217-
.pf-c-nav__link {
218-
color: var(--pf-c-nav__link--m-current--Color);
219-
background-color: var(--pf-c-nav__link--m-current--BackgroundColor);
220-
}
221214

222215
/* Makes nav items like accordion items */
223216
/* Need this to unify the look of the pages */
@@ -439,39 +432,172 @@ main.pf-c-page__main {
439432
}
440433
}
441434

442-
/* STICKY NAV ON THE LEFT */
443-
435+
/* Sticky positioning used by CI key sidebar */
444436
.sticky {
437+
position: sticky;
438+
top: 0;
439+
align-self: flex-start;
440+
padding: 40px var(--pf-global--spacer--lg);
441+
}
442+
443+
/* ON THIS PAGE - Desktop sidebar */
444+
445+
.otp-desktop {
445446
max-height: calc(100vh - 76px);
446447
overflow-y: auto;
447-
/* Hide TOC scrollbar IE, Edge & Firefox */
448-
/*-ms-overflow-style: none;
449-
scrollbar-width: none; */
450448
order: 1;
451-
padding: 40px var(--pf-global--spacer--lg) var(--pf-global--spacer--lg)
452-
var(--pf-global--spacer--2xl);
453-
/* flex-grow: 1; */
449+
padding: 40px var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--xl);
454450
background: none;
455451
margin: 0;
456452
position: sticky;
457453
top: 0;
458-
min-width: 250px; /* Reduced from 400px */
454+
max-width: 240px;
455+
flex-shrink: 0;
459456
align-self: flex-start;
460457
z-index: 501;
461458
}
462459

463-
/* Mobile adjustments for sticky navigation */
464-
@media (max-width: 992px) {
465-
.sticky {
466-
position: relative;
467-
min-width: 100%;
468-
max-height: none;
469-
padding: var(--pf-global--spacer--md);
470-
}
460+
.otp-desktop__header {
461+
margin-bottom: 12px;
462+
}
463+
464+
.otp-desktop__title {
465+
font-size: 0.85rem;
466+
font-weight: 600;
467+
text-transform: uppercase;
468+
letter-spacing: 0.05em;
469+
color: var(--pf-global--Color--200, #6a6e73);
470+
margin: 0;
471471
}
472472

473-
.active {
474-
background-color: red;
473+
/* ON THIS PAGE - Mobile collapsible bar */
474+
475+
.otp-mobile {
476+
display: none;
477+
}
478+
479+
/* Shared link/list styles */
480+
481+
.otp-list {
482+
list-style: none;
483+
padding: 0;
484+
margin: 0;
485+
}
486+
487+
.otp-list .otp-list {
488+
padding-left: 16px;
489+
}
490+
491+
.otp-item {
492+
margin: 0;
493+
}
494+
495+
.otp-link {
496+
display: block;
497+
padding: 4px 0;
498+
font-size: 0.85rem;
499+
line-height: 1.4;
500+
color: var(--pf-global--Color--200, #6a6e73);
501+
text-decoration: none;
502+
border-left: 2px solid transparent;
503+
padding-left: 12px;
504+
transition: color 0.15s ease, border-color 0.15s ease;
505+
}
506+
507+
.otp-link:hover {
508+
color: var(--pf-global--link--Color, #06c);
509+
text-decoration: none;
510+
}
511+
512+
.otp-link.active {
513+
color: var(--pf-global--link--Color, #06c);
514+
border-left-color: var(--pf-global--link--Color, #06c);
515+
font-weight: 500;
516+
}
517+
518+
.otp-list .otp-list .otp-link {
519+
font-size: 0.8rem;
520+
}
521+
522+
@media (max-width: 1024px) {
523+
.otp-desktop {
524+
display: none !important;
525+
}
526+
527+
.otp-mobile {
528+
display: block;
529+
width: 100%;
530+
margin-bottom: 0;
531+
position: sticky;
532+
top: 0;
533+
z-index: 500;
534+
background-color: var(--pf-global--BackgroundColor--light-100, #fff);
535+
border-bottom: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
536+
}
537+
538+
.otp-mobile__toggle {
539+
display: flex;
540+
align-items: center;
541+
gap: 8px;
542+
width: 100%;
543+
padding: 10px 15px;
544+
background: none;
545+
border: none;
546+
cursor: pointer;
547+
font-size: 0.85rem;
548+
color: var(--pf-global--Color--200, #6a6e73);
549+
text-align: left;
550+
white-space: nowrap;
551+
overflow: hidden;
552+
}
553+
554+
.otp-mobile__toggle:hover {
555+
color: var(--pf-global--Color--100, #151515);
556+
}
557+
558+
.otp-mobile__label {
559+
font-weight: 600;
560+
flex-shrink: 0;
561+
}
562+
563+
.otp-mobile__chevron {
564+
font-size: 0.65rem;
565+
flex-shrink: 0;
566+
transition: transform 0.2s ease;
567+
}
568+
569+
.otp-mobile.is-open .otp-mobile__chevron {
570+
transform: rotate(90deg);
571+
}
572+
573+
.otp-mobile__current {
574+
color: var(--pf-global--Color--100, #151515);
575+
overflow: hidden;
576+
text-overflow: ellipsis;
577+
white-space: nowrap;
578+
min-width: 0;
579+
}
580+
581+
.otp-mobile__dropdown {
582+
display: none;
583+
padding: 0 15px 12px 15px;
584+
background-color: var(--pf-global--BackgroundColor--light-100, #fff);
585+
}
586+
587+
.otp-mobile.is-open .otp-mobile__dropdown {
588+
display: block;
589+
}
590+
591+
.otp-mobile .otp-link {
592+
padding: 6px 12px;
593+
border-left: none;
594+
}
595+
596+
.otp-mobile .otp-link:hover,
597+
.otp-mobile .otp-link.active {
598+
background-color: var(--pf-global--BackgroundColor--200, #f0f0f0);
599+
border-radius: 4px;
600+
}
475601
}
476602

477603
/* SCROLLSPY */
@@ -490,24 +616,6 @@ nav.ul.li.a {
490616
font-size: 0.8rem;
491617
}
492618

493-
/* Emphasizes that second levels in the toc are further inside*/
494-
aside ul ul {
495-
margin-left: 20px !important;
496-
}
497-
/* Makes the font size smaller inside the TOC */
498-
nav ul ul ul a {
499-
font-size: 0.8rem !important;
500-
}
501-
502-
.pf-c-jump-links__link {
503-
padding-top: 0;
504-
font-size: 0.9rem;
505-
color: var(--pf-global--icon--Color--light);
506-
}
507-
508-
.pf-c-jump-links__link:hover {
509-
color: var(--pf-global--link--Color--light);
510-
}
511619

512620
a code {
513621
display: contents;
@@ -1394,12 +1502,6 @@ h6 .anchor::before {
13941502
display: block !important;
13951503
}
13961504

1397-
/* Hide TOC on tablets and mobile */
1398-
.pf-c-jump-links,
1399-
aside.pf-c-jump-links {
1400-
display: none !important;
1401-
}
1402-
14031505
/* Main content takes full width */
14041506
.pf-c-content {
14051507
width: 100% !important;

0 commit comments

Comments
 (0)