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

Better responsiveness

Browse Source
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", "extends": "stylelint-config-standard",
"rules": { "rules": {
"indentation": 4, "indentation": 4
}, },
"defaultSeverity": "error" "defaultSeverity": "error"
} }

2
TODO
View File

@ -6,8 +6,6 @@
# CSS # CSS
* Sidebar responsiveness * Sidebar responsiveness
* Songs on iPhone 5
* /artist/:id and /album/:id responsiveness
* Move CSS in modules * Move CSS in modules
=> https://github.com/gajus/react-css-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 () { render () {
return ( return (
<div className="row albumRow"> <div className="row albumRow">
<div className="row"> <div className="col-sm-offset-2 col-xs-10 albumRowName">
<div className="col-md-offset-2 col-md-10"> <h2>{this.props.album.name}</h2>
<h2>{this.props.album.name}</h2>
</div>
</div> </div>
<div className="row"> <div className="col-xs-2 albumRowArt">
<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>
<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> <div className="col-sm-10 table-responsive">
<div className="col-md-10"> <AlbumTracksTable tracks={this.props.album.tracks} />
<AlbumTracksTable tracks={this.props.album.tracks} />
</div>
</div> </div>
</div> </div>
); );

12
app/components/Artist.jsx
View File

@ -12,13 +12,17 @@ export default class Artist extends Component {
} }
return ( return (
<div> <div>
<div className="row"> <div className="row artistNameRow">
<div className="col-md-9"> <div className="col-sm-12">
<h1 className="text-right">{this.props.artist.name}</h1> <h1>{this.props.artist.name}</h1>
<hr/> <hr/>
</div>
</div>
<div className="row">
<div className="col-sm-9">
<p>{this.props.artist.summary}</p> <p>{this.props.artist.summary}</p>
</div> </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> <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>
</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} />); rows.push(<SongsTableRow song={song} key={song.id} />);
}); });
return ( return (
<table className="table table-hover songs"> <div className="table-responsive">
<thead> <table className="table table-hover songs">
<tr> <thead>
<th></th> <tr>
<th>Title</th> <th></th>
<th>Artist</th> <th>Title</th>
<th>Album</th> <th>Artist</th>
<th>Genre</th> <th>Album</th>
<th>Length</th> <th>Genre</th>
</tr> <th>Length</th>
</thead> </tr>
<tbody>{rows}</tbody> </thead>
</table> <tbody>{rows}</tbody>
</table>
</div>
); );
} }
} }

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

@ -65,7 +65,7 @@
/******/ } /******/ }
/******/ /******/
/******/ var hotApplyOnUpdate = true; /******/ var hotApplyOnUpdate = true;
/******/ var hotCurrentHash = "3714fc41503d94a2c8bc"; // eslint-disable-line no-unused-vars /******/ var hotCurrentHash = "7e07e766a1844626ad6d"; // eslint-disable-line no-unused-vars
/******/ var hotCurrentModuleData = {}; /******/ var hotCurrentModuleData = {};
/******/ var hotCurrentParents = []; // eslint-disable-line no-unused-vars /******/ 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 */ /*# sourceMappingURL=bootstrap.css.map */
/* Firefox hack for responsive table */
@-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
/* /*
* Sidebar * Sidebar
*/ */
@ -6948,12 +6955,50 @@ div.filter {
.art { .art {
display: inline-block; display: inline-block;
margin-bottom: 0.5em; margin-bottom: 10px;
width: 75%; width: 75%;
height: auto; height: auto;
max-width: 200px;
/* doiuse-disable viewport-units */
max-width: 25vw;
max-height: 25vw;
/* doiuse-enable viewport-units */
} }
.albumRow { .albumRow {
margin-top: 30px; 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 * Sidebar
*/ */
@ -190,12 +197,52 @@ div.filter {
.art { .art {
display: inline-block; display: inline-block;
margin-bottom: 0.5em; margin-bottom: 10px;
width: 75%; width: 75%;
height: auto; height: auto;
max-width: 200px;
/* doiuse-disable viewport-units */
max-width: 25vw;
max-height: 25vw;
/* doiuse-enable viewport-units */
} }
.albumRow { .albumRow {
margin-top: 30px; 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 */