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

Beginning of a more responsive sidebar

Browse Source
This commit is contained in:
Lucas Verney 2016-07-30 16:01:42 +02:00
parent d8a44cdc3c
commit 42662200aa
7 changed files with 78 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,16 +24,16 @@ class SidebarLayoutIntl extends Component {
};
return (
<div>
<div className="col-sm-1 col-md-2 hidden-xs" styleName="sidebar">
<div className="col-xs-12 col-md-1 col-lg-2" styleName="sidebar">
<h1 className="text-center" styleName="title">
<IndexLink to="/" styleName="link">
<img alt="A" src="./app/assets/img/ampache-blue.png" styleName="imgTitle" />
<span className="hidden-sm">mpache</span>
<span className="hidden-md">mpache</span>
</IndexLink>
</h1>
<nav aria-label={formatMessage(sidebarLayoutMessages["app.sidebarLayout.mainNavigationMenu"])}>
<div className="navbar text-center" styleName="icon-navbar">
<div className="container-fluid">
<div className="container-fluid" styleName="container-fluid">
<ul className="nav navbar-nav" styleName="nav">
<li>
<Link to="/" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.home"])} styleName="link">
@ -66,7 +66,7 @@ class SidebarLayoutIntl extends Component {
<li>
<Link to="/discover" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.discover"])} styleName={isActive.discover}>
<span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
<span className="hidden-sm">
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.discover"]} />
</span>
</Link>
@ -74,18 +74,18 @@ class SidebarLayoutIntl extends Component {
<li>
<Link to="/browse" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browse"])} styleName={isActive.browse}>
<span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
<span className="hidden-sm">
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.browse"]} />
</span>
</Link>
<ul className="nav nav-list text-center">
<ul className="nav text-center" styleName="nav-list">
<li>
<Link to="/artists" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseArtists"])} styleName={isActive.artists}>
<span className="glyphicon glyphicon-user" aria-hidden="true"></span>
<span className="sr-only">
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
</span>
<span className="hidden-sm">
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
</span>
</Link>
@ -94,7 +94,7 @@ class SidebarLayoutIntl extends Component {
<Link to="/albums" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseAlbums"])} styleName={isActive.albums}>
<span className="glyphicon glyphicon-cd" aria-hidden="true"></span>
<span className="sr-only"><FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} /></span>
<span className="hidden-sm">
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} />
</span>
</Link>
@ -105,7 +105,7 @@ class SidebarLayoutIntl extends Component {
<span className="sr-only">
<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
</span>
<span className="hidden-sm">
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
</span>
</Link>
@ -115,7 +115,7 @@ class SidebarLayoutIntl extends Component {
<li>
<Link to="/search" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.search"])} styleName={isActive.search}>
<span className="glyphicon glyphicon-search" aria-hidden="true"></span>
<span className="hidden-sm">
<span className="hidden-md">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} />
</span>
</Link>

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

File diff suppressed because one or more lines are too long

40
app/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

2
app/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
app/dist/style.css vendored
View File

File diff suppressed because one or more lines are too long

14
app/styles/Songs.scss Normal file
View File

@ -0,0 +1,14 @@
@media (max-width: 767px) {
.songs {
> thead,
> tbody,
> tfoot {
> tr {
> th,
> td {
padding: 5px;
}
}
}
}
}

51
app/styles/layouts/Sidebar.scss
View File

@ -46,23 +46,33 @@ $lightgrey: #eee;
.title {
margin: 0;
margin-bottom: 20px;
font-size: 26px;
}
.imgTitle {
height: 46px;
height: 36px;
}
/* Sidebar navigation */
.icon-navbar {
background-color: #555;
font-size: 1.25em;
font-size: 1.2em;
border: none;
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.nav {
display: inline-block;
float: none;
vertical-align: top;
text-align: center;
li {
float: left;
}
}
}
@ -75,33 +85,32 @@ $lightgrey: #eee;
/*
* Media queries
* TODO: Sidebar responsiveness
*/
/*@media (max-width: 991px) {
.sidebar,
.sidebar .navbar .container-fluid {
padding-left: 5px;
padding-right: 5px;
@media (min-width: 992px) and (max-width: 1199px) {
.icon-navbar {
.nav {
li {
float: none;
}
}
}
.sidebar .nav-list {
.nav-list {
text-align: right;
}
.sidebar .nav-sidebar > li > a {
padding-left: 20px;
padding-right: 20px;
.nav {
li {
a {
padding-left: 5px;
padding-right: 5px;
}
}
.sidebar .nav-list > li > a {
padding-left: 20px;
padding-right: 20px;
}
}
@media (min-width: 768px) {
.main-panel {
padding-right: 40px;
padding-left: 40px;
@media (max-width: 991px) {
.sidebar {
position: static;
}
}*/
}