Better responsiveness
This commit is contained in:
parent
28bff9cece
commit
25844836cb
@ -1,7 +1,7 @@
|
||||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"rules": {
|
||||
"indentation": 4,
|
||||
"indentation": 4
|
||||
},
|
||||
"defaultSeverity": "error"
|
||||
}
|
||||
|
2
TODO
2
TODO
@ -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
|
||||
|
||||
|
@ -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,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>
|
||||
|
@ -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
2
app/dist/fix.ie9.js
vendored
@ -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
10
app/dist/index.js
vendored
File diff suppressed because one or more lines are too long
49
app/dist/style.css
vendored
49
app/dist/style.css
vendored
@ -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 */
|
||||
|
@ -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 */
|
||||
|
Loading…
Reference in New Issue
Block a user