From 403ec39df360938ef9e4e9b653f7d9533c989ca9 Mon Sep 17 00:00:00 2001 From: Dominic Masters Date: Fri, 11 May 2018 20:38:55 +1000 Subject: [PATCH] Cleaned the code a bit --- public/App.jsx | 1 - public/content/FloatingContentBox.jsx | 44 +++----- public/input/button/Button.jsx | 3 +- public/language/Language.jsx | 1 + public/loading/Loader.jsx | 4 +- public/page/Page.jsx | 5 +- public/page/PageBoundary.jsx | 4 +- public/page/home/Homepage.jsx | 34 +++--- public/page/test/KitchenSinkPage.jsx | 153 -------------------------- public/section/Section.jsx | 8 +- public/section/Sections.jsx | 30 ----- public/typography/Subtitle.jsx | 3 +- public/typography/Title.jsx | 3 +- public/video/Video.jsx | 4 +- 14 files changed, 48 insertions(+), 249 deletions(-) delete mode 100644 public/page/test/KitchenSinkPage.jsx delete mode 100644 public/section/Sections.jsx diff --git a/public/App.jsx b/public/App.jsx index fe1ecf1..cc344db 100644 --- a/public/App.jsx +++ b/public/App.jsx @@ -26,7 +26,6 @@ import Navbar from './nav/navbar/Navbar'; import { HashRouter, Route, Switch } from 'react-router-dom'; //Pages -import KitchenSinkPage from './page/test/KitchenSinkPage'; import Homepage from './page/home/Homepage'; class App extends React.Component { diff --git a/public/content/FloatingContentBox.jsx b/public/content/FloatingContentBox.jsx index bc2b0f2..8e626c4 100644 --- a/public/content/FloatingContentBox.jsx +++ b/public/content/FloatingContentBox.jsx @@ -23,35 +23,27 @@ import React from 'react'; -class FloatingContentBox extends React.Component { - constructor(props) { - super(props); - } +export default function(props) { + let clazzes = "o-floating-content-box"; - render() { - let clazzes = "o-floating-content-box"; + //Positions + let position = "middle center"; + if(props.position) position = props.position; + clazzes += " " + position.split(" ").map(i => 'is-'+i).join(" "); - //Positions - let position = "middle center"; - if(this.props.position) position = this.props.position; - clazzes += " " + position.split(" ").map(i => 'is-'+i).join(" "); + //Sizes` + let size = "medium"; + if(props.size) size = props.size; + clazzes += " is-"+size; - //Sizes` - let size = "medium"; - if(this.props.size) size = this.props.size; - clazzes += " is-"+size; + //Custom Classes + if(props.className) clazzes += " " + props.className; - //Custom Classes - if(this.props.className) clazzes += " " + this.props.className; - - return ( -
-
- { this.props.children } -
+ return ( +
+
+ { props.children }
- ); - } +
+ ); } - -export default FloatingContentBox; diff --git a/public/input/button/Button.jsx b/public/input/button/Button.jsx index e4f2ba4..433f3d8 100644 --- a/public/input/button/Button.jsx +++ b/public/input/button/Button.jsx @@ -24,7 +24,7 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; -class Button extends React.Component { +export default class Button extends React.Component { constructor(props) { super(props); } @@ -84,4 +84,3 @@ class Button extends React.Component { ); } } -export default Button; diff --git a/public/language/Language.jsx b/public/language/Language.jsx index ec831ce..35b003f 100644 --- a/public/language/Language.jsx +++ b/public/language/Language.jsx @@ -72,4 +72,5 @@ class Language { } const lang = new Language(); + export default lang; diff --git a/public/loading/Loader.jsx b/public/loading/Loader.jsx index 6e2595f..3f5afbc 100644 --- a/public/loading/Loader.jsx +++ b/public/loading/Loader.jsx @@ -23,7 +23,7 @@ import React from 'react'; -const Loader = function(props) { +export default function(props) { return ( @@ -38,5 +38,3 @@ const Loader = function(props) { ); } - -export default Loader; diff --git a/public/page/Page.jsx b/public/page/Page.jsx index 27dd3e0..d7dc4c3 100644 --- a/public/page/Page.jsx +++ b/public/page/Page.jsx @@ -22,8 +22,9 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; +import PageBoundary from './PageBoundary'; -class Page extends React.Component { +export default class Page extends React.Component { constructor(props) { super(props); } @@ -37,4 +38,4 @@ class Page extends React.Component { } } -export default Page; +export { PageBoundary }; diff --git a/public/page/PageBoundary.jsx b/public/page/PageBoundary.jsx index e0fb1d4..690f947 100644 --- a/public/page/PageBoundary.jsx +++ b/public/page/PageBoundary.jsx @@ -23,12 +23,10 @@ import React from 'react'; -const PageBoundary = (props) => { +export default function(props) { return (
{ props.children }
); } - -export default PageBoundary; diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx index 1db6ee2..64b393b 100644 --- a/public/page/home/Homepage.jsx +++ b/public/page/home/Homepage.jsx @@ -22,34 +22,28 @@ // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. import React from 'react'; -import Page from './../Page'; -import { Section, VideoSection } from './../../section/Sections'; +import Page, { PageBoundary } from './../Page'; +import Section, { VideoSection } from './../../section/Section'; import FloatingContentBox from './../../content/FloatingContentBox'; import { Button } from './../../input/Inputs'; import { Title, Subtitle } from './../../typography/Typography'; -class Homepage extends React.Component { - constructor(props) { - super(props); - } - - render() { - return ( - - +export default function() { + return ( + + + My Cool Page Lorem ipsum dolor - + + -
- Lorem -
- - ); - } +
+ Lorem +
+ + ); } - -export default Homepage; diff --git a/public/page/test/KitchenSinkPage.jsx b/public/page/test/KitchenSinkPage.jsx deleted file mode 100644 index f1fe758..0000000 --- a/public/page/test/KitchenSinkPage.jsx +++ /dev/null @@ -1,153 +0,0 @@ -import React from 'react'; - -import Page from './../Page'; - -class KitchenSinkPage extends React.Component { - constructor(props) { - super(props); - } - - render() { - return ( - -

This is the primary heading and there should only be one of these per page

-

A small paragraph to emphasis and show important bits.

-
    -
  • This is a list item
    • -
  • So is this - there could be more
    • -
  • Make sure to style list items to: -
      -
    • Not forgetting child list items
      • -
    • Not forgetting child list items
      • -
    • Not forgetting child list items
      • -
    • Not forgetting child list items
      • -
    • -
  • A couple more
    • -
  • top level list items
    • -
-

Don't forget Ordered lists:

-
    -
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. -
  2. Aliquam tincidunt mauris eu risus. -
      -
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      2. -
    2. Aliquam tincidunt mauris eu risus.
      3. -
    -
    3. -
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    4. -
  4. Aliquam tincidunt mauris eu risus.
    5. -
- -

A sub heading which is not as important as the first, but is quite imporant overall

-

- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Most Downloaded Movies on BitTorrent, 2011 -
RankMovieDownloadsGrosses
torrentfreak.com
1Fast Five9,260,000$626,137,675
2The Hangover II8,840,000$581,464,305
3Thor8,330,000$449,326,618
4Source Code7,910,000$123,278,618
5I Am Number Four7,670,000$144,500,437
6Sucker Punch7,200,000$89,792,502
7127 Hours6,910,000$60,738,797
8Rango6,480,000$245,155,348
9The King’s Speech6,250,000$414,211,549
10Harry Potter and the Deathly Hallows Part 26,030,000$1,328,111,219
- -

A sub heading which is not as important as the second, but should be used with consideration

-

- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. -

- -
-

This is a properly formatted blockquote, btw. Measuring programming progress by lines of code is like measuring aircraft building progress by weight.

- -
- -

A sub heading which is not as important as the second, but should be used with consideration

-

- Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. -

-
-

- “Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.” -

-
- - ) - } -} - -export default KitchenSinkPage; diff --git a/public/section/Section.jsx b/public/section/Section.jsx index 8a2b025..5ebf9de 100644 --- a/public/section/Section.jsx +++ b/public/section/Section.jsx @@ -23,7 +23,7 @@ import React from 'react'; -class Section extends React.Component { +export default class Section extends React.Component { constructor(props) { super(props); } @@ -41,4 +41,8 @@ class Section extends React.Component { } } -export default Section; +import VideoSection from './video/VideoSection'; + +export { + VideoSection +} diff --git a/public/section/Sections.jsx b/public/section/Sections.jsx deleted file mode 100644 index e4a466f..0000000 --- a/public/section/Sections.jsx +++ /dev/null @@ -1,30 +0,0 @@ -// Copyright (c) 2018 Dominic Masters -// -// MIT License -// -// Permission is hereby granted, free of charge, to any person obtaining -// a copy of this software and associated documentation files (the -// "Software"), to deal in the Software without restriction, including -// without limitation the rights to use, copy, modify, merge, publish, -// distribute, sublicense, and/or sell copies of the Software, and to -// permit persons to whom the Software is furnished to do so, subject to -// the following conditions: -// -// The above copyright notice and this permission notice shall be -// included in all copies or substantial portions of the Software. -// -// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF -// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE -// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION -// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION -// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. - -import Section from './Section'; -import VideoSection from './video/VideoSection'; - -export { - Section, - VideoSection -}; diff --git a/public/typography/Subtitle.jsx b/public/typography/Subtitle.jsx index 8296758..d9994ba 100644 --- a/public/typography/Subtitle.jsx +++ b/public/typography/Subtitle.jsx @@ -23,11 +23,10 @@ import React from 'react'; -const Subtitle = function(props) { +export default function(props) { return (

{ props.children }

); } -export default Subtitle; diff --git a/public/typography/Title.jsx b/public/typography/Title.jsx index 5df125b..c7b7ed7 100644 --- a/public/typography/Title.jsx +++ b/public/typography/Title.jsx @@ -23,11 +23,10 @@ import React from 'react'; -const Title = function(props) { +export default function(props) { return (

{ props.children }

); } -export default Title; diff --git a/public/video/Video.jsx b/public/video/Video.jsx index 93c9c21..a926213 100644 --- a/public/video/Video.jsx +++ b/public/video/Video.jsx @@ -31,7 +31,7 @@ const VALID_SOURCES = [ "ogg" ] -class Video extends React.Component { +export default class Video extends React.Component { constructor(props) { super(props); @@ -125,5 +125,3 @@ class Video extends React.Component { ); } } - -export default Video;