diff --git a/css/style.css b/css/style.css index b872cd1..a2cc2c4 100644 --- a/css/style.css +++ b/css/style.css @@ -27,22 +27,42 @@ html, body { width: 100%; height: 100%; flex-direction: column; - background: url('../img/background.png') no-repeat; + background: url('../img/background.png'); + background-repeat: no-repeat; background-size: cover; + background-position: center center; + transition: background-image 250ms ease-in-out; +} + +.launcher .main { + flex-direction: row; + display: flex; + flex-grow: 1; +} + +.launcher .nav { + justify-content: center; + align-items: center; + display: flex; + width: 50px; +} + +.launcher .nav a.goback { + text-decoration: none; + color: white; + font-size: 60px; + text-shadow: 1px 1px #444; +} + +.launcher .nav a.goback:hover { + -webkit-animation: 500ms pulse-large infinite; } .launcher .category-header { - padding: 40px 50px 0; + padding: 25px 40px 0; font-size: 50px; -} - -.launcher .category-header a.goback { - text-decoration: none; - color: white; -} - -.launcher .category-header a.goback:hover { - -webkit-animation: 500ms pulse-large infinite; + color: #fff; + text-shadow: 1px 1px #444; } .launcher .category-header > .category-label { @@ -66,6 +86,10 @@ html, body { flex-grow: 1; } +.launcher .nav ~ ul.apps-list { + margin-left: -50px; +} + .launcher li.app-item { margin: 5px; border-radius: 5px; @@ -222,7 +246,7 @@ html, body { @-webkit-keyframes pulse-large { 0% { transform: scale(1); } - 50% { transform: scale(1.5); } + 50% { transform: scale(1.3); } 100% { transform: scale(1); } } diff --git a/default-profile.json b/default-profile.json index 83cc540..f9779d0 100644 --- a/default-profile.json +++ b/default-profile.json @@ -3,6 +3,7 @@ { "label": "Level 1", "icon": "chromium-browser", + "background": "./img/background2.jpg", "items": [ { "label": "Level 2-1", @@ -48,4 +49,4 @@ } ], "_key": "item_1444480285021_0" -} \ No newline at end of file +} diff --git a/img/background2.jpg b/img/background2.jpg new file mode 100644 index 0000000..c609f3f Binary files /dev/null and b/img/background2.jpg differ diff --git a/js/components/launcher/category-header.js b/js/components/launcher/category-header.js index 74c1f72..3b602a3 100644 --- a/js/components/launcher/category-header.js +++ b/js/components/launcher/category-header.js @@ -3,11 +3,6 @@ var React = require('react'); module.exports = React.createClass({ propTypes: { - onBackClick: React.PropTypes.func.isRequired, - itemPath: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.arrayOf(React.PropTypes.number) - ]).isRequired, item: React.PropTypes.object.isRequired, }, @@ -15,16 +10,10 @@ module.exports = React.createClass({ return (
- {this.props.item.label}
); - }, - - _onBackClick: function(evt) { - evt.preventDefault(); - this.props.onBackClick(this.props.itemPath, this.props.item); } }); diff --git a/js/components/launcher/launcher-view.js b/js/components/launcher/launcher-view.js index 8867d8c..5b42d4f 100644 --- a/js/components/launcher/launcher-view.js +++ b/js/components/launcher/launcher-view.js @@ -1,6 +1,7 @@ var React = require('react'); var CategoryHeader = require('./category-header.js'); var AppList = require('./app-list.js'); +var Nav = require('./nav.js'); var AnimateMixin = require('../mixins/animate'); var actions = require('../../store/actions'); var connect = require('react-redux').connect; @@ -39,19 +40,34 @@ var LauncherView = React.createClass({ var header = currentItemPath !== '' ? ( ) : + null + ; + + var nav = currentItemPath !== '' ? + (