Add a bootswatch theme

This commit is contained in:
Grégoire Delattre 2016-11-24 00:12:34 +01:00
parent 819abba77e
commit 9c68857934
5 changed files with 17 additions and 6 deletions

View File

@ -6,6 +6,7 @@
"dependencies": { "dependencies": {
"babel-polyfill": "^6.16.0", "babel-polyfill": "^6.16.0",
"bootstrap": "^3.3.6", "bootstrap": "^3.3.6",
"bootswatch": "^3.3.7",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"history": "^4.4.0", "history": "^4.4.0",
"jquery": "^2.2.4", "jquery": "^2.2.4",

View File

@ -55,11 +55,11 @@ function MovieDetails(props) {
<h3 className="visible-xs">{props.movie.title}</h3> <h3 className="visible-xs">{props.movie.title}</h3>
<p> <p>
<i className="fa fa-clock-o"></i> <i className="fa fa-clock-o"></i>
{props.movie.runtime} min &nbsp;{props.movie.runtime} min
</p> </p>
<p> <p>
<i className="fa fa-star-o"></i> <i className="fa fa-star-o"></i>
{props.movie.rating} <small>({props.movie.votes} counts)</small> &nbsp;{props.movie.rating} <small>({props.movie.votes} counts)</small>
</p> </p>
<p className="movie-plot">{props.movie.plot}</p> <p className="movie-plot">{props.movie.plot}</p>
</div> </div>

View File

@ -12,7 +12,7 @@ export default class NavBar extends React.Component {
const isLoggedIn = username !== "" ? true : false; const isLoggedIn = username !== "" ? true : false;
return ( return (
<div> <div>
<Navbar fluid inverse fixedTop collapseOnSelect> <Navbar fluid fixedTop collapseOnSelect>
<Navbar.Header> <Navbar.Header>
<LinkContainer to="/"> <LinkContainer to="/">
<Navbar.Brand><a href="#">Canapé</a></Navbar.Brand> <Navbar.Brand><a href="#">Canapé</a></Navbar.Brand>

View File

@ -1,13 +1,15 @@
@import "~bootstrap/less/bootstrap.less"; @import "~bootstrap/less/bootstrap.less";
@import "~bootswatch/superhero/variables.less";
@import "~bootswatch/superhero/bootswatch.less";
@import "~font-awesome/less/font-awesome.less"; @import "~font-awesome/less/font-awesome.less";
body { body {
padding-top: 70px; padding-top: @navbar-height + 10px;
} }
.thumbnail-selected { .thumbnail-selected {
border-color:#f1c40f; border-color: @brand-primary;
background-color:#f1c40f; background-color: @brand-primary;
} }
.movie-plot { .movie-plot {
@ -20,3 +22,7 @@ body {
bottom: 1%; bottom: 1%;
right: 1%; right: 1%;
} }
.navbar {
opacity: 0.95;
}

View File

@ -773,6 +773,10 @@ bootstrap@^3.3.6:
version "3.3.7" version "3.3.7"
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71" resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.3.7.tgz#5a389394549f23330875a3b150656574f8a9eb71"
bootswatch:
version "3.3.7"
resolved "https://registry.yarnpkg.com/bootswatch/-/bootswatch-3.3.7.tgz#eb6f9a9a8523b87a706ea91deec3e0d7eaa8ab1f"
brace-expansion@^1.0.0: brace-expansion@^1.0.0:
version "1.1.6" version "1.1.6"
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"