Skip to content

Commit

Permalink
Add footer'
Browse files Browse the repository at this point in the history
  • Loading branch information
@Billmike
Billmike committed Feb 14, 2018
1 parent 721ca5e commit 338456e
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 123 deletions.
14 changes: 14 additions & 0 deletions client/src/assets/css/footer.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}

.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
10 changes: 0 additions & 10 deletions client/src/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,16 +258,6 @@ h4 {
padding-bottom: 40px;
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}

.card {
margin-top: 20px !important;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
Expand Down
13 changes: 13 additions & 0 deletions client/src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React from 'react';

const Footer = () => (
<div>
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</div>
);

export default Footer;
205 changes: 92 additions & 113 deletions client/src/components/Hompage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ import React, { Component } from 'react';
import { connect } from 'react-redux';
import '../assets/css/style.css';
import RecipesList from './RecipesList';
import Footer from './Footer';
import { startGetAllRecipes } from '../actions/recipes';
import pancakes from '../assets/img/pancakes.jpeg';
import cookies from '../assets/img/cookies.jpeg';
import dessert from '../assets/img/dessert.jpeg';

class Homepage extends Component {

componentDidMount() {
this.props.startGetAllRecipes();
}
Expand All @@ -17,128 +17,107 @@ class Homepage extends Component {
let allRecipes;
if (this.props.recipes) {
allRecipes = this.props.recipes.map((recipe, i) => {
return (
<RecipesList key={i} {...recipe} />
);
})
return <RecipesList key={i} {...recipe} />;
});
}
return(
<div className="under-carousel-div">
<div
id="carouselExampleIndicators"
className="carousel slide"
data-ride="carousel"
>
<ol className="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
className="active"
/>
<li
data-target="#carouselExampleIndicators"
data-slide-to="1"
/>
<li
data-target="#carouselExampleIndicators"
data-slide-to="2"
/>
</ol>
<div className="carousel-inner">
return (
<div className="under-carousel-div">
<div
className="carousel-item active"
id="carouselExampleIndicators"
className="carousel slide"
data-ride="carousel"
>
<img
className="d-block w-100 sizing"
src={pancakes}
alt="First slide"
/>
<div className="carousel-caption d-none d-md-block">
<h3
className="carousel-h3"
>Handcrafted recipes made by local chefs
</h3>
<p
className="carousel-p"
>... the little things matter
</p>
</div>
</div>
<div className="carousel-item">
<img
className="d-block w-100 sizing"
src={cookies}
alt="Second slide"
/>
<div className="carousel-caption d-none d-md-block">
<h3
className="carousel-h3-light"
>Tasty recipes to spice up your dinner table.
</h3>
<p
className="carousel-p-light"
>... you really cannot resist these delights.
</p>
<ol className="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
className="active"
/>
<li data-target="#carouselExampleIndicators" data-slide-to="1" />
<li data-target="#carouselExampleIndicators" data-slide-to="2" />
</ol>
<div className="carousel-inner">
<div className="carousel-item active">
<img
className="d-block w-100 sizing"
src={pancakes}
alt="First slide"
/>
<div className="carousel-caption d-none d-md-block">
<h3 className="carousel-h3">
Handcrafted recipes made by local chefs
</h3>
<p className="carousel-p">... the little things matter</p>
</div>
</div>
<div className="carousel-item">
<img
className="d-block w-100 sizing"
src={cookies}
alt="Second slide"
/>
<div className="carousel-caption d-none d-md-block">
<h3 className="carousel-h3-light">
Tasty recipes to spice up your dinner table.
</h3>
<p className="carousel-p-light">
... you really cannot resist these delights.
</p>
</div>
</div>
<div className="carousel-item">
<img
className="d-block w-100 sizing"
src={dessert}
alt="Third slide"
/>
<div className="carousel-caption d-none d-md-block">
<h3 className="carousel-h3">Make every meal memorable.</h3>
<p className="carousel-p">... no more boring nights at home.</p>
</div>
</div>
</div>
<a
className="carousel-control-prev"
href="#carouselExampleIndicators"
role="button"
data-slide="prev"
>
<span className="carousel-control-prev-icon" aria-hidden="true" />
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next"
href="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span className="carousel-control-next-icon" aria-hidden="true" />
<span className="sr-only">Next</span>
</a>
</div>
<div className="carousel-item">
<img
className="d-block w-100 sizing"
src={dessert}
alt="Third slide"
/>
<div className="carousel-caption d-none d-md-block">
<h3
className="carousel-h3"
>Make every meal memorable.
</h3>
<p
className="carousel-p"
>... no more boring nights at home.
</p>
<div className="container">
<h2 className="homepage-h2"> Top Recipes</h2>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">
Go!
</button>
</span>
<input class="form-control" placeholder="Search for....." />
</div>
<div className="row">{allRecipes}</div>
</div>
<Footer />
</div>
<a
className="carousel-control-prev"
href="#carouselExampleIndicators"
role="button"
data-slide="prev"
>
<span className="carousel-control-prev-icon" aria-hidden="true" />
<span className="sr-only">Previous</span>
</a>
<a
className="carousel-control-next"
href="#carouselExampleIndicators"
role="button"
data-slide="next"
>
<span className="carousel-control-next-icon" aria-hidden="true" />
<span className="sr-only">Next</span>
</a>
</div>
<div className="container">
<h2 className="homepage-h2"> Top Recipes</h2>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
<input class="form-control" placeholder="Search for....." />
</div>
<div className="row">
{ allRecipes }
</div>
</div>
</div>
)
);
}
};
}

const mapStateToProps = (state) => {
const mapStateToProps = state => {
return {
recipes: state.recipes.recipes,
}
}
recipes: state.recipes.recipes
};
};

export default connect(mapStateToProps, { startGetAllRecipes })(Homepage);

0 comments on commit 338456e

Please sign in to comment.