Beginning of a more responsive sidebar
This commit is contained in:
parent
d8a44cdc3c
commit
42662200aa
|
@ -24,16 +24,16 @@ class SidebarLayoutIntl extends Component {
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<div>
|
<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">
|
<h1 className="text-center" styleName="title">
|
||||||
<IndexLink to="/" styleName="link">
|
<IndexLink to="/" styleName="link">
|
||||||
<img alt="A" src="./app/assets/img/ampache-blue.png" styleName="imgTitle" />
|
<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>
|
</IndexLink>
|
||||||
</h1>
|
</h1>
|
||||||
<nav aria-label={formatMessage(sidebarLayoutMessages["app.sidebarLayout.mainNavigationMenu"])}>
|
<nav aria-label={formatMessage(sidebarLayoutMessages["app.sidebarLayout.mainNavigationMenu"])}>
|
||||||
<div className="navbar text-center" styleName="icon-navbar">
|
<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">
|
<ul className="nav navbar-nav" styleName="nav">
|
||||||
<li>
|
<li>
|
||||||
<Link to="/" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.home"])} styleName="link">
|
<Link to="/" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.home"])} styleName="link">
|
||||||
|
@ -66,7 +66,7 @@ class SidebarLayoutIntl extends Component {
|
||||||
<li>
|
<li>
|
||||||
<Link to="/discover" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.discover"])} styleName={isActive.discover}>
|
<Link to="/discover" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.discover"])} styleName={isActive.discover}>
|
||||||
<span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
|
<span className="glyphicon glyphicon-globe" aria-hidden="true"></span>
|
||||||
<span className="hidden-sm">
|
<span className="hidden-md">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.discover"]} />
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.discover"]} />
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -74,18 +74,18 @@ class SidebarLayoutIntl extends Component {
|
||||||
<li>
|
<li>
|
||||||
<Link to="/browse" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browse"])} styleName={isActive.browse}>
|
<Link to="/browse" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browse"])} styleName={isActive.browse}>
|
||||||
<span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
|
<span className="glyphicon glyphicon-headphones" aria-hidden="true"></span>
|
||||||
<span className="hidden-sm">
|
<span className="hidden-md">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.browse"]} />
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.browse"]} />
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
<ul className="nav nav-list text-center">
|
<ul className="nav text-center" styleName="nav-list">
|
||||||
<li>
|
<li>
|
||||||
<Link to="/artists" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseArtists"])} styleName={isActive.artists}>
|
<Link to="/artists" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseArtists"])} styleName={isActive.artists}>
|
||||||
<span className="glyphicon glyphicon-user" aria-hidden="true"></span>
|
<span className="glyphicon glyphicon-user" aria-hidden="true"></span>
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
|
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
|
||||||
</span>
|
</span>
|
||||||
<span className="hidden-sm">
|
<span className="hidden-md">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
|
<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} />
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -94,7 +94,7 @@ class SidebarLayoutIntl extends Component {
|
||||||
<Link to="/albums" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseAlbums"])} styleName={isActive.albums}>
|
<Link to="/albums" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.browseAlbums"])} styleName={isActive.albums}>
|
||||||
<span className="glyphicon glyphicon-cd" aria-hidden="true"></span>
|
<span className="glyphicon glyphicon-cd" aria-hidden="true"></span>
|
||||||
<span className="sr-only"><FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} /></span>
|
<span className="sr-only"><FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} /></span>
|
||||||
<span className="hidden-sm">
|
<span className="hidden-md">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} />
|
<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} />
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -105,7 +105,7 @@ class SidebarLayoutIntl extends Component {
|
||||||
<span className="sr-only">
|
<span className="sr-only">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
|
<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
|
||||||
</span>
|
</span>
|
||||||
<span className="hidden-sm">
|
<span className="hidden-md">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
|
<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} />
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
@ -115,7 +115,7 @@ class SidebarLayoutIntl extends Component {
|
||||||
<li>
|
<li>
|
||||||
<Link to="/search" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.search"])} styleName={isActive.search}>
|
<Link to="/search" title={formatMessage(sidebarLayoutMessages["app.sidebarLayout.search"])} styleName={isActive.search}>
|
||||||
<span className="glyphicon glyphicon-search" aria-hidden="true"></span>
|
<span className="glyphicon glyphicon-search" aria-hidden="true"></span>
|
||||||
<span className="hidden-sm">
|
<span className="hidden-md">
|
||||||
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} />
|
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} />
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,14 @@
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.songs {
|
||||||
|
> thead,
|
||||||
|
> tbody,
|
||||||
|
> tfoot {
|
||||||
|
> tr {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -46,23 +46,33 @@ $lightgrey: #eee;
|
||||||
.title {
|
.title {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
font-size: 26px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.imgTitle {
|
.imgTitle {
|
||||||
height: 46px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar navigation */
|
/* Sidebar navigation */
|
||||||
.icon-navbar {
|
.icon-navbar {
|
||||||
background-color: #555;
|
background-color: #555;
|
||||||
font-size: 1.25em;
|
font-size: 1.2em;
|
||||||
border: none;
|
border: none;
|
||||||
|
|
||||||
|
.container-fluid {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -75,33 +85,32 @@ $lightgrey: #eee;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Media queries
|
* Media queries
|
||||||
* TODO: Sidebar responsiveness
|
|
||||||
*/
|
*/
|
||||||
/*@media (max-width: 991px) {
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||||||
.sidebar,
|
.icon-navbar {
|
||||||
.sidebar .navbar .container-fluid {
|
.nav {
|
||||||
padding-left: 5px;
|
li {
|
||||||
padding-right: 5px;
|
float: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .nav-list {
|
.nav-list {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar .nav-sidebar > li > a {
|
.nav {
|
||||||
padding-left: 20px;
|
li {
|
||||||
padding-right: 20px;
|
a {
|
||||||
}
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
.sidebar .nav-list > li > a {
|
}
|
||||||
padding-left: 20px;
|
}
|
||||||
padding-right: 20px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (max-width: 991px) {
|
||||||
.main-panel {
|
.sidebar {
|
||||||
padding-right: 40px;
|
position: static;
|
||||||
padding-left: 40px;
|
|
||||||
}
|
}
|
||||||
}*/
|
}
|
||||||
|
|
Loading…
Reference in New Issue