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

Cleaned Footer Code, beginning to compontentize SCSS

Browse Source
This commit is contained in:
Dominic Masters
2018-10-23 17:56:05 +11:00
parent 0b52fd1550
commit fa24078037
7 changed files with 81 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/components/footer/Footer.jsx
View File

@ -23,27 +23,35 @@
import React from 'react';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import FooterStyles from './Footer.scss';
import Language from '@public/language/Language';
import { NavLink } from 'react-router-dom'
import { PageBoundary } from '@components/page/Page';
const FooterLink = function(props) {
let key = "footer.links." + props.title;
const FooterLink = (props) => {
let { title, className } = props;
return (
<NavLink to={ props.to } className="c-footer__link">
{ Language.get(key) }
<NavLink {...props} className={"c-footer__link"+(className?` ${className}`:``}>
{ Language.get(`footer.links.${title}`) }
</NavLink>
);
}
const SITE_LAUNCH_TIMESTAMP = 1335830400000;
class Footer extends React.Component {
constructor(props) {
super(props);
}
render() {
let { className } = this.props;
return (
<footer className="c-footer">
<footer {...this.props} className={"c-footer"+(className?` ${className}`:``}>
<div className="c-footer__part">
</div>
@ -57,7 +65,7 @@ class Footer extends React.Component {
</nav>
<div className="c-footer__copyright">
&copy; { new Date(1335830400000).getFullYear() }
&copy; { new Date(SITE_LAUNCH_TIMESTAMP).getFullYear() }
~
{ new Date().getFullYear() } Dominic Masters
</div>
@ -68,7 +76,7 @@ class Footer extends React.Component {
}
}
const mapStateToProps = function(state) {
const mapStateToProps = (state) => {
return {
code: state.language.code
}

2
public/styles/components/_footer.scss → public/components/footer/Footer.scss
View File

@ -20,7 +20,7 @@ $c-footer--link-hover-color: blue;
padding-bottom: 10em;
position: relative;
overflow: hidden;
background-image: url($s-asset--directory+'images/banners/palms.svg');
background-image: url('@images/banners/palms.svg');
background-size: cover;
&__inner {

2
public/components/header/Header.jsx
View File

@ -26,7 +26,7 @@ import Navbar from '@components/nav/navbar/Navbar';
export default function(props) {
return (
<header role="banner">
<header {...props} role="banner">
<Navbar />
</header>
);

4
public/index.jsx
View File

@ -33,8 +33,8 @@ import RootReducer from './reducers/RootReducer';
import Keyboard from './keyboard/Keyboard';
//Import Stylesheet
import Styles from './styles/index';
//Import Common Elements Stylesheet
import Styles from './styles/common';
//Import Base Component
import App from './components/App';

51
public/styles/common.scss Normal file
View File

@ -0,0 +1,51 @@
// 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.
/*
* Common Stylesheet
* Provides common element styling, particularly those that do not have a
* component to go by.
*
* Version:
* 2.0.0 - 2018/10/23
*/
@import './global.scss';
//Elements
@import './elements/all.scss';
@import './elements/button.scss';
@import './elements/html.scss';
@import './elements/img.scss';
@import './elements/inputs.scss';
@import './elements/_a.scss';
@import './elements/_body.scss';
@import './elements/_headings.scss';
//Utilities
@import './utilities/text-align.scss';
@import './utilities/_responsive.scss';
//Vendor
@import './vendor/_fonts.scss';

67
public/styles/index.scss → public/styles/global.scss
View File

@ -21,6 +21,14 @@
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
/*
* Global Stylesheet
* Global stylesheet provides tools and common utilities for use throughout
* all stylesheets. This includes settings, mixins and pseudo-classes.
*
* Version:
* 1.0.0 - 2018/10/23
*/
@charset "UTF-8";
//Settings
@ -45,62 +53,3 @@
@import './tools/_absolute-centering.scss';
@import './tools/_input.scss';
@import './tools/_shadow.scss';
//Resets
//Elements
@import './elements/all.scss';
@import './elements/button.scss';
@import './elements/html.scss';
@import './elements/img.scss';
@import './elements/inputs.scss';
@import './elements/_a.scss';
@import './elements/_body.scss';
@import './elements/_headings.scss';
//Objects
@import './objects/_background.scss';
@import './objects/_button.scss';
@import './objects/_box-sizer.scss';
@import './objects/_content-box.scss';
@import './objects/_element-scroll-fader.scss';
@import './objects/_floating-content-box.scss';
@import './objects/_form.scss';
@import './objects/_input.scss';
@import './objects/_loadable-image.scss';
@import './objects/_loader.scss';
@import './objects/_modal.scss';
@import './objects/_page-transition.scss';
@import './objects/_title.scss';
@import './objects/_video.scss';
@import './objects/_window95.scss';
//Components
@import './components/_app.scss';
@import './components/_body-section.scss';
@import './components/_clear-section.scss';
@import './components/_footer.scss';
@import './components/_hamburger-menu.scss';
@import './components/_image-section.scss';
@import './components/_main.scss';
@import './components/_navbar.scss';
@import './components/_page.scss';
@import './components/_section.scss';
@import './components/_split-section.scss';
@import './components/_video-section.scss';
//Pages
@import './pages/_contact-page.scss';
@import './pages/_home-page.scss';
@import './pages/_privacy-policy-page.scss';
//Utilities
@import './utilities/text-align.scss';
@import './utilities/_responsive.scss';
//Vendor
@import './vendor/_fonts.scss';
//Trumps

3
webpack.config.js
View File

@ -34,7 +34,8 @@ module.exports = {
'@components': path.resolve(__dirname, './public/components'),
'@assets': path.resolve(__dirname, './public/assets'),
'@pages': path.resolve(__dirname, './public/pages'),
'@common': path.resolve(__dirname, './common/')
'@common': path.resolve(__dirname, './common/'),
'@styles': path.resolve(__dirname, './public/styles')
}
},