From 6c068dbcd677d089ec03c0b140ecbd457c855fc7 Mon Sep 17 00:00:00 2001 From: Clement G Date: Sat, 8 Jun 2019 16:08:43 +0200 Subject: [PATCH] Add some header and footer content with scss --- public/index.html | 28 ++++++++-------- src/App.js | 2 +- src/Routes.js | 17 +++++----- src/components/layouts/Footer.js | 11 +++++-- src/components/layouts/Header.js | 56 ++++++++++++++++++++++++++++---- src/index.js | 1 + src/scss/App.scss | 25 ++++++++++++++ src/scss/custom-bootstrap.scss | 23 +++++++++++-- 8 files changed, 129 insertions(+), 34 deletions(-) create mode 100644 src/scss/App.scss diff --git a/public/index.html b/public/index.html index d851083..9b3f185 100644 --- a/public/index.html +++ b/public/index.html @@ -14,21 +14,21 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - - - - - - - - - - - - - + + + + + + + + + + + + + - + Mieux Voter diff --git a/src/App.js b/src/App.js index cf6d13e..453ad37 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,7 @@ function App() {
- +
diff --git a/src/Routes.js b/src/Routes.js index 54eea9a..56c828b 100644 --- a/src/Routes.js +++ b/src/Routes.js @@ -8,14 +8,15 @@ import Result from "./components/views/Result"; import UnknownView from "./components/views/UnknownView"; function Routes() { - return ( - - - - - - - + return (
+ + + + + + + +
); } diff --git a/src/components/layouts/Footer.js b/src/components/layouts/Footer.js index 02c591b..5f36213 100644 --- a/src/components/layouts/Footer.js +++ b/src/components/layouts/Footer.js @@ -10,9 +10,14 @@ class Footer extends Component { render(){ return( -
-

FOOTER

-
+ ) } } diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js index cd7853e..88ba3e9 100644 --- a/src/components/layouts/Header.js +++ b/src/components/layouts/Header.js @@ -1,19 +1,63 @@ import React, {Component} from "react"; +import { + Collapse, + Navbar, + NavbarToggler, + NavbarBrand, + Nav, + NavItem, + NavLink, + } from 'reactstrap'; + +import logo from '../../logos/logo-color.svg'; class Header extends Component { constructor(props) { super(props); + + this.toggle = this.toggle.bind(this); this.state = { - } + isOpen: false + }; + } + + toggle() { + this.setState({ + isOpen: !this.state.isOpen + }); } render(){ - return( -
-

HEADER

-
- ) + return ( +
+ + +
+
+ logo +
+
+
+

Plateforme de vote + Jugement Majoritaire +

+ +
+
+
+ + + + + + +
+ ); } } export default Header; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6228435..51aae31 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './scss/custom-bootstrap.scss'; +import './scss/App.scss'; import App from './App'; import * as serviceWorker from './serviceWorker'; diff --git a/src/scss/App.scss b/src/scss/App.scss new file mode 100644 index 0000000..421abcc --- /dev/null +++ b/src/scss/App.scss @@ -0,0 +1,25 @@ +.logo-text > h1{ + font-size:16px; + font-weight:bold; + margin:0; + line-height:1; +} + +.logo-text > h1 > small{ + display:block; + letter-spacing: 0.09em; +} + +main{ + padding:80px 0; + min-height:500px; +} + +header{ + position:fixed; + width:100%; +} + +footer{ + padding:25px; +} diff --git a/src/scss/custom-bootstrap.scss b/src/scss/custom-bootstrap.scss index 09588bb..019ea79 100644 --- a/src/scss/custom-bootstrap.scss +++ b/src/scss/custom-bootstrap.scss @@ -1,5 +1,24 @@ // Override default variables before the import -$body-bg: #2943a0; +$mv-color: #2943a0; +$body-bg: #000000; // Import Bootstrap and its default variables -@import '~bootstrap/scss/bootstrap.scss'; \ No newline at end of file +@import '~bootstrap/scss/bootstrap.scss'; + + +main{ + background-color:$mv-color; +} + +footer { + background-color:$body-bg; + color:#999; +} + +footer a{ + color:#999; +} + +footer a:hover{ + color:#fff; +}