YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleaned the code a bit

Browse Source
This commit is contained in:
Dominic Masters
2018-05-11 20:38:55 +10:00
parent 84e0b496fd
commit 403ec39df3
14 changed files with 48 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/App.jsx
View File

@ -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 {

44
public/content/FloatingContentBox.jsx
View File

@ -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 (
<div className={ clazzes } >
<div className="o-floating-content-box__inner">
{ this.props.children }
</div>
return (
<div className={ clazzes } >
<div className="o-floating-content-box__inner">
{ props.children }
</div>
);
}
</div>
);
}
export default FloatingContentBox;

3
public/input/button/Button.jsx
View File

@ -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;

1
public/language/Language.jsx
View File

@ -72,4 +72,5 @@ class Language {
}
const lang = new Language();
export default lang;

4
public/loading/Loader.jsx
View File

@ -23,7 +23,7 @@
import React from 'react';
const Loader = function(props) {
export default function(props) {
return (
<span className="o-loader">
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" className="o-loader__image">
@ -38,5 +38,3 @@ const Loader = function(props) {
</span>
);
}
export default Loader;

5
public/page/Page.jsx
View File

@ -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 };

4
public/page/PageBoundary.jsx
View File

@ -23,12 +23,10 @@
import React from 'react';
const PageBoundary = (props) => {
export default function(props) {
return (
<div className="c-page__boundary">
{ props.children }
</div>
);
}
export default PageBoundary;

34
public/page/home/Homepage.jsx
View File

@ -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 (
<Page style="home-page">
<VideoSection>
export default function() {
return (
<Page style="home-page">
<VideoSection full>
<PageBoundary>
<FloatingContentBox position="middle right" size="medium" className="u-text-center">
<Title>My Cool Page</Title>
<Subtitle>Lorem ipsum dolor</Subtitle>
<Button>Hello</Button>
</FloatingContentBox>
</VideoSection>
</PageBoundary>
</VideoSection>
<Section full>
Lorem
</Section>
</Page>
);
}
<Section full>
Lorem
</Section>
</Page>
);
}
export default Homepage;

153
public/page/test/KitchenSinkPage.jsx
View File

@ -1,153 +0,0 @@
import React from 'react';
import Page from './../Page';
class KitchenSinkPage extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Page>
<h1>This is the primary heading and there should only be one of these per page</h1>
<p>A small paragraph to <em>emphasis</em> and show <strong>important</strong> bits.</p>
<ul>
<li>This is a list item</li>
<li>So is this - there could be more</li>
<li>Make sure to style list items to:
<ul>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
<li>Not forgetting child list items</li>
</ul></li>
<li>A couple more</li>
<li>top level list items</li>
</ul>
<p>Don't forget <strong>Ordered lists</strong>:</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<h2>A sub heading which is not as important as the first, but is quite imporant overall</h2>
<p>
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.
</p>
<table className="t1" summary="Top 10 downloaded movies in 2011 using BitTorrent, in descending order, listing number of downloads and worldwide cinema grosses">
<caption>
Most Downloaded Movies on BitTorrent, 2011
</caption>
<thead>
<tr>
<th>Rank</th>
<th>Movie</th>
<th>Downloads</th>
<th>Grosses</th>
</tr>
</thead>
<tfoot>
<tr>
<th colSpan="4">torrentfreak.com</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>Fast Five</td>
<td>9,260,000</td>
<td>$626,137,675</td>
</tr>
<tr>
<th>2</th>
<td>The Hangover II</td>
<td>8,840,000</td>
<td>$581,464,305</td>
</tr>
<tr>
<th>3</th>
<td>Thor</td>
<td>8,330,000</td>
<td>$449,326,618</td>
</tr>
<tr>
<th>4</th>
<td>Source Code</td>
<td>7,910,000</td>
<td>$123,278,618</td>
</tr>
<tr>
<th>5</th>
<td>I Am Number Four</td>
<td>7,670,000</td>
<td>$144,500,437</td>
</tr>
<tr>
<th>6</th>
<td>Sucker Punch</td>
<td>7,200,000</td>
<td>$89,792,502</td>
</tr>
<tr>
<th>7</th>
<td>127 Hours</td>
<td>6,910,000</td>
<td>$60,738,797</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
<td>$245,155,348</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,250,000</td>
<td>$414,211,549</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
<td>$1,328,111,219</td>
</tr>
</tbody>
</table>
<h3>A sub heading which is not as important as the second, but should be used with consideration</h3>
<p>
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.
</p>
<blockquote>
<p><em>This is a properly formatted blockquote, btw.</em> Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
<footer>
— <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
</footer>
</blockquote>
<h4>A sub heading which is not as important as the second, but should be used with consideration</h4>
<p>
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.
</p>
<blockquote>
<p>
“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.”
</p>
</blockquote>
</Page>
)
}
}
export default KitchenSinkPage;

8
public/section/Section.jsx
View File

@ -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
}

30
public/section/Sections.jsx
View File

@ -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
};

3
public/typography/Subtitle.jsx
View File

@ -23,11 +23,10 @@
import React from 'react';
const Subtitle = function(props) {
export default function(props) {
return (
<p className={ "o-subtitle" + ( props.className ? " " + props.className : "") }>
{ props.children }
</p>
);
}
export default Subtitle;

3
public/typography/Title.jsx
View File

@ -23,11 +23,10 @@
import React from 'react';
const Title = function(props) {
export default function(props) {
return (
<h1 className={ "o-title" + ( props.className ? " " + props.className : "") }>
{ props.children }
</h1>
);
}
export default Title;

4
public/video/Video.jsx
View File

@ -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;