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 ( 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">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.discover"]} /> &nbsp;<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">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.browse"]} /> &nbsp;<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">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.artist"]} values={{itemCount: 42}} /> &nbsp;<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">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.album"]} values={{itemCount: 42}} /> &nbsp;<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">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.common.song"]} values={{itemCount: 42}} /> &nbsp;<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">
&nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} /> &nbsp;<FormattedMessage {...sidebarLayoutMessages["app.sidebarLayout.search"]} />
</span> </span>
</Link> </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;
}
}
}
}
}

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

@ -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;
} }
}*/ }