From 151e1466727f7205703a914eb0fc84d06d39c2a6 Mon Sep 17 00:00:00 2001 From: LeeAFH Date: Fri, 20 Oct 2017 16:26:05 -0400 Subject: [PATCH 1/2] about page styling --- client/src/components/Footer/Footer.css | 42 +++++++++++++++++++++++++ client/src/components/Footer/Footer.js | 26 +++++++++++++++ client/src/components/Footer/index.js | 1 + client/src/pages/about/Aboutpage.js | 30 ++++++++++-------- client/src/pages/reactor/Reactorpage.js | 2 +- 5 files changed, 87 insertions(+), 14 deletions(-) create mode 100644 client/src/components/Footer/Footer.css create mode 100644 client/src/components/Footer/Footer.js create mode 100644 client/src/components/Footer/index.js diff --git a/client/src/components/Footer/Footer.css b/client/src/components/Footer/Footer.css new file mode 100644 index 0000000..9089740 --- /dev/null +++ b/client/src/components/Footer/Footer.css @@ -0,0 +1,42 @@ +.Footer { + height: 300px; + border-top: 1px solid #e0e0e0; + padding-top: 35px; + background-image: url("https://static.skillshare.com/uploads/project/553fecf24f7dccf3168d92d7eca7d200/094d94fa"); + font-size: 38px; + text-shadow: 1px 5px 2px rgba(150, 150, 150, 1); +} + + +h1, h2{ + + text-shadow: 1px 5px 2px rgba(150, 150, 150, 1); +} + +a{ + color: #FF4081; + +} + +/*a:hover{ + + +}*/ + +.infobox{ + + font-family: 'Roboto', sans-serif; + /*text-align: center;*/ +} + +/*information in the list for the Build page */ +.infolist{ + + font-family: 'Roboto', sans-serif; +} + +li, p { + +font-family: 'Roboto', sans-serif; + +} \ No newline at end of file diff --git a/client/src/components/Footer/Footer.js b/client/src/components/Footer/Footer.js new file mode 100644 index 0000000..3c43c10 --- /dev/null +++ b/client/src/components/Footer/Footer.js @@ -0,0 +1,26 @@ +import React, { + Component +} from 'react'; +import "./Footer.css"; + + +class Footer extends Component { + + render() { + return ( + + +
+
+ Made by Team Chain-React.ion +
+
+ + + ); + + } + +} + +export default Footer; \ No newline at end of file diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js new file mode 100644 index 0000000..d6d8d55 --- /dev/null +++ b/client/src/components/Footer/index.js @@ -0,0 +1 @@ +export { default } from "./Footer"; \ No newline at end of file diff --git a/client/src/pages/about/Aboutpage.js b/client/src/pages/about/Aboutpage.js index 4b0030f..d4eea70 100644 --- a/client/src/pages/about/Aboutpage.js +++ b/client/src/pages/about/Aboutpage.js @@ -1,24 +1,28 @@ import React from "react"; import Backgroundimage from "../../components/backgroundimage"; -//import Footer +import Footer from "../../components/Footer"; const Aboutpage = () =>

FISSION

Making Your Components, Easier

- -

- ABOUT PAGE WOOOO~ - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc - aliquet diam tortor, id consequat mauris ullamcorper eu. Orci varius - natoque penatibus et magnis dis parturient montes, nascetur - ridiculus mus. Pellentesque et dui id justo finibus sollicitudin at - et metus. Ut feugiat tellus nec metus commodo, sed suscipit nisi - gravida. Duis eget vestibulum quam, ut porttitor sem. Donec sagittis - mi sollicitudin turpis semper, et interdum risus lobortis. -

- +
+

Welcome to Fission! This application will generate react component based on old-fashion html markups. Insert any html component you like and it will return a React component file and its css file.

+

On the Build page insert your html markups. Currently you can give compiling configuration inline style as tag properties. These options are supported:

+
    +
  • name (file name)
    • +
  • component (stateful || stateless)
    • +
  • group (group component into its own folder)
    • +
  • style (any css markup)
    • +
  • expand (shallow || deep)
    • +
+

Nesting html is supported but this is still a prototype there might be some errors when generating components nesting component

+
+ + +
+
; export default Aboutpage; diff --git a/client/src/pages/reactor/Reactorpage.js b/client/src/pages/reactor/Reactorpage.js index d1c0fd0..c5e9157 100644 --- a/client/src/pages/reactor/Reactorpage.js +++ b/client/src/pages/reactor/Reactorpage.js @@ -8,7 +8,7 @@ import ReactDOM from 'react-dom'; //import Draggable from 'react-draggable'; // The default import { Draggable, Droppable } from 'react-drag-and-drop'; import RaisedButton from "material-ui/RaisedButton"; - import "./Reactorpage.css"; + //import "./Reactorpage.css"; import CodeEditor from "../../components/Editor"; //make a bunch of buttons with this data and label them like drag and drop menu? From 21f6245fa0c5cb3980e40f901c9f523dcc69195d Mon Sep 17 00:00:00 2001 From: LeeAFH Date: Fri, 20 Oct 2017 16:57:51 -0400 Subject: [PATCH 2/2] revising canvas page event listeners --- .../components/Newcompomenu/Newcompomenu.js | 51 +++++++++++-------- client/src/pages/canvas/Canvaspage.js | 13 ++--- 2 files changed, 34 insertions(+), 30 deletions(-) diff --git a/client/src/components/Newcompomenu/Newcompomenu.js b/client/src/components/Newcompomenu/Newcompomenu.js index 41fcb94..bc48470 100644 --- a/client/src/components/Newcompomenu/Newcompomenu.js +++ b/client/src/components/Newcompomenu/Newcompomenu.js @@ -1,34 +1,41 @@ -import React from 'react'; +import React, { Component } from 'react'; import Drawer from 'material-ui/Drawer'; import AppBar from 'material-ui/AppBar'; -import RaisedButton from 'material-ui/RaisedButton'; +import MenuItem from 'material-ui/MenuItem';; +//import RaisedButton from 'material-ui/RaisedButton'; /*this will be the menu where people can select their components' styling*/ -class Newcompomenu extends React.Component { +/*is the mouseover event the right one for this...it seems to be closing */ + class Newcompomenu extends Component { - constructor(props) { - super(props); - this.state = { - open: false - }; - } + constructor(props) { + super(props); + this.state = {open: true}; + } - handleToggle = () => this.setState({ - open: !this.state.open - }); + handleToggle = () => this.setState({open: !this.state.open}); - render() { - return ( -
- - - + handleClose = () => this.setState({open: false}); + + render() { + return ( +
+ + this.setState({open})} + > + Style Option + Style Option + Style Option + Style Option + Style Option
- ); - } + ); + } } export default Newcompomenu; \ No newline at end of file diff --git a/client/src/pages/canvas/Canvaspage.js b/client/src/pages/canvas/Canvaspage.js index 7f6adba..38d4940 100644 --- a/client/src/pages/canvas/Canvaspage.js +++ b/client/src/pages/canvas/Canvaspage.js @@ -1,10 +1,5 @@ import React, { Component } from 'react'; import Container from "reactstrap/lib/Container"; -//import Grid from "reactstrap/lib/Grid"; -//import Col from "reactstrap/lib/Col"; -//import Row from "reactstrap/lib/Row"; -//import NavbarBrandNew from "../components/Navbar"; -//import Sidebarmenunew from "../../components/Sidebarmenunew"; import Newcompomenu from "../../components/Newcompomenu"; import FissionButton from "../../components/FissionButton"; import Previewdisplay from "../../components/Displaycode"; @@ -14,6 +9,8 @@ import CodeEditor from "../../components/Editor"; import ReactDOM from 'react-dom'; import { Draggable, Droppable } from 'react-drag-and-drop'; import RaisedButton from "material-ui/RaisedButton"; + + class Canvaspage extends Component { showData =()=> this.setState({ @@ -32,9 +29,9 @@ onDrop(data){

- Your Reactor page, a space to preview and style your final - selected components before saving a "fission file" - of your work, with the button below + This is your Reactor, a space to preview and style your final + selected components before saving a "Fission file" + of your work with the Fission Button Below.