Better responsiveness

.stylelintrc

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

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
 

app/components/Album.jsx

@@ -44,20 +44,16 @@ export class AlbumRow extends Component {
     render () {
         return (
             <div className="row albumRow">
-                <div className="row">
-                    <div className="col-md-offset-2 col-md-10">
+                <div className="col-sm-offset-2 col-xs-10 albumRowName">
                     <h2>{this.props.album.name}</h2>
                 </div>
-                </div>
-                <div className="row">
-                    <div className="col-md-2">
+                <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-md-10">
+                <div className="col-sm-10 table-responsive">
                     <AlbumTracksTable tracks={this.props.album.tracks} />
                 </div>
             </div>
-            </div>
         );
     }
 }

app/components/Artist.jsx

@@ -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>

app/components/Songs.jsx

@@ -50,6 +50,7 @@ export class SongsTable extends Component {
             rows.push(<SongsTableRow song={song} key={song.id} />);
         });
         return (
+            <div className="table-responsive">
                 <table className="table table-hover songs">
                     <thead>
                         <tr>
@@ -63,6 +64,7 @@ export class SongsTable extends Component {
                     </thead>
                     <tbody>{rows}</tbody>
                 </table>
+            </div>
         );
     }
 }

app/dist/fix.ie9.js

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

app/dist/style.css

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

app/styles/ampache.css

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