basic mobile layout

app/scripts/util/view.js

@@ -12,6 +12,10 @@ _.extend(Backbone.View.prototype, {
     },
 
     toggle: function(visible) {
+        if (visible === undefined) {
+            visible = this._hidden;
+        }
+        this.$el.toggleClass('show', !!visible);
         this.$el.toggleClass('hide', !visible);
         this._hidden = !visible;
         this.trigger(visible ? 'show' : 'hide');

app/scripts/views/app-view.js

@@ -50,6 +50,7 @@ var AppView = Backbone.View.extend({
         this.listenTo(Backbone, 'save-all', this.saveAll);
         this.listenTo(Backbone, 'switch-view', this.switchView);
         this.listenTo(Backbone, 'toggle-settings', this.toggleSettings);
+        this.listenTo(Backbone, 'toggle-menu', this.toggleMenu);
 
         window.onbeforeunload = this.beforeUnload.bind(this);
         window.onresize = this.windowResize.bind(this);
@@ -212,6 +213,10 @@ var AppView = Backbone.View.extend({
         }
     },
 
+    toggleMenu: function() {
+        this.views.menu.switchVisibility();
+    },
+
     switchView: function() {
         Alerts.notImplemented();
     },

app/scripts/views/list-search-view.js

@@ -15,7 +15,8 @@ var ListSearchView = Backbone.View.extend({
         'input .list__search-field': 'inputChange',
         'click .list__search-btn-new': 'createOptionsClick',
         'click .list__search-btn-sort': 'sortOptionsClick',
-        'click .list__search-icon-search': 'advancedSearchClick'
+        'click .list__search-icon-search': 'advancedSearchClick',
+        'click .list__search-btn-menu': 'toggleMenu'
     },
 
     views: null,
@@ -180,6 +181,10 @@ var ListSearchView = Backbone.View.extend({
         require('../util/alerts').notImplemented();
     },
 
+    toggleMenu: function() {
+        Backbone.trigger('toggle-menu');
+    },
+
     hideSearchOptions: function() {
         if (this.views.searchDropdown) {
             this.views.searchDropdown.remove();

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

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

app/styles/areas/_app.scss

@@ -1,5 +1,5 @@
 .app {
-  @include size(100vw 100vh);
+  @include size(100%);
   @include display(flex);
   @include align-items(stretch);
   @include flex-direction(column);
@@ -18,6 +18,11 @@
     @include flex(0 0 auto);
     @include display(flex);
     width: 150px;
+    @include mobile {
+      &:not(.menu-visible) {
+        display: none;
+      }
+    }
   }
 
   &__menu-drag, &__list-drag {

app/styles/areas/_list.scss

@@ -58,6 +58,19 @@
     &-btn-sort {
       @include icon-btn;
     }
+    &-btn-menu {
+      display: none;
+      @include mobile {
+        display: block;
+        @include area-selectable;
+        padding: .7em .6em 0;
+        height: 1.6em;
+        margin-right: $base-padding-h;
+        >i {
+          display: block;
+        }
+      }
+    }
   }
 
   &__item {

app/styles/areas/_menu.scss

@@ -48,7 +48,7 @@
     @include align-items(stretch);
     @include flex-direction(column);
     @include justify-content(flex-start);
-    
+
     .menu__item--collapsed>& {
       display: none;
     }

app/styles/areas/_open.scss

@@ -18,6 +18,9 @@
     }
     &-icon-wrap {
       width: 50px;
+      @include mobile {
+        padding: 0 4px;
+      }
     }
     &-icon, &-btn-new, &-btn-key {
       font-size: 30px;
@@ -68,6 +71,7 @@
         font-size: 22px;
         padding-right: 34px;
         margin-bottom: 0;
+        width: 100%;
         &[readonly] {
           cursor: pointer;
         }

app/styles/areas/_settings.scss

@@ -45,7 +45,7 @@
 
   &__select, &__input, &__pre {
     width: 60%;
-    @media (max-width: 800px) {
+    @include tablet {
       width: calc(100% - 20px);
     }
   }

app/styles/base/_base.scss

@@ -6,6 +6,7 @@
 @import "themes";
 @import "colors";
 @import "variables";
+@import "media";
 @import "body";
 @import "grid-settings";
 @import "buttons";

app/styles/base/_body.scss

@@ -1,11 +1,13 @@
 html {
   @include size(100%);
   overflow: hidden;
+  position: fixed;
 }
 
 body {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
+  position: fixed;
 }
 
 noscript {

app/styles/base/_forms.scss

@@ -114,7 +114,7 @@ select {
   appearance:none;
   transition: border-color $base-duration $base-timing;
   border-radius: $base-border-radius;
-  padding-left: $base-spacing / 6;
+  padding-left: $base-spacing / 3;
 
   background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogICAgd2lkdGg9IjMwNnB4IiBoZWlnaHQ9IjMwNnB4IiB2aWV3Qm94PSIwIDAgMzA2IDMwNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIgZmlsbD0iIzk5ODQ4MyIvPg0KPC9zdmc+DQo=);
   background-position: calc(100% - 5px) center;

app/styles/base/_media.scss

@@ -0,0 +1,11 @@
+@mixin tablet {
+  @media (max-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}

app/styles/base/_typography.scss

@@ -1,10 +1,11 @@
 body {
-  @include size(100vw 100vh);
+  @include size(100%);
   @include user-select(none);
   @include th-self {
     color: text-color();
     background-color: background-color();
   }
+  overflow: auto;
   font-family: $base-font-family;
   font-feature-settings: "kern", "liga", "pnum";
   font-size: $base-font-size;

app/styles/base/_variables.scss

@@ -49,3 +49,7 @@ $sqrt2: 1.41;
 
 $z-index-no-modal:  10000;
 $z-index-modal:     100000;
+
+// Screen sizes
+$tablet-width: 736px;
+$mobile-width: 414px;

app/styles/common/_modal.scss

@@ -1,6 +1,6 @@
 .modal {
   @include position(absolute, 0 null null 0);
-  @include size(100vw 100vh);
+  @include size(100%);
   @include th { background-color: rgba(background-color(), .9); }
   z-index: $z-index-modal;
 
@@ -23,7 +23,6 @@
     }
   }
 
-  $modal-width: 40%;
   &__icon {
     font-size: 6em;
     text-align: center;
@@ -34,18 +33,21 @@
     font-size: $small-header-font-size;
   }
   &__body {
-    @include align-self(center);
     @include user-select(text);
     text-align: left;
-    width: $modal-width;
     margin: $base-spacing;
   }
   &__buttons {
-    @include align-self(center);
     text-align: right;
-    width: $modal-width;
     button ~ button {
       margin-left: $small-spacing;
     }
   }
+  &__body, &__buttons {
+    @include align-self(center);
+    width: 40%;
+    @include tablet {
+      width: 90%;
+    }
+  }
 }

app/styles/utils/_drag.scss

@@ -1,5 +1,5 @@
 .drag-mask {
-  @include size(100vw 100vh);
+  @include size(100%);
   @include position(absolute, 0 null null 0);
 }
 

app/templates/app.html

@@ -7,4 +7,4 @@
         <div class="app__details"></div>
     </div>
     <div class="app__footer"></div>
-</div>
+</div>

app/templates/list-search.html

@@ -1,5 +1,8 @@
 <div class="list__search">
     <div class="list__search-header">
+        <div class="list__search-btn-menu">
+            <i class="fa fa-bars"></i>
+        </div>
         <div class="list__search-field-wrap">
             <input type="text" class="list__search-field input-padding-right" autocomplete="off">
             <i class="list__search-icon-search fa fa-search"></i>
@@ -11,4 +14,4 @@
             <i class="fa fa-sort-alpha-asc"></i>
         </div>
     </div>
-</div>
+</div>