Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit f1440bd

Browse files
author
z
committed
floating syllabus as fab added
1 parent 8d62be9 commit f1440bd

File tree

6 files changed

+346
-19
lines changed

6 files changed

+346
-19
lines changed

‎components/learn/floating-syllabus.js

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import React from 'react';
2+
import { slide as Menu } from 'react-burger-menu';
3+
import styled from 'react-emotion';
4+
5+
const Container = styled.div`
6+
/* Position and sizing of burger button */
7+
.bm-burger-button {
8+
position: fixed;
9+
width: 36px;
10+
height: 30px;
11+
left: 0px;
12+
top: 10rem;
13+
}
14+
15+
/* Color/shape of burger icon bars */
16+
.bm-burger-bars {
17+
background: #373a47;
18+
}
19+
20+
/* Position and sizing of clickable cross button */
21+
.bm-cross-button {
22+
height: 24px;
23+
width: 24px;
24+
}
25+
26+
/* Color/shape of close button cross */
27+
.bm-cross {
28+
background: #bdc3c7;
29+
}
30+
31+
/* General sidebar styles */
32+
.bm-menu {
33+
background: #373a47;
34+
padding: 2.5em 1.5em 0;
35+
font-size: 1.15em;
36+
}
37+
38+
/* Morph shape necessary with bubble or elastic */
39+
.bm-morph-shape {
40+
fill: #373a47;
41+
}
42+
43+
/* Wrapper for item list */
44+
.bm-item-list {
45+
color: #b8b7ad;
46+
padding: 0.8em;
47+
}
48+
49+
/* Styling of overlay */
50+
.bm-overlay {
51+
background: rgba(0, 0, 0, 0.3);
52+
}
53+
`;
54+
55+
export default class FloatingSyllabus extends React.Component {
56+
render() {
57+
return (
58+
<Container>
59+
<Menu>
60+
<a id="home" className="menu-item" href="/">
61+
Home
62+
</a>
63+
<a id="about" className="menu-item" href="/about">
64+
About
65+
</a>
66+
<a id="contact" className="menu-item" href="/contact">
67+
Contact
68+
</a>
69+
<a id="home" className="menu-item" href="/">
70+
Home
71+
</a>
72+
<a id="about" className="menu-item" href="/about">
73+
About
74+
</a>
75+
<a id="contact" className="menu-item" href="/contact">
76+
Contact
77+
</a>
78+
<a id="home" className="menu-item" href="/">
79+
Home
80+
</a>
81+
<a id="about" className="menu-item" href="/about">
82+
About
83+
</a>
84+
<a id="contact" className="menu-item" href="/contact">
85+
Contact
86+
</a>
87+
<a id="home" className="menu-item" href="/">
88+
Home
89+
</a>
90+
<a id="about" className="menu-item" href="/about">
91+
About
92+
</a>
93+
<a id="contact" className="menu-item" href="/contact">
94+
Contact
95+
</a>
96+
<a id="home" className="menu-item" href="/">
97+
Home
98+
</a>
99+
<a id="about" className="menu-item" href="/about">
100+
About
101+
</a>
102+
<a id="contact" className="menu-item" href="/contact">
103+
Contact
104+
</a>
105+
<a id="home" className="menu-item" href="/">
106+
Home
107+
</a>
108+
<a id="about" className="menu-item" href="/about">
109+
About
110+
</a>
111+
<a id="contact" className="menu-item" href="/contact">
112+
Contact
113+
</a>
114+
<a id="home" className="menu-item" href="/">
115+
Home
116+
</a>
117+
<a id="about" className="menu-item" href="/about">
118+
About
119+
</a>
120+
<a id="contact" className="menu-item" href="/contact">
121+
Contact
122+
</a>
123+
<a id="home" className="menu-item" href="/">
124+
Home
125+
</a>
126+
<a id="about" className="menu-item" href="/about">
127+
About
128+
</a>
129+
<a id="contact" className="menu-item" href="/contact">
130+
Contact
131+
</a>
132+
<a id="home" className="menu-item" href="/">
133+
Home
134+
</a>
135+
<a id="about" className="menu-item" href="/about">
136+
About
137+
</a>
138+
<a id="contact" className="menu-item" href="/contact">
139+
Contact
140+
</a>
141+
<a id="home" className="menu-item" href="/">
142+
Home
143+
</a>
144+
<a id="about" className="menu-item" href="/about">
145+
About
146+
</a>
147+
<a id="contact" className="menu-item" href="/contact">
148+
Contact
149+
</a>
150+
<a id="home" className="menu-item" href="/">
151+
Home
152+
</a>
153+
<a id="about" className="menu-item" href="/about">
154+
About
155+
</a>
156+
<a id="contact" className="menu-item" href="/contact">
157+
Contact
158+
</a>
159+
<a id="home" className="menu-item" href="/">
160+
Home
161+
</a>
162+
<a id="about" className="menu-item" href="/about">
163+
About
164+
</a>
165+
<a id="contact" className="menu-item" href="/contact">
166+
Contact
167+
</a>
168+
<a id="home" className="menu-item" href="/">
169+
Home
170+
</a>
171+
<a id="about" className="menu-item" href="/about">
172+
About
173+
</a>
174+
<a id="contact" className="menu-item" href="/contact">
175+
Contact
176+
</a>
177+
<a id="home" className="menu-item" href="/">
178+
Home
179+
</a>
180+
<a id="about" className="menu-item" href="/about">
181+
About
182+
</a>
183+
<a id="contact" className="menu-item" href="/contact">
184+
Contact
185+
</a>
186+
<a id="home" className="menu-item" href="/">
187+
Home
188+
</a>
189+
<a id="about" className="menu-item" href="/about">
190+
About
191+
</a>
192+
<a id="contact" className="menu-item" href="/contact">
193+
Contact
194+
</a>
195+
<a id="home" className="menu-item" href="/">
196+
Home
197+
</a>
198+
<a id="about" className="menu-item" href="/about">
199+
About
200+
</a>
201+
<a id="contact" className="menu-item" href="/contact">
202+
Contact
203+
</a>
204+
<a id="home" className="menu-item" href="/">
205+
Home
206+
</a>
207+
<a id="about" className="menu-item" href="/about">
208+
About
209+
</a>
210+
<a id="contact" className="menu-item" href="/contact">
211+
Contact
212+
</a>
213+
</Menu>
214+
</Container>
215+
);
216+
}
217+
}

‎components/learn/subject-banner.js

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,8 @@ const Container = styled.section`
2121
font-size: 10rem;
2222
background: #fff;
2323
${breakpoints.xs} {
24-
font-size: 8rem;
24+
text-align: left;
25+
font-size: 4.5rem;
2526
}
2627
}
2728
& .titles {
@@ -34,13 +35,16 @@ const Container = styled.section`
3435
}
3536
& .edit {
3637
display: block;
38+
${breakpoints.xs} {
39+
display: none;
40+
}
3741
}
3842
`;
3943

4044
export default ({ title, subTitle, icon }) => (
41-
<BannerSection py={[2, 3]} px={[2, 1]}>
45+
<BannerSection py={[1, 3]} px={[2, 1]}>
4246
<Container>
43-
<Flex wrap align={'flex-end'}>
47+
<Flex wrap={false} align={'flex-end'}>
4448
<Box flex={'0 1 auto'}>
4549
<div className="logo">
4650
<i className={icon} />
@@ -50,8 +54,9 @@ export default ({ title, subTitle, icon }) => (
5054
<Title>{title}</Title>
5155
<SubTitle className="domain">{subTitle}</SubTitle>
5256
</Box>
53-
<Box flex={['1 1 auto', '0 1 auto']}>
54-
<Button inverted medium className="edit">
57+
<Box flex={['0 1 auto']}>
58+
<Button inverted medium className="edit
59+
}">
5560
EDIT
5661
</Button>
5762
</Box>

‎package.json

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
"main": "index.js",
66
"scripts": {
77
"test": "xo && jest",
8-
"lint":
9-
"prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo && markdownlint .",
8+
"lint": "prettier 'utils/**/*.js' 'components/**/*.js' 'pages/**/*.js' 'lib/**/*.js' 'hocs/**/*.js' '*.js' --write && xo && markdownlint .",
109
"precommit": "lint-staged",
1110
"analyze": "cross-env ANALYZE=1 next build",
1211
"dev": "cross-env NODE_ENV=development node server.js",
@@ -18,19 +17,32 @@
1817
},
1918
"xo": {
2019
"parser": "babel-eslint",
21-
"extends": ["prettier", "prettier/react", "plugin:react/recommended"],
22-
"env": ["browser", "node"],
20+
"extends": [
21+
"prettier",
22+
"prettier/react",
23+
"plugin:react/recommended"
24+
],
25+
"env": [
26+
"browser",
27+
"node"
28+
],
2329
"rules": {
2430
"linebreak-style": 0,
2531
"react/display-name": 0,
2632
"react/prop-types": 0
2733
},
2834
"space:": 2,
29-
"ignores": ["next.config.js"],
35+
"ignores": [
36+
"next.config.js"
37+
],
3038
"overrides": [
3139
{
3240
"files": "**/__tests__/*.test.js",
33-
"globals": ["describe", "it", "expect"]
41+
"globals": [
42+
"describe",
43+
"it",
44+
"expect"
45+
]
3446
}
3547
]
3648
},
@@ -41,8 +53,16 @@
4153
"jest --findRelatedTests",
4254
"git add"
4355
],
44-
"**/*.md": ["prettier", "markdownlint", "git add"],
45-
".github/CONTRIBUTING.md": ["doctoc", "prettier", "git add"]
56+
"**/*.md": [
57+
"prettier",
58+
"markdownlint",
59+
"git add"
60+
],
61+
".github/CONTRIBUTING.md": [
62+
"doctoc",
63+
"prettier",
64+
"git add"
65+
]
4666
},
4767
"dependencies": {
4868
"babel-plugin-emotion": "^8.0.10",
@@ -62,6 +82,7 @@
6282
"preact-emotion": "^8.0.10",
6383
"prop-types": "^15.5.10",
6484
"react": "^16.0.0",
85+
"react-burger-menu": "^2.1.11",
6586
"react-dom": "^16.0.0",
6687
"react-emotion": "^8.0.10",
6788
"react-event-timeline": "^1.4.0",

‎pages/learn/subject.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@ import { space } from 'styled-system';
44
import { Flex, Box } from 'grid-emotion';
55
import styled from 'react-emotion';
66

7-
import { baseContainer, Title } from '../../utils/base.styles';
7+
import { baseContainer, Title, breakpoints } from '../../utils/base.styles';
88
import Layout from '../../components/common/layout';
99
import BannerSection from '../../components/learn/subject-banner';
1010
import SyllabusTree from '../../components/learn/syllabus-tree/syllabus-tree-container';
1111
import SubjectMarkdown from '../../components/learn/subject-marked';
12+
import FloatingSyllabus from '../../components/learn/floating-syllabus';
1213

1314
import { laravelSyllabus } from '../../utils/mock-data';
1415

@@ -20,6 +21,9 @@ const CurriculumSection = styled.section`
2021
background-color: #fff;
2122
& .box_toc {
2223
border-right: 1px solid #f5f5f5;
24+
${breakpoints.xs} {
25+
display: none;
26+
}
2327
}
2428
& .toc_title {
2529
background-color: #374355;
@@ -74,13 +78,14 @@ export default class Subject extends React.Component {
7478
subTitle="Web Development"
7579
icon="devicon-laravel-plain colored"
7680
/>
77-
<CurriculumSection my={[2, 4]}>
81+
<FloatingSyllabus />
82+
<CurriculumSection my={[0, 4]}>
7883
<Flex column={false}>
79-
<Box width={[0.2]} className="box_toc">
84+
<Box width={[0, 0.2]} className="box_toc">
8085
<div className="toc_title">Table of content</div>
8186
<SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
8287
</Box>
83-
<Box width={[0.8]} px={2}>
88+
<Box width={[1, 0.8]} px={[1, 2]}>
8489
<h2 className="chapter_name">{this.state.activeChapterName}</h2>
8590
<SubjectMarkdown loading={this.state.loading} markdown={this.state.activeChapterContent} />
8691
</Box>

‎utils/base.styles.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,7 @@ export const SubTitle = styled.h3`
107107
${breakpoints.xs} {
108108
font-size: 0.9rem;
109109
text-align: center;
110+
font-weight: 600;
110111
line-height: ${props => (props.small ? '1.4rem' : '1.8rem')};
111112
}
112113
`;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy