Refactor footer, UI tweaks

src/app/Coriolis.jsx

@@ -21,17 +21,18 @@ import ErrorDetails from './pages/ErrorDetails';
 export default class Coriolis extends React.Component {
 
   static childContextTypes = {
-    language: React.PropTypes.object.isRequired,
-    sizeRatio: React.PropTypes.number.isRequired,
-    route: React.PropTypes.object.isRequired,
-    openMenu: React.PropTypes.func.isRequired,
     closeMenu: React.PropTypes.func.isRequired,
-    showModal: React.PropTypes.func.isRequired,
     hideModal: React.PropTypes.func.isRequired,
-    tooltip: React.PropTypes.func.isRequired,
+    language: React.PropTypes.object.isRequired,
-    termtip: React.PropTypes.func.isRequired,
+    noTouch: React.PropTypes.bool.isRequired,
+    onCommand: React.PropTypes.func.isRequired,
     onWindowResize: React.PropTypes.func.isRequired,
-    onCommand: React.PropTypes.func.isRequired
+    openMenu: React.PropTypes.func.isRequired,
+    route: React.PropTypes.object.isRequired,
+    showModal: React.PropTypes.func.isRequired,
+    sizeRatio: React.PropTypes.number.isRequired,
+    termtip: React.PropTypes.func.isRequired,
+    tooltip: React.PropTypes.func.isRequired
   };
 
   /**
@@ -238,17 +239,18 @@ export default class Coriolis extends React.Component {
    */
   getChildContext() {
     return {
-      language: this.state.language,
-      route: this.state.route,
-      sizeRatio: this.state.sizeRatio,
-      openMenu: this._openMenu,
       closeMenu: this._closeMenu,
-      showModal: this._showModal,
       hideModal: this._hideModal,
-      tooltip: this._tooltip,
+      language: this.state.language,
-      termtip: this._termtip,
+      noTouch: this.state.noTouch,
+      onCommand: this._onCommand,
       onWindowResize: this._onWindowResize,
-      onCommand: this._onCommand
+      openMenu: this._openMenu,
+      route: this.state.route,
+      showModal: this._showModal,
+      sizeRatio: this.state.sizeRatio,
+      termtip: this._termtip,
+      tooltip: this._tooltip
     };
   }
 
@@ -282,11 +284,16 @@ export default class Coriolis extends React.Component {
   render() {
     let currentMenu = this.state.currentMenu;
 
-    return <div onClick={this._closeMenu} className={ this.state.noTouch ? 'no-touch' : null }>
+    return <div style={{ minHeight: '100%' }} 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 }
       { this.state.tooltip }
+      <footer>
+        <div className="right cap">
+          <a href="https://github.com/cmmcleod/coriolis/releases/" target="_blank" title="Coriolis Github Project">{window.CORIOLIS_VERSION} - {window.CORIOLIS_DATE}</a>
+        </div>
+      </footer>
     </div>;
   }
 }

src/app/components/Header.jsx

@@ -363,36 +363,48 @@ export default class Header extends TranslatedComponent {
     return (
       <div className='menu-list no-wrap cap' onClick={ (e) => e.stopPropagation() }>
         <div style={{ lineHeight: '2em' }}>
-        {translate('language')}
+          <div>
-        <select className='cap' value={Persist.getLangCode()} onChange={this._setLanguage}>
+            {translate('language')}
-          {this.languageOptions}
+            <div style={{ float: 'right'}}>
-        </select>
+              <select className='cap' dir='rtl' value={Persist.getLangCode()} onChange={this._setLanguage}>
-        <br/>
+                {this.languageOptions}
-        <span className='cap ptr' onClick={this._toggleTooltips} >
+              </select>
-          {translate('tooltips')}
+            </div>
-          <div className={cn({ disabled: !tips, 'primary-disabled': tips })} style={{ marginLeft: '0.5em', display: 'inline-block' }}>{(tips ? '✓' : '✗')}</div>
+          </div>
-        </span>
+          <div className='cap ptr' onClick={this._toggleTooltips} >
-        <br/>
+            {translate('tooltips')}
-        {translate('insurance')}
+            <div className={cn({ disabled: !tips, 'primary-disabled': tips })} style={{ marginLeft: '0.5em', float: 'right' }}>{(tips ? '✓' : '✗')}</div>
-        <select className='cap' value={Persist.getInsurance()} onChange={this._setInsurance}>
+          </div>
-          {this.insuranceOptions}
+          <div>
-        </select>
+            {translate('insurance')}
-        <br/>
+            <div style={{ float: 'right'}}>
-        {translate('ship')} {translate('discount')}
+              <select className='cap' dir='rtl' value={Persist.getInsurance()} onChange={this._setInsurance}>
-        <input type='text' size='10' value={this.state.shipDiscount} onChange={this._changeShipDiscount} onFocus={selectAll} onBlur={this._setShipDiscount} onKeyDown={this._kpShipDiscount}/>
+                {this.insuranceOptions}
-        <u className='primary-disabled'>%</u>
+              </select>
-        <br/>
+            </div>
-        {translate('module')} {translate('discount')}
+          </div>
-        <input type='text' size='10' value={this.state.moduleDiscount} onChange={this._changeModuleDiscount} onFocus={selectAll} onBlur={this._setModuleDiscount} onKeyDown={this._kpModuleDiscount}/>
+          <div>
-        <u className='primary-disabled'>%</u>
+            {translate('ship')} {translate('discount')}
+            <div style={{ float: 'right'}}>
+              <input type='text' size='10' value={this.state.shipDiscount} onChange={this._changeShipDiscount} onFocus={selectAll} onBlur={this._setShipDiscount} onKeyDown={this._kpShipDiscount}/>
+              <u className='primary-disabled'>%</u>
+            </div>
+          </div>
+          <div style={{ clear: 'both'}}>
+            {translate('module')} {translate('discount')}
+            <div style={{ float: 'right'}}>
+              <input type='text' size='10' value={this.state.moduleDiscount} onChange={this._changeModuleDiscount} onFocus={selectAll} onBlur={this._setModuleDiscount} onKeyDown={this._kpModuleDiscount}/>
+              <u className='primary-disabled'>%</u>
+            </div>
+          </div>
         </div>
         <hr />
-        <ul>
+        <ul style={{ width: '100%' }}>
           {translate('builds')} & {translate('comparisons')}
           <li><Link href="#" className='block' onClick={this._showBackup.bind(this)}>{translate('backup')}</Link></li>
           <li><Link href="#" className='block' onClick={this._showDetailedExport.bind(this)}>{translate('detailed export')}</Link></li>
           <li><Link href="#" className='block' onClick={this._showImport.bind(this)}>{translate('import')}</Link></li>
-          <li><Link href="#" onClick={this._showDeleteAll.bind(this)}>{translate('delete all')}</Link></li>
+          <li><Link href="#" className='block' onClick={this._showDeleteAll.bind(this)}>{translate('delete all')}</Link></li>
         </ul>
         <hr />
         <table style={{ width: 300, backgroundColor: 'transparent' }}>

src/app/pages/Page.jsx

@@ -8,17 +8,18 @@ import { shallowEqual } from '../utils/UtilityFunctions';
 export default class Page extends React.Component {
 
   static contextTypes = {
-    route: React.PropTypes.object.isRequired,
-    language: React.PropTypes.object.isRequired,
-    sizeRatio: React.PropTypes.number.isRequired,
-    openMenu: React.PropTypes.func.isRequired,
     closeMenu: React.PropTypes.func.isRequired,
-    showModal: React.PropTypes.func.isRequired,
     hideModal: React.PropTypes.func.isRequired,
-    tooltip: React.PropTypes.func.isRequired,
+    language: React.PropTypes.object.isRequired,
-    termtip: React.PropTypes.func.isRequired,
+    noTouch: React.PropTypes.bool.isRequired,
+    onCommand: React.PropTypes.func.isRequired,
     onWindowResize: React.PropTypes.func.isRequired,
-    onCommand: React.PropTypes.func.isRequired
+    openMenu: React.PropTypes.func.isRequired,
+    route: React.PropTypes.object.isRequired,
+    showModal: React.PropTypes.func.isRequired,
+    sizeRatio: React.PropTypes.number.isRequired,
+    termtip: React.PropTypes.func.isRequired,
+    tooltip: React.PropTypes.func.isRequired
   };
 
   static propTypes = {

src/index.html

@@ -25,12 +25,11 @@
   </head>
   <body style="background-color:#000;">
     <section id="coriolis"></section>
-    <footer>
+    <script>
-      <div class="right cap">
+      window.CORIOLIS_GAPI_KEY = '{%= o.htmlWebpackPlugin.options.gapiKey %}';
-        <a href="https://github.com/cmmcleod/coriolis/releases/" target="_blank" title="Coriolis Github Project">{%= o.htmlWebpackPlugin.options.version %} - {%= new Date().toISOString().slice(0, 10)  %}</a>
+      window.CORIOLIS_VERSION = '{%= o.htmlWebpackPlugin.options.version %}';
-      </div>
+      window.CORIOLIS_DATE = '{%= new Date().toISOString().slice(0, 10)  %}';
-    </footer>
+    </script>
-
     <script src="{%= o.htmlWebpackPlugin.files.chunks.lib.entry %}" charset="utf-8" crossorigin="anonymous"></script>
     <script src="{%= o.htmlWebpackPlugin.files.chunks.app.entry %}" charset="utf-8" crossorigin="anonymous"></script>
     <script>
@@ -41,7 +40,6 @@
         })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
         ga('create', '{%= o.htmlWebpackPlugin.options.uaTracking %}', 'auto');
       {% } %}
-      window.CORIOLIS_GAPI_KEY = '{%= o.htmlWebpackPlugin.options.gapiKey %}';
     </script>
   </body>
 </html>

src/less/app.less

@@ -23,9 +23,7 @@ html, body {
   height: 100%;
   width: 100%;
   text-rendering: optimizeLegibility;
-  overflow-x: hidden;
+  overflow: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
 }
 
 body {
@@ -42,17 +40,23 @@ div, a, li {
 
 #coriolis {
   width: 100%;
-  min-height: 95%;
+  height: 100%;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 }
 
 .page {
   margin: 0;
-  padding: 0.5em 0;
+  padding: 0.5em;
   width: 100%;
   min-height: 100%;
   clear: both;
   text-align: center;
   box-sizing: border-box;
+
+  .largePhone({
+    padding: 0.5em 0.25em;
+  });
 }
 
 .l {

src/less/table.less

@@ -46,6 +46,10 @@ tbody tr {
     color: @fg;
     text-align: right;
   }
+
+  .no-touch &.highlight:hover {
+    background-color: @warning-bg;
+  }
 }
 
 td {