Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

feat: Add right rail for desktops #199

Closed
imbhargav5 wants to merge 7 commits into from
Closed

feat: Add right rail for desktops #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b10a24a
feat: Add right rails work in progress
imbhargav5 Mar 15, 2019
9538231
feat: Add right rails on desktop
imbhargav5 Apr 4, 2019
8adb53a
fix: Prettier
imbhargav5 Apr 4, 2019
e259559
fix: Update styles as per review
imbhargav5 Apr 10, 2019
f849ca9
fix: Prettier formatting
imbhargav5 Apr 10, 2019
8b99a64
Merge branch 'master' into feat/right-rail
MylesBorins Apr 28, 2020
2222427
Merge branch 'master' into feat/right-rail
MylesBorins Apr 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 57 additions & 4 deletions src/components/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ code[class*="language-"] {

main {
display: grid;
grid-template-columns: 420px auto;
grid-template-columns: 420px auto 400px;
}

:focus {
Expand Down Expand Up @@ -169,7 +169,7 @@ main {
.hero {
align-items: center;
display: flex;
grid-column-end: 3;
grid-column-end: 4;
grid-column-start: 1;
height: var(--hero-height);
position: sticky;
Expand Down Expand Up @@ -401,9 +401,62 @@ main {
font-weight: 400;
line-height: 1.58;
letter-spacing: -.003em;
max-width: 768px;
padding-left: 4.2rem;
width: calc(100% - 36.0rem);
}

.toc-desktop{
display : hidden;
overflow: hidden;
position: sticky;
top: 140px;
width: 100%;
z-index: 998;
padding: 0 2.4rem;
height: calc(100vh - var(--nav-height));
}

.toc-desktop__nav{
position: sticky;
top : 0;
}
.toc-desktop__nav ul {
text-align: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 1.2rem;
}

.toc-desktop__heading{
padding: 1.2rem;
font-weight: normal;
font-size: 1.4rem;
color: var(--gray7);
margin-bottom: 1rem;
}

.toc-desktop__nav a {
color: var(--gray9);
text-decoration: none;
display: block;
align-items: center;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
line-height: 2.4rem;
list-style: none;
padding: 1.2rem;
position: relative;
width: calc(100% - 4.8rem);
}

@media(min-width:1263px){
.toc{
display : none;
}
.toc-desktop{
display : block;
}
}

/* sr-only for desktop */
Expand Down
19 changes: 19 additions & 0 deletions src/components/toc-desktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';

type Props = {
heading: string;
tableOfContents: string;
};

function TOCDesktop({ heading, tableOfContents }: Props) {
return (
<div className="toc-desktop">
<nav className="toc-desktop__nav">
<h6 className="toc-desktop__heading">{heading}</h6>
<div dangerouslySetInnerHTML={{ __html: tableOfContents }} />
</nav>
</div>
);
}

export default TOCDesktop;
7 changes: 7 additions & 0 deletions src/templates/learn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Hero from '../components/hero';
import Layout from '../components/layout';
import Navigation from '../components/navigation';
import { LearnPageContext, LearnPageData } from '../types';
import TOCDesktop from '../components/toc-desktop';

type Props = {
data: LearnPageData;
Expand Down Expand Up @@ -35,6 +36,12 @@ export default ({
previous={previous}
relativePath={relativePath}
/>
{tableOfContents && (
<TOCDesktop
heading="TABLE OF CONTENTS"
tableOfContents={tableOfContents}
/>
)}
</Layout>
);
};
Expand Down