Volume and mute controls

mopidy_iris/static/app.css

@@ -3183,25 +3183,25 @@ input[type="submit"] {
     content: '';
     clear: both;
     display: block; }
-  .field .name {
+  .field > .name {
     display: block;
     padding-top: 10px;
     width: 20%;
     float: left; }
+  .field > .input {
+    width: 80%;
+    float: left; }
+    .field > .input input,
+    .field > .input select,
+    .field > .input textarea {
+      width: 100%; }
+    .field > .input .text {
+      display: block;
+      padding: 10px 14px 10px 0; }
   .field label {
     display: inline-block; }
   .field .label .tooltip {
     left: -4px; }
-  .field .input {
-    width: 80%;
-    float: left; }
-    .field .input input,
-    .field .input select,
-    .field .input textarea {
-      width: 100%; }
-    .field .input .text {
-      display: block;
-      padding: 10px 14px 10px 0; }
   .field.radio input, .field.checkbox input {
     display: none; }
   .field.radio .input, .field.checkbox .input {
@@ -4269,19 +4269,44 @@ input[type="submit"] {
         left: 0;
         right: 0; } }
 
-.snapcast .mute-button {
+.snapcast .group > .inner {
-  display: inline-block;
+  padding-bottom: 5px;
-  padding: 10px;
-  cursor: pointer; }
-  .snapcast .mute-button:hover {
-    color: #08d58f; }
-
-.snapcast .group {
-  padding: 10px 0;
   border-bottom: 1px solid #383734; }
-  .snapcast .group .clients .client {
+  .snapcast .group > .inner > .name {
-    padding: 10px 0 10px 20px;
+    font-weight: bold; }
-    border-top: 1px solid #383734; }
+
+.snapcast .group .clients .client.disconnected {
+  opacity: 0.5; }
+
+.snapcast .group .clients .client > .inner {
+  padding: 5px 5px 5px 20px;
+  border-bottom: 1px solid #383734; }
+
+.snapcast .group .clients .client .name {
+  padding: 6px 0 5px 0;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  border: 0; }
+  .snapcast .group .clients .client .name.editing {
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: 14px;
+    letter-spacing: -0.01rem;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }
+
+.snapcast .group .clients .client .volume-control .mute-control {
+  display: inline-block;
+  float: left;
+  padding: 0 10px;
+  border: 0; }
+
+.snapcast .group .clients .client .volume-control .slider-wrapper {
+  padding-left: 30px; }
+
+.snapcast .group .clients .client .volume-control.muted .slider .progress {
+  background: #a3a19f; }
 
 aside {
   position: fixed;

mopidy_iris/static/app.js

@@ -15591,6 +15591,7 @@ exports.queueMetadataChanged = queueMetadataChanged;
 exports.addQueueMetadata = addQueueMetadata;
 exports.getSnapcast = getSnapcast;
 exports.setSnapcastClientVolume = setSnapcastClientVolume;
+exports.setSnapcastClientName = setSnapcastClientName;
 
 /**
  * Actions and Action Creators
@@ -15787,6 +15788,19 @@ function setSnapcastClientVolume(id, muted, percent) {
 	};
 }
 
+function setSnapcastClientName(id, name) {
+	return {
+		type: 'PUSHER_SET_SNAPCAST_CLIENT_NAME',
+		data: {
+			method: 'Client.SetName',
+			params: {
+				id: id,
+				name: name
+			}
+		}
+	};
+}
+
 /***/ }),
 /* 25 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -51612,7 +51626,9 @@ function reducer() {
 
         case 'PUSHER_SNAPCAST_CLIENT_UPDATED':
             var snapcast_clients = Object.assign({}, pusher.snapcast_clients);
-            snapcast_clients[action.key] = Object.assign({}, snapcast_clients[action.key], action.client);
+            var client = snapcast_clients[action.key];
+            client.config = Object.assign({}, client.config, action.client.config);
+            snapcast_clients[action.key] = client;
             return Object.assign({}, pusher, { snapcast_clients: snapcast_clients });
 
         default:
@@ -53574,6 +53590,22 @@ var PusherMiddleware = function () {
                         });
                         break;
 
+                    case 'PUSHER_SET_SNAPCAST_CLIENT_NAME':
+                        request(store, 'snapcast_instruct', action.data).then(function (response) {
+                            store.dispatch({
+                                type: 'PUSHER_SNAPCAST_CLIENT_UPDATED',
+                                key: action.data.params.id,
+                                client: {
+                                    config: {
+                                        name: response.name
+                                    }
+                                }
+                            });
+                        }, function (error) {
+                            store.dispatch(coreActions.handleException('Error', error, error.message));
+                        });
+                        break;
+
                     // This action is irrelevant to us, pass it on to the next middleware
                     default:
                         return next(action);
@@ -60417,7 +60449,16 @@ var PlaybackControls = function (_React$Component) {
 				_react2.default.createElement(
 					'section',
 					{ className: 'volume' },
-					_react2.default.createElement(_VolumeControl2.default, null)
+					_react2.default.createElement(_VolumeControl2.default, {
+						volume: this.props.volume,
+						mute: this.props.mute,
+						onVolumeChange: function onVolumeChange(percent) {
+							return _this6.props.mopidyActions.setVolume(percent);
+						},
+						onMuteChange: function onMuteChange(mute) {
+							return _this6.props.mopidyActions.setMute(mute);
+						}
+					})
 				),
 				_react2.default.createElement(
 					'section',
@@ -60463,6 +60504,8 @@ var mapStateToProps = function mapStateToProps(state, ownProps) {
 		consume: state.mopidy.consume,
 		repeat: state.mopidy.repeat,
 		random: state.mopidy.random,
+		volume: state.mopidy.volume,
+		mute: state.mopidy.mute,
 		sidebar_open: state.ui.sidebar_open
 	};
 };
@@ -60608,26 +60651,10 @@ var _react = __webpack_require__(1);
 
 var _react2 = _interopRequireDefault(_react);
 
-var _reactRedux = __webpack_require__(4);
-
-var _redux = __webpack_require__(3);
-
-var _reactRouter = __webpack_require__(8);
-
 var _reactFontawesome = __webpack_require__(6);
 
 var _reactFontawesome2 = _interopRequireDefault(_reactFontawesome);
 
-var _actions = __webpack_require__(11);
-
-var mopidyActions = _interopRequireWildcard(_actions);
-
-var _actions2 = __webpack_require__(5);
-
-var uiActions = _interopRequireWildcard(_actions2);
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -60661,7 +60688,7 @@ var VolumeControl = function (_React$Component) {
 				percent = 0;
 			}
 
-			this.props.mopidyActions.setVolume(percent);
+			this.props.onVolumeChange(percent);
 		}
 	}, {
 		key: 'handleWheel',
@@ -60681,8 +60708,7 @@ var VolumeControl = function (_React$Component) {
 				percent = 0;
 			}
 
-			this.props.mopidyActions.setVolume(percent);
+			this.props.onVolumeChange(percent);
-
 			e.preventDefault();
 		}
 	}, {
@@ -60693,10 +60719,10 @@ var VolumeControl = function (_React$Component) {
 			if (this.props.mute) {
 				return _react2.default.createElement(
 					'a',
-					{ className: 'control has-tooltip', onClick: function onClick() {
+					{ className: 'control mute-control has-tooltip', onClick: function onClick() {
-							return _this2.props.mopidyActions.setMute(false);
+							return _this2.props.onMuteChange(false);
 						} },
-					_react2.default.createElement(_reactFontawesome2.default, { className: 'red-text', name: 'volume-down' }),
+					_react2.default.createElement(_reactFontawesome2.default, { className: 'red-text', name: 'volume-off' }),
 					_react2.default.createElement(
 						'span',
 						{ className: 'tooltip' },
@@ -60706,8 +60732,8 @@ var VolumeControl = function (_React$Component) {
 			} else {
 				return _react2.default.createElement(
 					'a',
-					{ className: 'control has-tooltip', onClick: function onClick() {
+					{ className: 'control mute-control has-tooltip', onClick: function onClick() {
-							return _this2.props.mopidyActions.setMute(true);
+							return _this2.props.onMuteChange(true);
 						} },
 					_react2.default.createElement(_reactFontawesome2.default, { className: 'muted', name: 'volume-off' }),
 					_react2.default.createElement(
@@ -60755,21 +60781,7 @@ var VolumeControl = function (_React$Component) {
 	return VolumeControl;
 }(_react2.default.Component);
 
-var mapStateToProps = function mapStateToProps(state, ownProps) {
+exports.default = VolumeControl;
-	return {
-		volume: state.mopidy.volume,
-		mute: state.mopidy.mute
-	};
-};
-
-var mapDispatchToProps = function mapDispatchToProps(dispatch) {
-	return {
-		uiActions: (0, _redux.bindActionCreators)(uiActions, dispatch),
-		mopidyActions: (0, _redux.bindActionCreators)(mopidyActions, dispatch)
-	};
-};
-
-exports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(VolumeControl);
 
 /***/ }),
 /* 379 */
@@ -71092,6 +71104,10 @@ var _ArtistSentence = __webpack_require__(27);
 
 var _ArtistSentence2 = _interopRequireDefault(_ArtistSentence);
 
+var _VolumeControl = __webpack_require__(378);
+
+var _VolumeControl2 = _interopRequireDefault(_VolumeControl);
+
 var _helpers = __webpack_require__(2);
 
 var helpers = _interopRequireWildcard(_helpers);
@@ -71124,7 +71140,12 @@ var Snapcast = function (_React$Component) {
 	function Snapcast(props) {
 		_classCallCheck(this, Snapcast);
 
-		return _possibleConstructorReturn(this, (Snapcast.__proto__ || Object.getPrototypeOf(Snapcast)).call(this, props));
+		var _this = _possibleConstructorReturn(this, (Snapcast.__proto__ || Object.getPrototypeOf(Snapcast)).call(this, props));
+
+		_this.state = {
+			editing_client: null
+		};
+		return _this;
 	}
 
 	_createClass(Snapcast, [{
@@ -71142,25 +71163,37 @@ var Snapcast = function (_React$Component) {
 			}
 		}
 	}, {
-		key: 'renderMuteToggle',
+		key: 'saveEditingClient',
-		value: function renderMuteToggle(client) {
+		value: function saveEditingClient() {
+			this.props.pusherActions.setSnapcastClientName(this.state.editing_client.id, this.state.editing_client.name);
+			this.setState({ editing_client: null });
+		}
+	}, {
+		key: 'renderClientName',
+		value: function renderClientName(client) {
 			var _this2 = this;
 
-			if (client.config.volume.muted) {
+			if (this.state.editing_client && this.state.editing_client.id == client.id) {
-				return _react2.default.createElement(
+				return _react2.default.createElement('input', {
-					'span',
+					className: 'name editing',
-					{ className: 'mute-button', onClick: function onClick(e) {
+					value: this.state.editing_client.name,
-							return _this2.props.pusherActions.setSnapcastClientVolume(client.id, false, client.config.volume.percent);
+					onChange: function onChange(e) {
-						} },
+						return _this2.setState({ editing_client: { id: client.id, name: e.target.value } });
-					_react2.default.createElement(_reactFontawesome2.default, { name: 'volume-off' })
+					},
-				);
+					onBlur: function onBlur(e) {
+						return _this2.saveEditingClient();
+					}
+				});
 			} else {
+				var name = client.config.name ? client.config.name : client.host.name;
 				return _react2.default.createElement(
-					'span',
+					'div',
-					{ className: 'mute-button', onClick: function onClick(e) {
+					{ className: 'name', onClick: function onClick(e) {
-							return _this2.props.pusherActions.setSnapcastClientVolume(client.id, true, client.config.volume.percent);
+							return _this2.setState({ editing_client: { id: client.id, name: name } });
 						} },
-					_react2.default.createElement(_reactFontawesome2.default, { name: 'volume-up' })
+					name,
+					' ',
+					!client.connected ? '(disconnected)' : null
 				);
 			}
 		}
@@ -71200,20 +71233,41 @@ var Snapcast = function (_React$Component) {
 					return _react2.default.createElement(
 						'div',
 						{ className: 'group', key: group.id },
-						group.muted ? _react2.default.createElement(_reactFontawesome2.default, { name: 'volume-off' }) : _react2.default.createElement(_reactFontawesome2.default, { name: 'volume-up' }),
+						_react2.default.createElement(
-						' ',
+							'div',
-						group.name ? group.name : 'Untitled',
+							{ className: 'inner' },
+							_react2.default.createElement(
+								'div',
+								{ className: 'name' },
+								group.name ? group.name : 'Untitled group'
+							)
+						),
 						_react2.default.createElement(
 							'div',
 							{ className: 'clients' },
 							group.clients.map(function (client) {
 								return _react2.default.createElement(
 									'div',
-									{ className: 'client', key: client.id },
+									{ className: "client " + (client.connected ? 'connected' : 'disconnected'), key: client.id },
-									_this3.renderMuteToggle(client),
+									_react2.default.createElement(
-									client.config.name ? client.config.name : client.host.name,
+										'div',
-									' ',
+										{ className: 'inner' },
-									client.config.volume.percent
+										_this3.renderClientName(client),
+										_react2.default.createElement(
+											'div',
+											{ className: 'controls' },
+											_react2.default.createElement(_VolumeControl2.default, {
+												volume: client.config.volume.percent,
+												mute: client.config.volume.muted,
+												onVolumeChange: function onVolumeChange(percent) {
+													return _this3.props.pusherActions.setSnapcastClientVolume(client.id, client.config.volume.muted, percent);
+												},
+												onMuteChange: function onMuteChange(mute) {
+													return _this3.props.pusherActions.setSnapcastClientVolume(client.id, mute, client.config.volume.percent);
+												}
+											})
+										)
+									)
 								);
 							})
 						)

src/js/components/PlaybackControls.js

@@ -114,7 +114,12 @@ class PlaybackControls extends React.Component{
 				</section>
 
 				<section className="volume">
-					<VolumeControl />
+					<VolumeControl 
+						volume={this.props.volume}
+						mute={this.props.mute}
+						onVolumeChange={percent => this.props.mopidyActions.setVolume(percent)}
+						onMuteChange={mute => this.props.mopidyActions.setMute(mute)}
+					/>
 				</section>
 
 				<section className="triggers">
@@ -151,6 +156,8 @@ const mapStateToProps = (state, ownProps) => {
 		consume: state.mopidy.consume,
 		repeat: state.mopidy.repeat,
 		random: state.mopidy.random,
+		volume: state.mopidy.volume,
+		mute: state.mopidy.mute,
 		sidebar_open: state.ui.sidebar_open
 	}
 }

src/js/components/Snapcast.js

@@ -6,6 +6,8 @@ import { Link, hashHistory } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 
 import ArtistSentence from './ArtistSentence'
+import VolumeControl from './VolumeControl'
+
 import * as helpers from '../helpers'
 import * as coreActions from '../services/core/actions'
 import * as uiActions from '../services/ui/actions'
@@ -14,7 +16,11 @@ import * as pusherActions from '../services/pusher/actions'
 class Snapcast extends React.Component{
 
 	constructor(props){
-		super(props)
+		super(props);
+
+		this.state = {
+			editing_client: null
+		}
 	}
 
 	componentDidMount(){
@@ -29,18 +35,27 @@ class Snapcast extends React.Component{
 		}
 	}
 
-	renderMuteToggle(client){
+	saveEditingClient(){
-		if (client.config.volume.muted){
+		this.props.pusherActions.setSnapcastClientName(this.state.editing_client.id, this.state.editing_client.name);
+		this.setState({editing_client: null});
+	}
+
+	renderClientName(client){
+		if (this.state.editing_client && this.state.editing_client.id == client.id){
 			return (
-				<span className="mute-button" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, false, client.config.volume.percent)}>
+				<input 
-					<FontAwesome name="volume-off" />
+					className="name editing"
-				</span>
+					value={this.state.editing_client.name}
+					onChange={e => this.setState({editing_client: {id: client.id, name: e.target.value}})}
+					onBlur={e => this.saveEditingClient()}
+				/>
 			);
 		} else {
+			var name = client.config.name ? client.config.name : client.host.name;
 			return (
-				<span className="mute-button" onClick={e => this.props.pusherActions.setSnapcastClientVolume(client.id, true, client.config.volume.percent)}>
+				<div className="name" onClick={e => this.setState({editing_client: {id: client.id, name: name}})}>
-					<FontAwesome name="volume-up" />
+					{name} {!client.connected ? '(disconnected)' : null}
-				</span>
+				</div>
 			);
 		}
 	}
@@ -80,14 +95,27 @@ class Snapcast extends React.Component{
 					groups.map(group => {
 						return (
 							<div className="group" key={group.id}>
-								{group.muted ? <FontAwesome name="volume-off" /> : <FontAwesome name="volume-up" />} {group.name ? group.name : 'Untitled'}
+								<div className="inner">
+									<div className="name">
+										{group.name ? group.name : 'Untitled group'}
+									</div>
+								</div>
 								<div className="clients">
 									{
 										group.clients.map(client => {
 											return (
-												<div className="client" key={client.id}>
+												<div className={"client "+(client.connected ? 'connected' : 'disconnected')} key={client.id}>
-													{this.renderMuteToggle(client)}
+													<div className="inner">
-													{client.config.name ? client.config.name : client.host.name} {client.config.volume.percent}
+														{this.renderClientName(client)}
+														<div className="controls">
+															<VolumeControl 
+																volume={client.config.volume.percent}
+																mute={client.config.volume.muted}
+																onVolumeChange={percent => this.props.pusherActions.setSnapcastClientVolume(client.id, client.config.volume.muted, percent)}
+																onMuteChange={mute => this.props.pusherActions.setSnapcastClientVolume(client.id, mute, client.config.volume.percent)}
+															/>
+														</div>
+													</div>
 												</div>
 											);
 										})

src/js/components/VolumeControl.js

@@ -1,14 +1,8 @@
 
 import React, { PropTypes } from 'react'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { Link } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 
-import * as mopidyActions from '../services/mopidy/actions'
+export default class VolumeControl extends React.Component{
-import * as uiActions from '../services/ui/actions'
-
-class VolumeControl extends React.Component{
 
 	constructor(props){
 		super(props)
@@ -28,7 +22,7 @@ class VolumeControl extends React.Component{
 			percent = 0
 		}
 
-		this.props.mopidyActions.setVolume(percent)
+		this.props.onVolumeChange(percent);
 	}
 
 	handleWheel(e){
@@ -47,22 +41,21 @@ class VolumeControl extends React.Component{
 			percent = 0
 		}
 
-		this.props.mopidyActions.setVolume(percent);
+		this.props.onVolumeChange(percent);
-
 		e.preventDefault();
 	}
 
 	renderMuteButton(){
 		if (this.props.mute){
 			return (
-				<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(false)}>
+				<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(false)}>
-					<FontAwesome className="red-text" name="volume-down" />
+					<FontAwesome className="red-text" name="volume-off" />
 					<span className="tooltip">Unmute</span>
 				</a>
 			)
 		} else {
 			return (
-				<a className="control has-tooltip" onClick={() => this.props.mopidyActions.setMute(true)}>
+				<a className="control mute-control has-tooltip" onClick={() => this.props.onMuteChange(true)}>
 					<FontAwesome className="muted" name="volume-off" />
 					<span className="tooltip">Mute</span>
 				</a>
@@ -89,19 +82,3 @@ class VolumeControl extends React.Component{
 		);
 	}
 }
-
-const mapStateToProps = (state, ownProps) => {
-	return {
-		volume: state.mopidy.volume,
-		mute: state.mopidy.mute
-	}
-}
-
-const mapDispatchToProps = (dispatch) => {
-	return {
-		uiActions: bindActionCreators(uiActions, dispatch),
-		mopidyActions: bindActionCreators(mopidyActions, dispatch)
-	}
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(VolumeControl)

src/js/services/pusher/actions.js

@@ -187,3 +187,16 @@ export function setSnapcastClientVolume(id, muted, percent){
 	}
 }
 
+export function setSnapcastClientName(id, name){
+	return {
+		type: 'PUSHER_SET_SNAPCAST_CLIENT_NAME',
+		data: {
+			method: 'Client.SetName',
+			params: {
+				id: id,
+				name: name
+			}
+		}
+	}
+}
+

src/js/services/pusher/middleware.js

@@ -580,6 +580,30 @@ const PusherMiddleware = (function(){
                     );
                 break
 
+            case 'PUSHER_SET_SNAPCAST_CLIENT_NAME':
+                request(store, 'snapcast_instruct', action.data)
+                    .then(
+                        response => {
+                            store.dispatch({
+                                type: 'PUSHER_SNAPCAST_CLIENT_UPDATED', 
+                                key: action.data.params.id,
+                                client: {
+                                    config: {
+                                        name: response.name
+                                    }
+                                }
+                            })
+                        },
+                        error => {                            
+                            store.dispatch(coreActions.handleException(
+                                'Error',
+                                error,
+                                error.message
+                            ));
+                        }
+                    );
+                break
+
             // This action is irrelevant to us, pass it on to the next middleware
             default:
                 return next(action);

src/js/services/pusher/reducer.js

@@ -56,7 +56,9 @@ export default function reducer(pusher = {}, action){
 
         case 'PUSHER_SNAPCAST_CLIENT_UPDATED':
             var snapcast_clients = Object.assign({}, pusher.snapcast_clients);
-            snapcast_clients[action.key] = Object.assign({}, snapcast_clients[action.key], action.client);
+            var client = snapcast_clients[action.key];
+            client.config = Object.assign({}, client.config, action.client.config);
+            snapcast_clients[action.key] = client;
             return Object.assign({}, pusher, { snapcast_clients: snapcast_clients });
 
         default:

src/scss/components/_snapcast.scss

@@ -1,24 +1,63 @@
 
 .snapcast {
 
-	.mute-button {
-		display: inline-block;
-		padding: 10px;
-		cursor: pointer;
-
-		&:hover {
-			color: $turquoise;
-		}
-	}
-
 	.group {
-		padding: 10px 0;
+		& > .inner {
-		border-bottom: 1px solid $grey;
+			padding-bottom: 5px;
+			border-bottom: 1px solid $grey;
+
+			& > .name {
+				font-weight: bold;
+			}
+		}
 
 		.clients {
 			.client {
-				padding: 10px 0 10px 20px;
+
-				border-top: 1px solid $grey;
+				&.disconnected {
+					opacity: 0.5;
+				}
+
+				& > .inner {
+					padding: 5px 5px 5px 20px;
+					border-bottom: 1px solid $grey;
+				}
+
+				.name {
+					padding: 6px 0 5px 0;
+					display: block;
+					width: 100%;
+					box-sizing: border-box;
+					border: 0;
+
+					&.editing {
+						background: transparent;
+						color: inherit;
+						font-family: inherit;
+						font-size: 14px;
+						letter-spacing: -0.01rem;
+						text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+					}
+				}
+
+				.volume-control {
+					.mute-control {
+						display: inline-block;
+						float: left;
+						padding: 0 10px;
+						border: 0;
+					}
+
+					.slider-wrapper {
+						padding-left: 30px;
+					}
+
+					&.muted {
+						.slider .progress {
+							background: $mid_grey;
+						}
+					}
+				}
 			}
 		}
 	}

src/scss/global/_forms.scss

@@ -208,28 +208,18 @@ input[type="submit"] {
 }
 
 .field {
+	@include clearfix();
 	display: block;
 	padding-bottom: 12px;
-	@include clearfix;
 
-	.name {
+	& > .name {
 		display: block;
 		padding-top: 10px;
 		width: 20%;
 		float: left;
 	}
 
-	label {
+	& > .input {
-		display: inline-block;
-	}
-
-	.label {
-		.tooltip {
-			left: -4px;
-		}
-	}
-
-	.input {
 		width: 80%;
 		float: left;
 		
@@ -245,6 +235,16 @@ input[type="submit"] {
 		}
 	}
 
+	label {
+		display: inline-block;
+	}
+
+	.label {
+		.tooltip {
+			left: -4px;
+		}
+	}
+
 	&.radio,
 	&.checkbox {
 		input{