mobile improvements

app/scripts/comp/settings-manager.js

@@ -1,5 +1,6 @@
 const Backbone = require('backbone');
 const Locale = require('./../util/locale');
+const FeatureDetector = require('../util/feature-detector');
 
 const SettingsManager = {
     neutralLocale: null,
@@ -28,9 +29,7 @@ const SettingsManager = {
         if (settings.get('theme')) {
             this.setTheme(settings.get('theme'));
         }
-        if (settings.get('fontSize')) {
-            this.setFontSize(settings.get('fontSize'));
-        }
+        this.setFontSize(settings.get('fontSize'));
         const locale = settings.get('locale');
         try {
             if (locale) {
@@ -59,7 +58,8 @@ const SettingsManager = {
     },
 
     setFontSize: function(fontSize) {
-        document.documentElement.style.fontSize = fontSize ? (12 + fontSize * 2) + 'px' : '';
+        const defaultFontSize = FeatureDetector.isMobile ? 14 : 12;
+        document.documentElement.style.fontSize = (defaultFontSize + (fontSize || 0) * 2) + 'px';
     },
 
     setLocale(loc) {

app/scripts/locales/base.json

@@ -390,6 +390,7 @@
   "setGenTryBetaWarning": "Unsaved files",
   "setGenTryBetaWarningBody": "Please save all files and click this button again",
   "setGenShowAppLogs": "Show app logs",
+  "setGenReloadApp": "Reload the app",
 
   "setFilePath": "File path",
   "setFileStorage": "This file is loaded from {}.",

app/scripts/views/settings/settings-general-view.js

@@ -47,7 +47,8 @@ const SettingsGeneralView = Backbone.View.extend({
         'click .settings__general-show-advanced': 'showAdvancedSettings',
         'click .settings__general-dev-tools-link': 'openDevTools',
         'click .settings__general-try-beta-link': 'tryBeta',
-        'click .settings__general-show-logs-link': 'showLogs'
+        'click .settings__general-show-logs-link': 'showLogs',
+        'click .settings__general-reload-app-link': 'reloadApp'
     },
 
     views: null,
@@ -105,7 +106,8 @@ const SettingsGeneralView = Backbone.View.extend({
             directAutotype: AppSettingsModel.instance.get('directAutotype'),
             supportsTitleBarStyles: Launcher && FeatureDetector.supportsTitleBarStyles(),
             titlebarStyle: AppSettingsModel.instance.get('titlebarStyle'),
-            storageProviders: storageProviders
+            storageProviders: storageProviders,
+            showReloadApp: FeatureDetector.isStandalone
         });
         this.renderProviderViews(storageProviders);
     },
@@ -346,6 +348,10 @@ const SettingsGeneralView = Backbone.View.extend({
         this.scrollToBottom();
     },
 
+    reloadApp: function() {
+        location.reload();
+    },
+
     scrollToBottom: function() {
         this.$el.closest('.scroller').scrollTop(this.$el.height());
     }

app/styles/areas/_details.scss

@@ -14,7 +14,12 @@
       cursor: pointer;
       line-height: $mobile-back-button-height;
       height: $mobile-back-button-height;
-      >i { margin-right: $base-padding-h; }
+      font-size: 1.2em;
+      >i {
+        margin-right: .3em;
+        font-size: 1.2em;
+        vertical-align: text-bottom;
+      }
     }
   }
 
@@ -92,7 +97,9 @@
     left: 6px;
     font-size: $large-header-font-size;
     &:hover, .details__header-color:hover & {
-      display: block;
+      @include nomobile {
+        display: block;
+      }
     }
     &-item {
       padding: 8px 12px;

app/styles/areas/_footer.scss

@@ -3,6 +3,9 @@
   align-items: stretch;
   flex-direction: row;
   justify-content: flex-start;
+  @include mobile {
+    @include th { background: th(intermediate-background-color); }
+  }
 
   &__db {
     flex: 0 0 auto;

app/styles/areas/_list.scss

@@ -50,6 +50,11 @@
       width: 100%;
       @include mobile {
         font-size: 1.05em !important;
+        box-shadow: none !important;
+        border-radius: .6em !important;
+        border: none !important;
+        padding-left: 0.4em;
+        @include th { background-color: th(secondary-background-color) !important; }
       }
     }
     &-icon-search {
@@ -61,6 +66,9 @@
       &:hover {
         @include th { color: th(medium-color); }
       }
+      @include mobile {
+        top: .5em;
+      }
     }
     &-btn-new {
       @include icon-btn;
@@ -148,6 +156,9 @@
       margin-right: 2px;
       width: 14px;
       height: 14px;
+      @include mobile {
+        margin-right: 4px;
+      }
       &--custom {
         vertical-align: text-bottom;
         &.yellow { @include filter(grayscale(1) sepia(1) hue-rotate(20deg) brightness(1.17) saturate(5.7)); }

app/styles/areas/_settings.scss

@@ -41,7 +41,12 @@
       line-height: $mobile-back-button-height;
       height: $mobile-back-button-height;
       padding-bottom: $base-padding-v;
-      >i { margin-right: $base-padding-h; }
+      font-size: 1.2em;
+      >i {
+        margin-right: .3em;
+        font-size: 1.2em;
+        vertical-align: text-bottom;
+      }
       &-pre { display: inline; }
     }
     @include nomobile {

app/templates/details/details.hbs

@@ -1,6 +1,6 @@
 <div class="details">
     <div class="details__back-button">
-        <i class="fa fa-chevron-left"></i> {{res 'detBackToList'}}
+        <i class="fa fa-chevron-left"></i>{{res 'detBackToList'}}
     </div>
     <div class="details__header">
         <i class="details__header-color fa fa-bookmark-o" title="{{res 'detSetIconColor'}}" tip-placement="left">

app/templates/settings/settings-general.hbs

@@ -201,8 +201,11 @@
     <a class="settings__general-show-advanced">{{res 'setGenShowAdvanced'}}</a>
     <div class="settings__general-advanced hide">
         {{#if devTools}}
-        <button class="btn-silent settings__general-dev-tools-link">{{res 'setGenDevTools'}}</button>
-        <button class="btn-silent settings__general-try-beta-link">{{res 'setGenTryBeta'}}</button>
+            <button class="btn-silent settings__general-dev-tools-link">{{res 'setGenDevTools'}}</button>
+            <button class="btn-silent settings__general-try-beta-link">{{res 'setGenTryBeta'}}</button>
+        {{/if}}
+        {{#if showReloadApp}}
+            <button class="btn-silent settings__general-reload-app-link">{{res 'setGenReloadApp'}}</button>
         {{/if}}
         <button class="btn-silent settings__general-show-logs-link">{{res 'setGenShowAppLogs'}}</button>
     </div>

app/templates/settings/settings.hbs

@@ -1,6 +1,6 @@
 <div class="settings">
     <div class="settings__back-button">
-        <i class="fa fa-chevron-left settings__back-button-pre"></i> {{res 'retToApp'}} <i class="fa fa-external-link-square settings__back-button-post"></i>
+        <i class="fa fa-chevron-left settings__back-button-pre"></i>{{res 'retToApp'}} <i class="fa fa-external-link-square settings__back-button-post"></i>
     </div>
     <div class="scroller">
     </div>