Thanks to visit codestin.com
Credit goes to github.com

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)