Beginning of a more responsive sidebar
This commit is contained in:
джерело
d8a44cdc3c
коміт
42662200aa
|
@ -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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} />
|
||||
</span>
|
||||
</Link>
|
||||
|
|
Різницю між файлами не показано, оскільки один чи декілька рядків занадто довгі
Різницю між файлами не показано, оскільки один чи декілька рядків занадто довгі
Різницю між файлами не показано, оскільки один чи декілька рядків занадто довгі
Різницю між файлами не показано, оскільки один чи декілька рядків занадто довгі
|
@ -0,0 +1,14 @@
|
|||
@media (max-width: 767px) {
|
||||
.songs {
|
||||
> thead,
|
||||
> tbody,
|
||||
> tfoot {
|
||||
> tr {
|
||||
> th,
|
||||
> td {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
|
||||
.sidebar .nav-list > li > a {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
.nav {
|
||||
li {
|
||||
a {
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.main-panel {
|
||||
padding-right: 40px;
|
||||
padding-left: 40px;
|
||||
@media (max-width: 991px) {
|
||||
.sidebar {
|
||||
position: static;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
|
Завантаження…
Посилання в новій задачі