crayonix/giovani.lol
Archived
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added boostrap 4 to project and shared components

Browse Source
This commit is contained in:
Giovani
2019-04-09 13:36:49 -04:00
parent ab530b9cc4
commit 27c3a713bb
11 changed files with 118 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
package-lock.json generated
View File

@@ -2474,6 +2474,16 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"boostrap": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/boostrap/-/boostrap-2.0.0.tgz",
"integrity": "sha512-JEeFMOweKeGXEM9rt95eaVISOkluG9aKcl0jQCETOVH9jynCZxuBZe2oWgcWJpj5wqYWZl625SnW7OgHT2Ineg=="
},
"bootstrap": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
"integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8728,6 +8738,11 @@
"topo": "2.0.2"
}
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-levenshtein": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -10244,6 +10259,11 @@
"ts-pnp": "1.0.1"
}
},
"popper.js": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
},
"portfinder": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",

4
package.json
View File

@@ -3,6 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"boostrap": "^2.0.0",
"bootstrap": "^4.3.1",
"jquery": "^3.3.1",
"popper.js": "^1.15.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8"

20
src/components/App.js
View File

@@ -1,28 +1,12 @@
import React, { Component } from 'react';
import Header from './shared/header';
import Footer from "./shared/footer"
import Home from './pages/home'
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Header/>
<header className="App-header">
<img src="" className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Footer/>
<Home/>
</div>
);
}

18
src/components/pages/home.js Normal file
View File

@@ -0,0 +1,18 @@
import React, {Component} from 'react';
import Header from '../shared/header';
import Footer from "../shared/footer";
import Carousel from '../shared/carousel';
class Home extends Component {
render() {
return (
<div>
<Header/>
<Carousel/>
<Footer/>
</div>
);
}
}
export default Home;

33
src/components/shared/carousel.js Normal file
View File

@@ -0,0 +1,33 @@
import React, {Component} from 'react';
import CarouselImageOne from '../../images/home/carouselImageOne.jpg'
import CarouselImageTwo from '../../images/home/carouselImageTwo.jpg'
class Carousel extends Component {
render() {
return (
<div id="carouselExampleControls" className="carousel slide" data-ride="carousel">
<div className="carousel-inner">
<div className="carousel-item active">
<img src={CarouselImageOne} className="d-block w-100" alt="..."/>
</div>
<div className="carousel-item">
<img src={CarouselImageOne} className="d-block w-100" alt="..."/>
</div>
<div className="carousel-item">
<img src={CarouselImageOne} className="d-block w-100" alt="..."/>
</div>
</div>
<a className="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span className="carousel-control-next-icon" aria-hidden="true"></span>
<span className="sr-only">Next</span>
</a>
</div>
);
}
}
export default Carousel;

17
src/components/shared/footer.js
View File

@@ -1,12 +1,21 @@
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Footer extends Component {
render() {
return (
<h1>
This is a footer!
</h1>
<div className="container-fluid">
<div className="row">
<div class="col-sm">
One
</div>
<div class="col-sm">
Two
</div>
<div class="col-sm">
Three
</div>
</div>
</div>
);
}
}

26
src/components/shared/header.js
View File

@@ -1,12 +1,30 @@
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class Header extends Component {
render() {
return (
<h1>
This is a header!
</h1>
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">Navbar</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Features</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Pricing</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
);
}
}

BIN
src/images/home/carouselImageOne.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 982 KiB

BIN
src/images/home/carouselImageTwo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

14
src/index.css
View File

@@ -1,14 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

7
src/index.js
View File

@@ -1,6 +1,11 @@
import 'bootstrap/dist/css/bootstrap.min.css';
// eslint-disable-next-line
import $ from 'jquery';
// eslint-disable-next-line
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';