UI Tweaks

Author: Colin McLeod

src/app/Coriolis.jsx

@@ -54,6 +54,7 @@ export default class Coriolis extends React.Component {
 
     this.emitter = new EventEmitter();
     this.state = {
+      noTouch: !window.ontouchstart && !navigator.MaxTouchPoints && !navigator.msMaxTouchPoints,
       page: null,
       language: getLanguage(Persist.getLangCode()),
       route: {},
@@ -281,7 +282,7 @@ export default class Coriolis extends React.Component {
   render() {
     let currentMenu = this.state.currentMenu;
 
-    return <div onClick={this._closeMenu}>
+    return <div onClick={this._closeMenu} className={ this.state.noTouch ? 'no-touch' : null }>
       <Header appCacheUpdate={this.state.appCacheUpdate} currentMenu={currentMenu} />
       { this.state.error ? this.state.error : this.state.page ? React.createElement(this.state.page, { currentMenu }) : <NotFoundPage/> }
       { this.state.modal }

src/app/components/AvailableModulesMenu.jsx

@@ -173,6 +173,7 @@ export default class AvailableModulesMenu extends TranslatedComponent {
    * @param  {SyntheticEvent} event Event
    */
   _touchStart(showDiff, event) {
+    event.preventDefault();
     let rect = event.currentTarget.getBoundingClientRect();
     this.touchTimeout = setTimeout(showDiff.bind(this, rect), PRESS_THRESHOLD);
   }

src/app/utils/SlotFunctions.js

@@ -90,7 +90,9 @@ const PROP_BLACKLIST = {
   eddbID: 1,
   edID: 1,
   id: 1,
+  index: 1,
   'class': 1,
+  rating: 1,
   maxfuel: 1,
   fuelmul: 1,
   fuelpower: 1,
@@ -175,7 +177,7 @@ function diff(format, mVal, mmVal) {
     return <Infinite/>;
   } else {
     let diff = mVal - mmVal;
-    if (!diff || !mVal || diff == mVal || Math.abs(diff) == Infinity) {
+    if (!diff || mVal === undefined || diff == mVal || Math.abs(diff) == Infinity) {
       return format(mVal);
     }
     return `${format(mVal)} (${diff > 0 ? '+' : ''}${format(diff)})`;

src/less/header.less

@@ -97,6 +97,7 @@ header {
 
     input {
       border: none;
+      background-color: transparent;
       text-align: right;
       font-size: 1em;
       font-family: @fStandard;
@@ -171,7 +172,7 @@ header {
     &:visited {
       color: @warning;
     }
-    &:hover {
+    .no-touch &:hover {
       color: teal;
     }
     &.active {

src/less/select.less

@@ -78,7 +78,7 @@ select {
     stroke-width: 0.5em;
     stroke: @primary-disabled;
 
-    &:hover {
+    .no-touch &:hover {
       border-color: @primary;
       color: @primary;
       stroke: @primary;
@@ -95,7 +95,7 @@ select {
       color: @warning-disabled;
       stroke: @warning-disabled;
 
-      &:hover {
+      .no-touch &:hover {
         border-color: @warning;
         color: @warning;
         stroke: @warning;

src/less/sortable.less

@@ -2,7 +2,7 @@
   .user-select-none();
   cursor: pointer;
 
-  &:hover {
+  .no-touch &:hover {
     color: @primary;
   }
 }

src/less/table.less

@@ -33,6 +33,10 @@ thead {
     &.lft {
       border-left: 1px solid @primary-bg;
     }
+
+    &.rgt {
+      border-right: 1px solid @primary-bg;
+    }
   }
 }
 
@@ -42,24 +46,23 @@ tbody tr {
     color: @fg;
     text-align: right;
   }
+}
 
-  td {
-    line-height: 1.4em;
-    padding: 0 0.3em;
+td {
+  line-height: 1.4em;
+  padding: 0 0.3em;
 
-    &.val {
-      border: 1px solid @primary-disabled;
-    }
-    &.lbl {
-      border: 1px solid @primary-disabled;
-      text-transform: uppercase;
-      color: @primary-bg;
-      background-color: @primary-disabled;
-    }
+  &.val {
+    border: 1px solid @primary-disabled;
+  }
+
+  &.lbl {
+    border: 1px solid @primary-disabled;
+    text-transform: uppercase;
+    color: @primary-bg;
+    background-color: @primary-disabled;
   }
-}
 
-td {
   &.tl {
     text-align: left;
     padding-left: 0.7em;