Merge pull request Seneca-CDOT#647 from miggs125/restructureFrontEnd

Restructure front end. closes Seneca-CDOT#583 Seneca-CDOT#584

src/frontend/package.json

@@ -22,9 +22,7 @@
     "react-helmet": "^5.2.1"
   },
   "devDependencies": {
-    "json-loader": "^0.5.7",
-    "node-sass": "^4.13.1",
-    "sass": "^1.24.4"
+    "json-loader": "^0.5.7"
   },
   "keywords": [
     "gatsby"
@@ -35,8 +33,7 @@
     "develop": "gatsby develop",
     "start": "npm run develop",
     "serve": "gatsby serve",
-    "clean": "gatsby clean",
-    "compile-sass": "node-sass src/sass/main.scss src/css/style.css -w"
+    "clean": "gatsby clean"
   },
   "repository": {
     "type": "git",

src/frontend/src/sass/components/_backdrop.scss → src/frontend/src/components/Backdrop/Backdrop.css

@@ -7,8 +7,7 @@
   top: 0;
   left: 0;
   animation: transform 0.3s ease-out;
-
-  &.open {
-    display: none;
-  }
+}
+.backdrop.open {
+  display: none;
 }

src/frontend/src/components/Backdrop.js → src/frontend/src/components/Backdrop/Backdrop.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import './Backdrop.css';
+
 const Backdrop = props => (
   <div className={`backdrop ${!props.show ? 'open' : ''}`} onClick={props.click}></div>
 );

src/frontend/src/components/Backdrop/index.js

@@ -0,0 +1,3 @@
+import Backdrop from './Backdrop.jsx';
+
+export default Backdrop;

src/frontend/src/components/shared/HamburgerButton.js → src/frontend/src/components/HamburgerButton/HamburgerButton.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import './HamburgerButton.css';
+
 const HamburgerButton = props => {
   return (
     <button className="hamburger-button" onClick={props.click}>

src/frontend/src/components/HamburgerButton/index.js

@@ -0,0 +1,3 @@
+import HamburgerButton from './HamburgerButton.jsx';
+
+export default HamburgerButton;

src/frontend/src/components/Header/Header.css

@@ -0,0 +1,57 @@
+.header {
+  background-color: #242424;
+  margin: 2rem 0;
+  width: 100vw;
+  height: 7vh;
+  color: #a4d4ff;
+}
+.header.sticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  margin-top: 0;
+}
+.header__navigation {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 1rem;
+}
+.header__navigation-items {
+  font-size: 1.8rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+.header__navigation-item {
+  padding: 0 0.5rem;
+}
+.header__navigation-item a {
+  text-decoration: none;
+}
+.header__navigation-item a:hover,
+.header__navigation-item a:active {
+  outline: none;
+}
+.header__navigation-item a:visited {
+  color: #a4d4ff;
+}
+.header__navigation .spacer {
+  flex: 1;
+}
+.header__title {
+  margin-left: 1rem;
+  color: #a4d4ff;
+}
+.header__title a {
+  text-decoration: none;
+  font-size: 3rem;
+}
+.header__title a:active,
+.header__title a:hover {
+  outline: none;
+}
+.header__title a:visited {
+  color: #a4d4ff;
+}

src/frontend/src/components/Header.js → src/frontend/src/components/Header/Header.jsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import List from './shared/List/List';
-import HamburgerButton from './shared/HamburgerButton';
+import List from '../shared/List/List.jsx';
+import HamburgerButton from '../HamburgerButton';
+
+import './Header.css';
 
 const items = [
   { link: '/', text: 'test' },

src/frontend/src/components/Header/index.js

@@ -0,0 +1,3 @@
+import Header from './Header.jsx';
+
+export default Header;

src/frontend/src/components/Layout/Layout.css

@@ -0,0 +1,12 @@
+.main {
+  margin-top: 10rem;
+  justify-content: center;
+}
+.main__logo {
+  text-align: center;
+  width: 100%;
+}
+.main__logo img {
+  max-height: 30rem;
+  margin: auto;
+}

src/frontend/src/components/layout.js → src/frontend/src/components/Layout/Layout.js

@@ -1,16 +1,16 @@
 import React, { Component } from 'react';
 
-import Header from './Header';
-import SideDrawer from './SideDrawer';
-import Backdrop from './Backdrop';
-import TextArea from './TextArea';
-import Logo from './shared/Logo';
+import Header from '../Header';
+import SideDrawer from '../SideDrawer';
+import Backdrop from '../Backdrop';
+import TextArea from '../TextArea';
+import Logo from '../Logo';
 
-import logo from '../images/logo.svg';
+import logo from '../../images/logo.svg';
 
-import data from '../../../../dummyData.json';
+import data from '../../../../../dummyData.json';
 
-import '../css/style.css';
+import './Layout.css';
 
 const items = [
   { link: '#', text: 'Home' },

src/frontend/src/components/Logo/index.js

@@ -0,0 +1,3 @@
+import Logo from './Logo.jsx';
+
+export default Logo;

src/frontend/src/components/Post/index.js

@@ -0,0 +1,3 @@
+import Post from './Post.jsx';
+
+export default Post;

src/frontend/src/components/SideDrawer/SideDrawer.css

@@ -0,0 +1,42 @@
+.sidedrawer {
+  background-color: rgba(36, 36, 36, 0.9);
+  width: 20vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 200;
+  max-width: 400px;
+  padding: 10px;
+  transform: translateX(-100%);
+  transition: transform 0.3s ease-out;
+  padding-top: 5rem;
+}
+.sidedrawer__logo {
+  text-align: center;
+  max-height: 20rem;
+}
+.sidedrawer__logo img {
+  height: 10rem;
+}
+.sidedrawer.open {
+  transform: translateX(0);
+}
+.sidedrawer__navigation-items {
+  height: 100%;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+}
+.sidedrawer__navigation-item {
+  margin: 5px 5px;
+  text-align: justify;
+}
+.sidedrawer__navigation-item a {
+  display: inline-block;
+  width: 100%;
+  color: #cccccc;
+  font-size: 1.7rem;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(204, 204, 204, 0.2);
+}

src/frontend/src/components/SideDrawer.js → src/frontend/src/components/SideDrawer/SideDrawer.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import List from './shared/List/List';
-import Logo from './shared/Logo';
+import List from '../shared/List';
+import Logo from '../Logo';
+
+import './SideDrawer.css';
 
 const SideDrawer = ({ className, items, show, logo }) => (
   <nav className={`${className} ${show ? 'open' : ''}`}>

src/frontend/src/components/SideDrawer/index.js

@@ -0,0 +1,3 @@
+import SideDrawer from './SideDrawer.jsx';
+
+export default SideDrawer;

src/frontend/src/components/TextArea/TextArea.css

@@ -0,0 +1,11 @@
+.text-area {
+  width: 80vw;
+  background: rgba(255, 255, 255, 0.7);
+  margin: 3rem auto 0;
+  font-size: 1.7rem;
+  padding: 0rem 10rem;
+}
+.text-area .post {
+  padding: 3rem;
+  text-align: center;
+}

src/frontend/src/components/TextArea.js → src/frontend/src/components/TextArea/TextArea.jsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
-import Post from './shared/Post';
+import Post from '../Post/Post.jsx';
+
+import './TextArea.css';
 
 const TextArea = ({ className, posts }) => {
   return (

src/frontend/src/components/TextArea/index.js

@@ -0,0 +1,3 @@
+import TextArea from './TextArea.jsx';
+
+export default TextArea;

src/frontend/src/components/shared/List/ListItem/index.js

@@ -0,0 +1,3 @@
+import ListItem from './ListItem.jsx';
+
+export default ListItem;

src/frontend/src/components/shared/List/index.js

@@ -0,0 +1,3 @@
+import List from './List.jsx';
+
+export default List;