basic design in place for subjects

z · z · commit 981a49b51fd3 · 2017-12-01T21:12:42.000+05:30
diff --git a/pages/learn/subject.js b/pages/learn/subject.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import fetch from 'isomorphic-unfetch';
+import { space } from 'styled-system';
+import { Flex, Box } from 'grid-emotion';
+import styled from 'react-emotion';
 
+import { baseContainer } from '../../utils/base.styles';
 import Layout from '../../components/common/layout';
 import BannerSection from '../../components/learn/subject-banner';
 import SyllabusTree from '../../components/learn/syllabus-tree/syllabus-tree-container';
@@ -10,6 +14,12 @@ import { laravelSyllabus } from '../../utils/mock-data';
 
 const defaultChapter = laravelSyllabus[0].chapters[0].url;
 
+const Container = styled.section`
+  ${baseContainer};
+  ${space};
+  border: 1px solid #b9b9b9;
+  min-height: 80vh;
+`;
 export default class Subject extends React.Component {
   constructor(props) {
     super(props);
@@ -48,8 +58,17 @@ export default class Subject extends React.Component {
           subTitle="Web Development"
           icon="devicon-laravel-plain colored"
         />
-        <SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
-        <MarkedJS loading={this.state.loading} markdown={this.state.chapterContent} />
+        <Container my={[2, 4]}>
+          <Flex column={false} px={[2, 2, 2, 0]}>
+            <Box width={[0.2]}>
+              <div>Table of content</div>
+              <SyllabusTree data={laravelSyllabus} changeChapter={this.changeChapter} />
+            </Box>
+            <Box width={[0.8]}>
+              <MarkedJS loading={this.state.loading} markdown={this.state.chapterContent} />
+            </Box>
+          </Flex>
+        </Container>
       </Layout>
     );
   }
