Sidebar tweaking; Header buttons unified height; List glitch on Chrome

src/js/components/ContextMenu.js

@@ -215,9 +215,9 @@ class ContextMenu extends React.Component{
 
 		var className = 'context-menu'
 		var trigger = 'click'
-		if (this.props.trigger_override) {
-			className += ' '+this.props.trigger_override
-			trigger = this.props.trigger_override
+		if (this.props.emulate_touch) {
+			className += ' touch'
+			trigger = 'touch'
 		} else {
 			className += ' '+this.props.context_menu.trigger
 		}
@@ -232,7 +232,7 @@ class ContextMenu extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
-		trigger_override: state.ui.trigger_override,
+		emulate_touch: state.ui.emulate_touch,
 		context_menu: state.ui.context_menu,
 		current_track: state.ui.current_track,
 		current_tracklist: state.ui.current_tracklist,

src/js/components/List.js

@@ -40,7 +40,9 @@ export default class List extends React.Component{
 		var value = row
 
 		for (var i = 0; i < key.length; i++) {
-			if (typeof(value[key[i]]) === 'undefined' || value[key[i]].trim() == '') {
+			if (typeof(value[key[i]]) === 'undefined') {
+				return <span>-</span>
+			} else if ( typeof(value[key[i]]) === 'string' && value[key[i]].replace(' ','') == '') {
 				return <span>-</span>
 			} else {
 				value = value[key[i]]

src/js/views/Debug.js

@@ -67,35 +67,16 @@ class Debug extends React.Component{
 
 					<h4 className="underline">User interface</h4>
 					<form>
-						<div className="field radio">
-							<div className="name">Touch/click behavior</div>
+						<div className="field checkbox">
+							<div className="name">Emulation</div>
 							<div className="input">
 								<label>
 									<input 
-										type="radio"
-										name="touch_mode"
-										value="default"
-										checked={ !this.props.trigger_override }
-										onChange={ e => this.props.uiActions.set({ trigger_override: null })} />
-									<span className="label">Default</span>
-								</label>
-								<label>
-									<input 
-										type="radio"
-										name="touch_mode"
-										value="click"
-										checked={ this.props.trigger_override == 'click' }
-										onChange={ e => this.props.uiActions.set({ trigger_override: e.target.value })} />
-									<span className="label">Click</span>
-								</label>
-								<label>
-									<input 
-										type="radio"
-										name="touch_mode"
-										value="touch"
-										checked={ this.props.trigger_override == 'touch' }
-										onChange={ e => this.props.uiActions.set({ trigger_override: e.target.value })} />
-									<span className="label">Touch</span>
+										type="checkbox"
+										name="emulate_touch"
+										checked={ this.props.emulate_touch }
+										onChange={ e => this.props.uiActions.set({ emulate_touch: !this.props.emulate_touch })} />
+									<span className="label">Mouse events as touch</span>
 								</label>
 							</div>
 						</div>
@@ -188,7 +169,7 @@ class Debug extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		connectionid: state.pusher.connectionid,
-		trigger_override: state.ui.trigger_override,
+		emulate_touch: state.ui.emulate_touch,
 		debug_response: state.ui.debug_response
 	}
 }

src/js/views/Settings.js

@@ -153,8 +153,13 @@ class Settings extends React.Component{
 									onChange={ e => this.setState({ mopidy_port: e.target.value })} 
 									value={ this.state.mopidy_port } />
 							</div>
+						</div>					
+						<div className="field">
+							<div className="name"></div>
+							<div className="input">
+								<button type="submit" className="secondary">Apply</button>
+							</div>
 						</div>
-						<button type="submit" className="secondary">Apply</button>
 					</form>
 
 					<h4 className="underline">Pusher</h4>

src/scss/components/_dropdown-field.scss

@@ -7,7 +7,7 @@
 	display: inline-block;
 
 	.label {
-		padding: 18px 10px;		
+		padding: 14px 10px;		
 		cursor: pointer;
 	}
 
@@ -24,7 +24,7 @@
 	.options {
 		color: #FFFFFF;
 		position: absolute;
-		top: 54px;
+		top: 52px;
 		right: 0px;
 		z-index: 97;
 		background: $dark_grey;

src/scss/components/_header.scss

@@ -3,6 +3,7 @@ main {
 	header {
 		padding: 14px 20px;
 		background: #EEEEEE;
+		line-height: 24px;
 
 		h1 {
 			font-size: 22px;
@@ -31,7 +32,7 @@ main {
 				background: transparent;
 				font-size: 14px;
 				font-weight: 600;
-				padding: 16px 10px;
+				padding: 14px 10px;
 				text-transform: uppercase;
 			}
 		}

src/scss/components/_notifications.scss

@@ -6,6 +6,7 @@
 	left: 0;
 	right: 0;
 	text-align: center;
+	z-index: 100;
 
 	.notification {
 		display: inline-block;

src/scss/components/_sidebar.scss

@@ -5,7 +5,7 @@ aside{
 	left: 0;
 	bottom: 0;
 	z-index: 96;
-	background: #111111;
+	background: $darkest_grey;
 	width: 220px;
 	overflow: hidden;
 	box-shadow: inset -20px 0px 30px -20px rgba(0, 0, 0, 0.5);

src/scss/global/_variables.scss

@@ -5,6 +5,7 @@ $faint_grey: #EEEEEE;
 $light_grey: #DDDDDD;
 $mid_grey: #AAAAAA;
 $dark_grey: #333333;
+$darkest_grey: #111111;
 $secondary_grey: #888888;
 $red: #cf2d2d;
 $green: #47af2a;

src/scss/views/_artist.scss

@@ -90,8 +90,10 @@
 
 			.parallax {
 				height: 100%;
+				background: $darkest_grey;
 				canvas {
-					@include blur( 10px );
+					opacity: 0.2;
+					@include blur( 5px );
 				}
 			}