Fix index pane/back-button regressions

framework/core/ember/app/styles/flarum/buttons.less

@@ -83,3 +83,30 @@
 .btn-rounded {
   border-radius: 18px;
 }
+
+
+.back-button {
+  & .back {
+    z-index: 3 !important; // z-index of an active .btn-group .btn is 2
+    border-radius: @border-radius-base !important;
+    .transition(border-radius 0.2s);
+  }
+  & .pin {
+    opacity: 0;
+    margin-left: -36px !important;
+    .transition(~"opacity 0.2s, margin-left 0.2s");
+
+    &:not(.active) .fa {
+      .rotate(45deg);
+    }
+  }
+  &.active {
+    & .back {
+      border-radius: @border-radius-base 0 0 @border-radius-base !important;
+    }
+    & .pin {
+      opacity: 1;
+      margin-left: 1px !important;
+    }
+  }
+}

framework/core/ember/app/styles/flarum/index.less

@@ -102,8 +102,10 @@
 // ------------------------------------
 // Discussions Pane
 
-.index-area.paned {
+@media @phone {
-  display: none;
+  .index-area.paned {
+    display: none;
+  }
 }
 
 @media @tablet, @desktop, @desktop-hd {
@@ -161,7 +163,7 @@
   }
 
   // When the pane is pinned, move the other page content inwards
-  .global-main, .global-footer {
+  .global-content, .global-footer {
     .with-pane & {
       margin-left: @index-pane-width;
       & .container {

framework/core/ember/app/styles/flarum/layout.less

@@ -215,8 +215,13 @@ body {
 // On phones, the header is displayed inside of the drawer. We lay its
 // contents out vertically.
 @media @phone {
-  .global-header .container {
+  .global-header {
-    padding: 0;
+    & .container {
+      padding: 0;
+    }
+    & .back-button {
+      display: none;
+    }
   }
   .header-title {
     border-bottom: 1px solid @fl-drawer-control-bg;
@@ -242,6 +247,9 @@ body {
 // the page toolbar that we styled earlier. We lay its contents out
 // horizontally.
 @media @tablet, @desktop, @desktop-hd {
+  .back-button.back-control {
+    display: none;
+  }
   .global-header {
     padding: 10px;
     height: @header-height;
@@ -255,6 +263,11 @@ body {
     & when (@fl-colored-hdr = true) {
       .drawer-components();
     }
+
+    & .back-button {
+      float: left;
+      margin-right: 25px;
+    }
   }
   .header-controls {
     &, & > li {
@@ -288,34 +301,6 @@ body {
       }
     }
   }
-  .back-button {
-    float: left;
-    margin-right: 25px;
-
-    & .back {
-      z-index: 3 !important; // z-index of an active .btn-group .btn is 2
-      border-radius: @border-radius-base !important;
-      .transition(border-radius 0.2s);
-    }
-    & .pin {
-      opacity: 0;
-      margin-left: -36px !important;
-      .transition(~"opacity 0.2s, margin-left 0.2s");
-
-      &:not(.active) .fa {
-        .rotate(45deg);
-      }
-    }
-    &.active {
-      & .back {
-        border-radius: @border-radius-base 0 0 @border-radius-base !important;
-      }
-      & .pin {
-        opacity: 1;
-        margin-left: 1px !important;
-      }
-    }
-  }
 }
 
 // ------------------------------------

framework/core/ember/app/templates/application.hbs

@@ -4,6 +4,8 @@
 
   <div id="drawer" class="global-drawer">
     <header id="header" class="global-header">
+      {{application/back-button target=backButtonTarget}}
+
       <div class="container">
 
         <div class="header-primary">

framework/core/ember/app/templates/components/application/back-button.hbs

@@ -5,6 +5,6 @@
       <button {{bind-attr class=":btn :btn-default :btn-icon :pin target.panePinned:active"}} {{action "togglePinned"}}>{{fa-icon "thumb-tack" class="icon-glyph"}}</button>
     {{/if}}
   </div>
-{{else}}
+{{else if toggleDrawer}}
   <button class="btn btn-default btn-icon drawer-toggle" {{action "toggleDrawer"}}>{{fa-icon "reorder" class="icon-glyph"}}</button>
 {{/if}}