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

Better responsiveness

This commit is contained in:
Lucas Verney 2016-07-27 13:51:30 +02:00
parent 28bff9cece
commit 25844836cb
9 changed files with 133 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.stylelintrc
View File

@ -1,7 +1,7 @@
{
"extends": "stylelint-config-standard",
"rules": {
"indentation": 4,
"indentation": 4
},
"defaultSeverity": "error"
}

2
TODO
View File

@ -6,8 +6,6 @@
# CSS
* Sidebar responsiveness
* Songs on iPhone 5
* /artist/:id and /album/:id responsiveness
* Move CSS in modules
=> https://github.com/gajus/react-css-modules

18
app/components/Album.jsx
View File

@ -44,18 +44,14 @@ export class AlbumRow extends Component {
render () {
return (
<div className="row albumRow">
<div className="row">
<div className="col-md-offset-2 col-md-10">
<h2>{this.props.album.name}</h2>
</div>
<div className="col-sm-offset-2 col-xs-10 albumRowName">
<h2>{this.props.album.name}</h2>
</div>
<div className="row">
<div className="col-md-2">
<p className="text-center"><img src={this.props.album.art} width="200" height="200" className="img-responsive img-circle art" alt={this.props.album.name} /></p>
</div>
<div className="col-md-10">
<AlbumTracksTable tracks={this.props.album.tracks} />
</div>
<div className="col-xs-2 albumRowArt">
<p className="text-center"><img src={this.props.album.art} width="200" height="200" className="img-responsive img-circle art" alt={this.props.album.name} /></p>
</div>
<div className="col-sm-10 table-responsive">
<AlbumTracksTable tracks={this.props.album.tracks} />
</div>
</div>
);

12
app/components/Artist.jsx
View File

@ -12,13 +12,17 @@ export default class Artist extends Component {
}
return (
<div>
<div className="row">
<div className="col-md-9">
<h1 className="text-right">{this.props.artist.name}</h1>
<div className="row artistNameRow">
<div className="col-sm-12">
<h1>{this.props.artist.name}</h1>
<hr/>
</div>
</div>
<div className="row">
<div className="col-sm-9">
<p>{this.props.artist.summary}</p>
</div>
<div className="col-md-3">
<div className="col-sm-3 text-center">
<p><img src={this.props.artist.art} width="200" height="200" className="img-responsive img-circle art" alt={this.props.artist.name}/></p>
</div>
</div>

28
app/components/Songs.jsx
View File

@ -50,19 +50,21 @@ export class SongsTable extends Component {
rows.push(<SongsTableRow song={song} key={song.id} />);
});
return (
<table className="table table-hover songs">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Album</th>
<th>Genre</th>
<th>Length</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
<div className="table-responsive">
<table className="table table-hover songs">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Album</th>
<th>Genre</th>
<th>Length</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
</div>
);
}
}

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

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

10
app/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

49
app/dist/style.css vendored
View File

@ -6758,6 +6758,13 @@ button.close {
}
}
/*# sourceMappingURL=bootstrap.css.map */
/* Firefox hack for responsive table */
@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
/*
* Sidebar
*/
@ -6948,12 +6955,50 @@ div.filter {
.art {
display: inline-block;
margin-bottom: 0.5em;
margin-bottom: 10px;
width: 75%;
height: auto;
max-width: 200px;
/* doiuse-disable viewport-units */
max-width: 25vw;
max-height: 25vw;
/* doiuse-enable viewport-units */
}
.albumRow {
margin-top: 30px;
}
.artistNameRow h1 {
margin-bottom: 0;
}
.artistNameRow hr {
margin-top: 0.5em; /* Default value. */
}
@media (max-width: 767px) {
.table-responsive {
border: none;
}
.albumRowName h2 {
margin-top: 0;
margin-bottom: 0;
}
.albumRowArt p, .albumRowArt img {
margin: 0;
}
.albumRowName, .albumRowArt {
float: none;
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
/* TODO: Use table-condensed if xs screen */

51
app/styles/ampache.css
View File

@ -1,3 +1,10 @@
/* Firefox hack for responsive table */
@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
/*
* Sidebar
*/
@ -190,12 +197,52 @@ div.filter {
.art {
display: inline-block;
margin-bottom: 0.5em;
margin-bottom: 10px;
width: 75%;
height: auto;
max-width: 200px;
/* doiuse-disable viewport-units */
max-width: 25vw;
max-height: 25vw;
/* doiuse-enable viewport-units */
}
.albumRow {
margin-top: 30px;
}
.artistNameRow h1 {
margin-bottom: 0;
}
.artistNameRow hr {
margin-top: 0.5em; /* Default value. */
}
@media (max-width: 767px) {
.table-responsive {
border: none;
}
.albumRowName h2 {
margin-top: 0;
margin-bottom: 0;
}
.albumRowArt p,
.albumRowArt img {
margin: 0;
}
.albumRowName,
.albumRowArt {
float: none;
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
/* TODO: Use table-condensed if xs screen */