phyks/ampache_react
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve sidebar

Browse Source
This commit is contained in:
Lucas Verney 2016-07-26 21:01:27 +02:00
parent 414f05df44
commit b54734b5dc
9 changed files with 135 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,3 +1,5 @@
node_modules
app/dist/eventsourcePolyfill.js
app/dist/webpackHotMiddlewareClient.js
app/dist/*.hot-update.json
app/dist/*.hot-update.js

2
TODO
View File

@ -7,9 +7,7 @@
# CSS
* Sidebar responsiveness
* Songs on iPhone 5
* Set sidebar .active
* /artist/:id and /album/:id arts in responsive view
* Scroll horizontal sidebar
* Move CSS in modules
=> https://github.com/gajus/react-css-modules

66
app/components/layouts/Sidebar.jsx
View File

@ -3,46 +3,86 @@ import { IndexLink, Link} from "react-router";
export default class SidebarLayout extends Component {
render () {
const isActive = {
discover: (this.props.location.pathname == "/discover") ? "active" : "",
browse: (this.props.location.pathname == "/browse") ? "active" : "",
artists: (this.props.location.pathname == "/artists") ? "active" : "",
albums: (this.props.location.pathname == "/albums") ? "active" : "",
songs: (this.props.location.pathname == "/songs") ? "active" : "",
search: (this.props.location.pathname == "/search") ? "active" : ""
};
return (
<div>
<div className="col-sm-3 col-md-2 sidebar hidden-xs">
<h1 className="text-center"><IndexLink to="/"><img alt="A" src="./app/assets/img/ampache-blue.png"/>mpache</IndexLink></h1>
<div className="col-sm-1 col-md-2 sidebar hidden-xs">
<h1 className="text-center">
<IndexLink to="/">
<img alt="A" src="./app/assets/img/ampache-blue.png"/>
<span className="hidden-sm">mpache</span>
</IndexLink>
</h1>
<nav aria-label="Main navigation menu">
<div className="navbar text-center icon-navbar">
<div className="container-fluid">
<ul className="nav navbar-nav icon-navbar-nav">
<li>
<Link to="/" title="Home"><span className="glyphicon glyphicon-home" aria-hidden="true"></span> <span className="sr-only">Home</span></Link>
<Link to="/" title="Home">
<span className="glyphicon glyphicon-home" aria-hidden="true"></span>
<span className="sr-only">Home</span>
</Link>
</li>
<li>
<Link to="/settings" title="Settings"><span className="glyphicon glyphicon-wrench" aria-hidden="true"></span> <span className="sr-only">Settings</span></Link>
<Link to="/settings" title="Settings">
<span className="glyphicon glyphicon-wrench" aria-hidden="true"></span>
<span className="sr-only">Settings</span>
</Link>
</li>
<li>
<Link to="/logout" title="Logout"><span className="glyphicon glyphicon-off" aria-hidden="true"></span> <span className="sr-only">Logout</span></Link>
<Link to="/logout" title="Logout">
<span className="glyphicon glyphicon-off" aria-hidden="true"></span>
<span className="sr-only">Logout</span>
</Link>
</li>
</ul>
</div>
</div>
<ul className="nav nav-sidebar">
<li>
<Link to="/discover" title="Discover">
<Link to="/discover" title="Discover" className={isActive.discover}>
<span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
<span className="hidden-sm"> Discover</span>
</Link>
</li>
<li>
<Link to="/browse" title="Browse">
<Link to="/browse" title="Browse" className={isActive.browse}>
<span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
<span className="hidden-sm"> Browse</span>
</Link>
<ul className="nav nav-sidebar text-center">
<li><Link to="/artists" title="Browse artists"><span className="glyphicon glyphicon-user" aria-hidden="true"></span> Artists</Link></li>
<li><Link to="/albums" title="Browse albums"><span className="glyphicon glyphicon-cd" aria-hidden="true"></span> Albums</Link></li>
<li><Link to="/songs" title="Browse songs"><span className="glyphicon glyphicon-music" aria-hidden="true"></span> Songs</Link></li>
<ul className="nav nav-list text-center">
<li>
<Link to="/artists" title="Browse artists" className={isActive.artists}>
<span className="glyphicon glyphicon-user" aria-hidden="true"></span>
<span className="sr-only">Artists</span>
<span className="hidden-sm"> Artists</span>
</Link>
</li>
<li>
<Link to="/albums" title="Browse albums" className={isActive.albums}>
<span className="glyphicon glyphicon-cd" aria-hidden="true"></span>
<span className="sr-only">Albums</span>
<span className="hidden-sm"> Albums</span>
</Link>
</li>
<li>
<Link to="/songs" title="Browse songs" className={isActive.songs}>
<span className="glyphicon glyphicon-music" aria-hidden="true"></span>
<span className="sr-only">Songs</span>
<span className="hidden-sm"> Songs</span>
</Link>
</li>
</ul>
</li>
<li>
<Link to="/search" title="Search">
<Link to="/search" title="Search" className={isActive.search}>
<span className="glyphicon glyphicon-search" aria-hidden="true"></span>
<span className="hidden-sm"> Search</span>
</Link>
@ -51,7 +91,7 @@ export default class SidebarLayout extends Component {
</nav>
</div>
<div className="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main-panel">
<div className="col-sm-11 col-sm-offset-1 col-md-10 col-md-offset-2 main-panel">
{this.props.children}
</div>
</div>

2
app/dist/fix.ie9.js vendored
View File

@ -65,7 +65,7 @@
/******/ }
/******/
/******/ var hotApplyOnUpdate = true;
/******/ var hotCurrentHash = "b6652854710cfe2cd142"; // eslint-disable-line no-unused-vars
/******/ var hotCurrentHash = "cf1ba667e264da876286"; // eslint-disable-line no-unused-vars
/******/ var hotCurrentModuleData = {};
/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars
/******/

4
app/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

38
app/dist/style.css vendored
View File

@ -6795,8 +6795,12 @@ button.close {
}
/* Sidebar navigation */
.sidebar .navbar {
border: none;
}
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-right: -20px;
margin-bottom: 20px;
margin-left: -20px;
}
@ -6806,12 +6810,42 @@ button.close {
padding-left: 20px;
}
@media (max-width: 991px) {
.sidebar, .sidebar .navbar .container-fluid {
padding-left: 5px;
padding-right: 5px;
}
.sidebar .nav-list {
text-align: right;
}
.sidebar .nav-sidebar > li > a {
padding-left: 20px;
padding-right: 20px;
}
.sidebar .nav-list > li > a {
padding-left: 20px;
padding-right: 20px;
}
}
.nav-sidebar .nav-sidebar {
margin-bottom: 0; /* No margin bottom for nested nav-sidebar. */
}
.nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav-sidebar > .active > a:focus, .nav > li > a:hover, .nav > li > a:focus {
.nav-sidebar > .active > a:focus, .nav > li > a:focus {
color: #fff;
background-color: transparent;
}
.nav-sidebar > .active > a, .nav-sidebar > .active > a:hover, .nav > li > a:hover {
color: #fff;
background-color: #222;
}
.nav > li > a.active {
background-color: #222;
}

42
app/styles/ampache.css
View File

@ -35,8 +35,12 @@
}
/* Sidebar navigation */
.sidebar .navbar {
border: none;
}
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-right: -20px;
margin-bottom: 20px;
margin-left: -20px;
}
@ -46,16 +50,46 @@
padding-left: 20px;
}
@media (max-width: 991px) {
.sidebar,
.sidebar .navbar .container-fluid {
padding-left: 5px;
padding-right: 5px;
}
.sidebar .nav-list {
text-align: right;
}
.sidebar .nav-sidebar > li > a {
padding-left: 20px;
padding-right: 20px;
}
.sidebar .nav-list > li > a {
padding-left: 20px;
padding-right: 20px;
}
}
.nav-sidebar .nav-sidebar {
margin-bottom: 0; /* No margin bottom for nested nav-sidebar. */
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus,
.nav > li > a:hover,
.nav > li > a:focus {
color: #fff;
background-color: transparent;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav > li > a:hover {
color: #fff;
background-color: #222;
}
.nav > li > a.active {
background-color: #222;
}

2
package.json
View File

@ -8,7 +8,7 @@
"repository": "git+https://github.com/Phyks/ampache_react.git",
"scripts": {
"build": "./node_modules/webpack/bin/webpack.js --progress",
"serve": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --hot"
"watch": "./node_modules/webpack/bin/webpack.js --progress --watch"
},
"dependencies": {
"babel-polyfill": "^6.9.1",

4
webpack.config.base.js
View File

@ -16,9 +16,9 @@ module.exports = {
},
output: {
path: path.join(__dirname, "app/dist"),
path: path.join(__dirname, "app/dist/"),
filename: "[name].js",
publicPath: "/app/dist"
publicPath: "./"
},
module: {