Add a bootswatch theme
This commit is contained in:
parent
819abba77e
commit
9c68857934
@ -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",
|
||||||
|
@ -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
|
{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>
|
{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>
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
@ -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"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user