archive.codeforcause.org/src/views/pages/Course/Major.js at 149d1b56c3b2fa8e1f7891b5041a14e94866ebd8 · codeforcauseorg/archive.codeforcause.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Box, Hidden } from '@material-ui/core';
import Details from './partials/Details';
import Overview from './partials/Overview';
import Topics from './partials/Topics';
import Projects from '../../../components/SidePanel/Projects';

const useStyles = makeStyles(theme => ({
  icon: {
    marginRight: theme.spacing(2)
  },
  root: {
    padding: theme.spacing(10, 10, 10),
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    [theme.breakpoints.down('md')]: {
      padding: theme.spacing(10, 3, 10)
    }
  },
  cardGrid: {
    paddingTop: theme.spacing(8),
    paddingBottom: theme.spacing(8)
  },
  card: {
    height: '100%',
    display: 'flex',
    flexDirection: 'column',
    borderRadius: '10px',
    margin: '12px'
  },
  cardMedia: {
    width: '100%',
    height: 'auto'
    // paddingTop: "56.25%", // 16:9
  },
  cardContent: {},
  chip: {
    colorPrimary: '#B20000'
  },
  extraMargin: {
    marginTop: '15px',
    marginBottom: '0'
  },
  btn: {
    textTransform: 'none'
  },
  paddingCls: {
    paddingLeft: '10px',
    paddingRight: '10px'
  },
  paddingClsxs: {
    padding: 0
  },
  iconSize: {
    fontSize: '32px'
  },
  text: {
    color: '#FFFFFF'
  },
  avatarLarge: {
    width: theme.spacing(16),
    height: theme.spacing(16),
    margin: theme.spacing(4, 0, 2)
  },

  avatarGrid: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '5px'
  },

  slide: {
    perspective: 0, // create perspective
    overflow: 'hidden',
    // relative is a must if you want to create overlapping layers in children
    position: 'relative'
  },
  background: {
    width: '100%',
    height: 'auto',
    backgroundPosition: 'bottom center',
    backgroundSize: 'cover'
  }
}));

export default function Major({ course }) {
  const classes = useStyles();

  return (
    <Grid container className={classes.root}>
      <Box display="flex" flexDirection="row">
        <Box display="flex" flexDirection="column">
          <Details course={course} />

          {/* <Hidden mdUp>
            <Projects projects={course.projects} flat={true} />
          </Hidden> */}

          <Overview course={course} />
          <Topics course={course} />
        </Box>

        <Hidden smDown>
          <Box display="flex" flexDirection="column" mb={3} ml={2}>
            <Projects
              title="Projects you'll make in this course"
              projects={course.projects}
            />
          </Box>
        </Hidden>
      </Box>
    </Grid>
  );
}