better mobile layout

TODO.md

@@ -11,8 +11,9 @@
 - [ ] optional auto-update
 - [ ] lock without closing
 - [ ] merge
-- [ ] show sync state
+- [ ] show sync date
 - [ ] dropbox keyfiles
+- [ ] save to localstorage
 - [ ] generation templates
 - [ ] advanced search
 - [ ] mobile

app/scripts/views/app-view.js

@@ -51,6 +51,7 @@ var AppView = Backbone.View.extend({
         this.listenTo(Backbone, 'switch-view', this.switchView);
         this.listenTo(Backbone, 'toggle-settings', this.toggleSettings);
         this.listenTo(Backbone, 'toggle-menu', this.toggleMenu);
+        this.listenTo(Backbone, 'toggle-details', this.toggleDetails);
         this.listenTo(Backbone, 'launcher-open-file', this.launcherOpenFile);
 
         window.onbeforeunload = this.beforeUnload.bind(this);
@@ -135,6 +136,7 @@ var AppView = Backbone.View.extend({
             selectedMenuItem = this.model.menu.generalSection.get('items').first();
         }
         this.model.menu.select({ item: selectedMenuItem });
+        this.views.menu.switchVisibility(false);
     },
 
     fileListUpdated: function() {
@@ -253,6 +255,11 @@ var AppView = Backbone.View.extend({
         Alerts.notImplemented();
     },
 
+    toggleDetails: function(visible) {
+        this.$el.find('.app__list').toggleClass('app__list--details-visible', visible);
+        this.views.menu.switchVisibility(false);
+    },
+
     contextmenu: function(e) {
         if (['input', 'textarea'].indexOf(e.target.tagName.toLowerCase()) < 0) {
             e.preventDefault();

app/scripts/views/details/details-view.js

@@ -34,6 +34,7 @@ var DetailsView = Backbone.View.extend({
         'click .details__header-title': 'editTitle',
         'click .details__history-link': 'showHistory',
         'click .details__buttons-trash': 'moveToTrash',
+        'click .details__back-button': 'backClick',
         'dragover .details': 'dragover',
         'dragleave .details': 'dragleave',
         'drop .details': 'drop'
@@ -452,6 +453,10 @@ var DetailsView = Backbone.View.extend({
     moveToTrash: function() {
         this.model.moveToTrash();
         Backbone.trigger('refresh');
+    },
+
+    backClick: function() {
+        Backbone.trigger('toggle-details', false);
     }
 });
 

app/scripts/views/fields/field-view-text.js

@@ -8,8 +8,8 @@ var FieldView = require('./field-view'),
 
 var FieldViewText = FieldView.extend({
     renderValue: function(value) {
-        return typeof value.byteLength === 'number' ? PasswordGenerator.present(value.byteLength) :
-            _.escape(value).replace(/\n/g, '<br/>');
+        return value && typeof value.byteLength === 'number' ? PasswordGenerator.present(value.byteLength) :
+            _.escape(value || '').replace(/\n/g, '<br/>');
     },
 
     getEditValue: function(value) {

app/scripts/views/list-view.js

@@ -79,6 +79,7 @@ var ListView = Backbone.View.extend({
         if (!item.active) {
             this.selectItem(item);
         }
+        Backbone.trigger('toggle-details', true);
     },
 
     selectPrev: function() {

app/scripts/views/menu/menu-view.js

@@ -47,8 +47,8 @@ var MenuView = Backbone.View.extend({
         this.render();
     },
 
-    switchVisibility: function() {
-        this.$el.toggleClass('menu-visible');
+    switchVisibility: function(visible) {
+        this.$el.toggleClass('menu-visible', visible);
     }
 });
 

app/styles/areas/_app.scss

@@ -39,6 +39,12 @@
     @include flex-direction(column);
     width: 250px;
     overflow-y: auto;
+    @include mobile {
+      width: 100vw;
+      &.app__list--details-visible {
+        display: none;
+      }
+    }
   }
 
   &__details {
@@ -47,6 +53,7 @@
     overflow: hidden;
     padding: $base-spacing;
     position: relative;
+    @include mobile { width: 100vw; }
   }
 
   &__footer {

app/styles/areas/_details.scss

@@ -6,6 +6,15 @@
   @include user-select(text);
   width: 100%;
 
+  &__back-button {
+    display: none;
+    @include mobile {
+      display: block;
+      padding-bottom: $base-padding-v;
+      cursor: pointer;
+    }
+  }
+
   &__header {
     @include display(flex);
     padding-bottom: $small-spacing;
@@ -14,6 +23,7 @@
     &-title {
       @include user-select(text);
       @include flex(1);
+      @include align-self(flex-start);
       cursor: text;
       margin: 0 6px;
       padding: 3px 6px 1px;

app/styles/areas/_list.scss

@@ -82,7 +82,9 @@
     height: 32px;
 
     &--active, &--active:hover {
-      @include area-selected(right);
+      @include nomobile {
+        @include area-selected(right);
+      }
     }
 
     &--expired {

app/styles/base/_buttons.scss

@@ -55,7 +55,7 @@
     }
 
     &:disabled {
-      cursor: not-allowed;
+      cursor: default;
       opacity: 0.5;
       &:hover {
         border-color: action-color();

app/styles/base/_media.scss

@@ -9,3 +9,9 @@
     @content;
   }
 }
+
+@mixin nomobile {
+  @media (min-width: #{$mobile-width + 1}) {
+    @content;
+  }
+}

app/styles/utils/_drag.scss

@@ -19,4 +19,5 @@
   left: -2px;
   width: calc(100% + 5px);
   height: calc(100% + 5px);
+  @include mobile { display: none; }
 }

app/templates/details/details.html

@@ -1,4 +1,7 @@
 <div class="details">
+    <div class="details__back-button">
+        <i class="fa fa-chevron-left"></i> back to list
+    </div>
     <div class="details__header">
         <i class="details__header-color fa fa-bookmark-o">
             <span class="details__colors-popup">
@@ -39,4 +42,4 @@
         <i class="fa fa-paperclip muted-color details__dropzone-icon"></i>
         <h1 class="muted-color details__dropzone-header">drop attachments here</h1>
     </div>
-</div>
+</div>