Rework a bit settings view

app/components/Album.jsx

@@ -116,7 +116,7 @@ class AlbumRowCSS extends Component {
     render() {
         return (
             <div className="row" styleName="row">
-                <div className="col-sm-offset-2 col-xs-9 col-sm-10" styleName="nameRow">
+                <div className="col-xs-9 col-sm-offset-2 col-sm-10" styleName="nameRow">
                     <h2>{this.props.album.get("name")}</h2>
                 </div>
                 <div className="col-xs-3 col-sm-2" styleName="artRow">

app/components/Artist.jsx

@@ -87,16 +87,16 @@ class ArtistCSS extends Component {
             <div>
                 { error }
                 <div className="row" styleName="name">
-                    <div className="col-sm-12">
+                    <div className="col-xs-12">
                         <h1>{this.props.artist.get("name")}</h1>
                         <hr/>
                     </div>
                 </div>
                 <div className="row">
-                    <div className="col-sm-9">
+                    <div className="col-xs-9">
                         <p>{this.props.artist.get("summary")}</p>
                     </div>
-                    <div className="col-sm-3 text-center">
+                    <div className="col-xs-3 text-center">
                         <p><img src={this.props.artist.get("art")} width="200" height="200" className="img-responsive img-circle" styleName="art" alt={this.props.artist.get("name")}/></p>
                     </div>
                 </div>

app/components/Login.jsx

@@ -131,7 +131,7 @@ class LoginFormCSSIntl extends Component {
                         : null
                 }
                 <div className="row">
-                    <form className="col-sm-9 col-sm-offset-1 col-md-6 col-md-offset-3 text-left form-horizontal login" onSubmit={this.handleSubmit} ref="loginForm" aria-describedby="loginFormInfo loginFormError">
+                    <form className="col-xs-9 col-xs-offset-1 col-md-6 col-md-offset-3 text-left form-horizontal login" onSubmit={this.handleSubmit} ref="loginForm" aria-describedby="loginFormInfo loginFormError">
                         <div className="row">
                             <div className="form-group" ref="usernameFormGroup">
                                 <div className="col-xs-12">
@@ -198,7 +198,7 @@ class LoginCSS extends Component {
                 <h1><img styleName="titleImage" src="./img/ampache-blue.png" alt="A"/>mpache</h1>
                 <hr/>
                 {(!this.props.error && !this.props.info) ? greeting : null}
-                <div className="col-sm-9 col-sm-offset-2 col-md-6 col-md-offset-3">
+                <div className="col-xs-9 col-xs-offset-2 col-md-6 col-md-offset-3">
                     <LoginForm onSubmit={this.props.onSubmit} username={this.props.username} endpoint={this.props.endpoint} rememberMe={this.props.rememberMe} isAuthenticating={this.props.isAuthenticating} error={this.props.error} info={this.props.info} />
                 </div>
             </div>

app/components/Playlist.jsx

@@ -62,12 +62,21 @@ class PlaylistIntl extends Component {
             );
         }
         return (
-            <div className="row">
+            <div>
-                <h2 className="text-center">
+                <div className="row">
-                    <FormattedMessage {...playlistMessages["app.playlist.playlist"]} />
+                    <div className="col-xs-12">
-                </h2>
+                        <h2>
+                            <FormattedMessage {...playlistMessages["app.playlist.playlist"]} />
+                        </h2>
+                        <hr />
+                    </div>
+                </div>
 
-                { playlistText }
+                <div className="row">
+                    <div className="col-xs-12">
+                        { playlistText }
+                    </div>
+                </div>
             </div>
         );
 

app/components/Settings.jsx

@@ -1,26 +1,44 @@
 // NPM imports
 import React, { Component } from "react";
-import CSSModules from "react-css-modules";
+import { defineMessages, injectIntl, intlShape, FormattedMessage } from "react-intl";
-import { injectIntl, intlShape } from "react-intl";
 
-// Styles
+// Local imports
-import css from "../styles/Songs.scss";
+import { messagesMap } from "../utils";
+
+// Translations
+import commonMessages from "../locales/messagesDescriptors/common";
+import messages from "../locales/messagesDescriptors/Settings";
+
+// Define translations
+const settingsMessages = defineMessages(messagesMap(Array.concat([], commonMessages, messages)));
 
 
 /**
  * A single row for a single song in the songs table.
  */
-class SettingsCSSIntl extends Component {
+class SettingsIntl extends Component {
     render() {
         return (
             <div>
-                <h2>Settings</h2>
+                <div className="row">
-                <p>TODO</p>
+                    <div className="col-xs-12">
+                        <h2>
+                            <FormattedMessage {...settingsMessages["app.settings.settings"]} />
+                        </h2>
+                        <hr/>
+                    </div>
+                </div>
+
+                <div className="row">
+                    <div className="col-xs-12">
+                        <p>TODO</p>
+                    </div>
+                </div>
             </div>
         );
     }
 }
-SettingsCSSIntl.propTypes = {
+SettingsIntl.propTypes = {
     intl: intlShape.isRequired,
 };
-export default injectIntl(CSSModules(SettingsCSSIntl, css));
+export default injectIntl(SettingsIntl);

app/locales/en-US/index.js

@@ -37,6 +37,7 @@ module.exports = {
     "app.playlist.flushPlaylist": "Empty the playlist",  // Empty the playlist link label
     "app.playlist.fullPlaylist": "Full playlist",  // Full playlist
     "app.playlist.playlist": "Playlist",  // Playlist translation
+    "app.settings.settings": "Settings",  // Settings translation
     "app.sidebarLayout.browse": "Browse",  // Browse
     "app.sidebarLayout.browseAlbums": "Browse albums",  // Browse albums
     "app.sidebarLayout.browseArtists": "Browse artists",  // Browse artists

app/locales/fr-FR/index.js

@@ -37,6 +37,7 @@ module.exports = {
     "app.playlist.flushPlaylist": "Vider la playlist",  // Empty the playlist link label
     "app.playlist.fullPlaylist": "Playlist complète",  // Full playlist
     "app.playlist.playlist": "Liste de lecture",  // Playlist translation
+    "app.settings.settings": "Préférences",  // Settings translation
     "app.sidebarLayout.browse": "Explorer",  // Browse
     "app.sidebarLayout.browseAlbums": "Parcourir les albums",  // Browse albums
     "app.sidebarLayout.browseArtists": "Parcourir les artistes",  // Browse artists

app/locales/messagesDescriptors/Settings.js

@@ -0,0 +1,9 @@
+const messages = [
+    {
+        "id": "app.settings.settings",
+        "defaultMessage": "Settings",
+        "description": "Settings translation",
+    },
+];
+
+export default messages;

app/styles/layouts/Sidebar.scss

@@ -37,18 +37,19 @@ $condensedNavPadding: 5px;
     text-decoration: none;
 }
 
-.link:hover {
-    color: $foreground;
-    background-color: $hoverBackground !important;
-    text-decoration: none;
-}
-
 .link:focus {
     color: $foreground;
     background-color: transparent !important;
     text-decoration: none;
 }
 
+/** Note: Keep hover after focus pseudo-class so that hover overloads focus. */
+.link:hover {
+    color: $foreground;
+    background-color: $hoverBackground !important;
+    text-decoration: none;
+}
+
 .active {
     composes: link;
     background-color: $activeBackground !important;

public/fix.ie9.js

@@ -1,2 +1,2 @@
-!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(639);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},639:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
+!function(e){function t(r){if(n[r])return n[r].exports;var a=n[r]={exports:{},id:r,loaded:!1};return e[r].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n={};return t.m=e,t.c=n,t.p="./",t(0)}({0:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(640);Object.keys(r).forEach(function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(t,e,{enumerable:!0,get:function(){return r[e]}})})},640:function(e,t){!function(t,n){function r(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function a(){var e=b.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=b.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),b.elements=n+" "+e,s(t)}function c(e){var t=E[e[v]];return t||(t={},y++,e[v]=y,E[y]=t),t}function i(e,t,r){if(t||(t=n),f)return t.createElement(e);r||(r=c(t));var a;return a=r.cache[e]?r.cache[e].cloneNode():g.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!a.canHaveChildren||p.test(e)||a.tagUrn?a:r.frag.appendChild(a)}function l(e,t){if(e||(e=n),f)return e.createDocumentFragment();t=t||c(e);for(var r=t.frag.cloneNode(),o=0,i=a(),l=i.length;o<l;o++)r.createElement(i[o]);return r}function u(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return b.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+a().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(b,t.frag)}function s(e){e||(e=n);var t=c(e);return!b.shivCSS||d||t.hasCSS||(t.hasCSS=!!r(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||u(e,t),e}var d,f,m="3.7.3-pre",h=t.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,g=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,v="_html5shiv",y=0,E={};!function(){try{var e=n.createElement("a");e.innerHTML="<xyz></xyz>",d="hidden"in e,f=1==e.childNodes.length||function(){n.createElement("a");var e=n.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(t){d=!0,f=!0}}();var b={elements:h.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:m,shivCSS:h.shivCSS!==!1,supportsUnknownElements:f,shivMethods:h.shivMethods!==!1,type:"default",shivDocument:s,createElement:i,createDocumentFragment:l,addElements:o};t.html5=b,s(n),"object"==typeof e&&e.exports&&(e.exports=b)}("undefined"!=typeof window?window:this,document)}});
 //# sourceMappingURL=fix.ie9.js.map