Footer moved to its own component

Footer styles moved to Footer.css
This commit is contained in:
Indrajith K L
2018-08-02 12:48:29 +05:30
parent c11b69565e
commit 04477d230e
6 changed files with 74 additions and 52 deletions

16
src/app/Footer.css Normal file
View File

@@ -0,0 +1,16 @@
footer,header {
background:lightgray;
}
footer .things{
display: inline-flex;
padding-right: 10px;
}
.things .child{
background: #a2a1a1;
padding-left: 5px;
padding-right: 5px;
font-weight: bold
}

34
src/app/Footer.js Normal file
View File

@@ -0,0 +1,34 @@
import React, { Component } from 'react';
import './Footer.css';
export default class Footer extends Component {
constructor(props) {
super(props);
}
render() {
return (
<footer>
<div className="things">
<span className="child">API</span>->
<span className="child">
<a href="https://haveibeenpwned.com/">haveibeenpwned</a>
</span>
</div>
<div className="things">
<span className="child">Layout Design</span>->
<span className="child">
<a href="mailto:venture666666@gmail.com">Rajesh K P</a>
</span>
</div>
<div className="things">
<span className="child">Everything else</span>->
<span className="child">
<a href="https://twitter.com/indrajithKLIS">Indrajith K L</a>
</span>
</div>
</footer>
);
}
}

View File

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import axios from 'axios';
import PawnedListItem from './PawnedListItem';
import './SearchField.css';
import Footer from './Footer';
export default class SearchField extends Component {
@@ -34,6 +35,8 @@ export default class SearchField extends Component {
}
return (
<div>
<div id="wrapper">
<div className="searchWrapper">
<div className="search">
<div className="title">
@@ -53,6 +56,9 @@ export default class SearchField extends Component {
{this.breachItems}
</div>
</div>
</div>
<Footer />
</div>
);
}

View File

@@ -3,4 +3,4 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('wrapper'));
ReactDOM.render(<App />, document.getElementById('renderArea'));

View File

@@ -24,9 +24,6 @@ body
width: fit-content;
}
footer,header {
background:lightgray;
}
/* Other Styles */
.vex.vex-theme-wireframe .vex-content {
@@ -50,14 +47,3 @@ footer,header {
cursor: pointer;
}
footer .things{
display: inline-flex;
padding-right: 10px;
}
.things .child{
background: #a2a1a1;
padding-left: 5px;
padding-right: 5px;
font-weight: bold
}

View File

@@ -13,28 +13,8 @@
</head>
<body>
<div id="wrapper"></div>
<footer>
<div class="things">
<span class="child">API</span>->
<span class="child">
<a href="https://haveibeenpwned.com/">haveibeenpwned</a>
</span>
<div id="renderArea"></div>
</div>
<div class="things">
<span class="child">Layout Design</span>->
<span class="child">
<a href="">Rajesh K P</a>
</span>
</div>
<div class="things">
<span class="child">Everything else</span>->
<span class="child">
<a href="https://twitter.com/indrajithKLIS">Indrajith K L</a>
</span>
</div>
</footer>
<script src="./app/main.js"></script>
</body>