better mobile details

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

@@ -12,7 +12,7 @@ var SettingsView = Backbone.View.extend({
     views: null,
 
     events: {
-        'click .settings__return-link': 'returnToApp'
+        'click .settings__back-button': 'returnToApp'
     },
 
     initialize: function () {

app/styles/areas/_app.scss

@@ -30,6 +30,13 @@
     @include flex(0 0 auto);
     width: 1px;
     cursor: col-resize;
+    @include mobile {
+      display: none;
+    }
+  }
+
+  .menu-visible + &__menu-drag {
+    display: block;
   }
 
   &__list {
@@ -53,7 +60,10 @@
     overflow: hidden;
     padding: $base-spacing;
     position: relative;
-    @include mobile { width: 100vw; }
+    @include mobile {
+      width: 100vw;
+      padding: $base-padding;
+    }
   }
 
   &__footer {

app/styles/areas/_details.scss

@@ -12,6 +12,7 @@
       display: block;
       padding-bottom: $base-padding-v;
       cursor: pointer;
+      >i { margin-right: $base-padding-h; }
     }
   }
 

app/styles/areas/_settings.scss

@@ -11,7 +11,7 @@
   position: relative;
 
   >.scroller {
-    @include flex(1);
+    @include flex(1 0 0);
   }
 
   h2,h3 {
@@ -31,16 +31,25 @@
     }
   }
 
-  &__return-link {
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    right: $base-padding-h;
-    padding: $base-padding-v * 2 0 1px 0;
-    z-index: 1;
-    @include th {
-      background: background-color();
-      box-shadow: 0 0 5px 5px background-color();
+  &__back-button {
+    &-pre, &-post { display: none; }
+    cursor: pointer;
+    @include mobile {
+      padding-bottom: $base-padding-v;
+      >i { margin-right: $base-padding-h; }
+      &-pre { display: inline; }
+    }
+    @include nomobile {
+      position: absolute;
+      top: 0;
+      right: $base-padding-h;
+      padding: $base-padding-v * 2 0 1px 0;
+      z-index: 1;
+      @include th {
+        background: background-color();
+        box-shadow: 0 0 5px 5px background-color();
+      }
+      &-post { display: inline; }
     }
   }
 

app/styles/utils/_drag.scss

@@ -8,8 +8,12 @@
   transition: background-color $slow-transition-out;
   @include th { background: light-border-color(); }
   &:hover, &.dragging {
-    transition: background-color $slow-transition-in;
-    @include th { background: accent-border-color(); }
+    @include nomobile {
+      transition: background-color $slow-transition-in;
+      @include th {
+        background: accent-border-color();
+      }
+    }
   }
 }
 

app/templates/settings/settings.html

@@ -1,6 +1,8 @@
 <div class="settings">
-    <a class="settings__return-link">return to app <i class="fa fa-external-link-square"></i></a>
+    <div class="settings__back-button">
+        <i class="fa fa-chevron-left settings__back-button-pre"></i> return to app <i class="fa fa-external-link-square settings__back-button-post"></i>
+    </div>
     <div class="scroller">
     </div>
     <div class="scroller__bar-wrapper"><div class="scroller__bar"></div></div>
-</div>
+</div>