UX: rearrange controls in edit modals

Allows users to see the controls even after scrolling contents of edit modal.

app/assets/javascripts/discourse/templates/modal/history.hbs

@@ -1,45 +1,5 @@
 {{#d-modal-body title="history" maxHeight="70%"}}
   <div id="revision">
-    <div id="revision-controls">
-      {{d-button class="btn-default" action=(action "loadFirstVersion") icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
-      {{d-button class="btn-default" action=(action "loadPreviousVersion") icon="backward" title="post.revisions.controls.previous" disabled=loadPreviousDisabled}}
-      <div id="revision-numbers" class="{{unless displayRevisions 'invisible'}}">
-        {{#conditional-loading-spinner condition=loading size="small"}}
-          {{{revisionsText}}}
-        {{/conditional-loading-spinner}}
-      </div>
-      {{d-button class="btn-default" action=(action "loadNextVersion") icon="forward" title="post.revisions.controls.next" disabled=loadNextDisabled}}
-      {{d-button class="btn-default" action=(action "loadLastVersion") icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
-    </div>
-
-    {{#if displayEdit}}
-      {{d-button action=(action "editPost")
-          class="btn-default"
-          icon="pencil-alt"
-          label=editButtonLabel}}
-    {{/if}}
-
-    <div id="display-modes">
-      {{d-button action=(action "displayInline")
-          icon="square-o"
-          label="post.revisions.displays.inline.button"
-          title="post.revisions.displays.inline.title"
-          class=inlineClass}}
-      {{#unless site.mobileView}}
-        {{d-button action=(action "displaySideBySide")
-            icon="columns"
-            label="post.revisions.displays.side_by_side.button"
-            title="post.revisions.displays.side_by_side.title"
-            class=sideBySideClass}}
-
-        {{d-button action=(action "displaySideBySideMarkdown")
-            icon="columns"
-            label="post.revisions.displays.side_by_side_markdown.button"
-            title="post.revisions.displays.side_by_side_markdown.title"
-            class=sideBySideMarkdownClass}}
-      {{/unless}}
-    </div>
-  </div>
     <div id="revision-details">
       {{d-icon "pencil-alt"}}
       {{#link-to 'user' model.username}}
@@ -65,6 +25,28 @@
         {{/if}}
       {{/unless}}
     </div>
+
+    <div id="display-modes">
+      {{d-button action=(action "displayInline")
+          icon="square-o"
+          label="post.revisions.displays.inline.button"
+          title="post.revisions.displays.inline.title"
+          class=inlineClass}}
+      {{#unless site.mobileView}}
+        {{d-button action=(action "displaySideBySide")
+            icon="columns"
+            label="post.revisions.displays.side_by_side.button"
+            title="post.revisions.displays.side_by_side.title"
+            class=sideBySideClass}}
+
+        {{d-button action=(action "displaySideBySideMarkdown")
+            icon="columns"
+            label="post.revisions.displays.side_by_side_markdown.button"
+            title="post.revisions.displays.side_by_side_markdown.title"
+            class=sideBySideMarkdownClass}}
+      {{/unless}}
+    </div>
+  </div>
   <div id="revisions" data-post-id="{{model.post_id}}" class={{hiddenClasses}}>
     {{#if model.title_changes}}
       <div class="row">
@@ -124,6 +106,26 @@
 {{/d-modal-body}}
 {{#if topicController}}
   <div class="modal-footer">
+    <div id="revision-controls">
+      {{d-button class="btn-default" action=(action "loadFirstVersion") icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
+      {{d-button class="btn-default" action=(action "loadPreviousVersion") icon="backward" title="post.revisions.controls.previous" disabled=loadPreviousDisabled}}
+      <div id="revision-numbers" class="{{unless displayRevisions 'invisible'}}">
+        {{#conditional-loading-spinner condition=loading size="small"}}
+          {{{revisionsText}}}
+        {{/conditional-loading-spinner}}
+      </div>
+      {{d-button class="btn-default" action=(action "loadNextVersion") icon="forward" title="post.revisions.controls.next" disabled=loadNextDisabled}}
+      {{d-button class="btn-default" action=(action "loadLastVersion") icon="fast-forward" title="post.revisions.controls.last" disabled=loadLastDisabled}}
+    </div>
+
+    <div id="revision-footer-buttons">
+      {{#if displayEdit}}
+        {{d-button action=(action "editPost")
+            icon="pencil-alt"
+            class="btn-default"
+            label=editButtonLabel}}
+      {{/if}}
+
       {{#if displayRevert}}
         {{d-button action=(action "revertToVersion") icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}}
       {{/if}}
@@ -135,12 +137,6 @@
       {{#if displayShow}}
         {{d-button action=(action "showVersion") icon="far-eye" label="post.revisions.controls.show" class="btn-default" disabled=loading}}
       {{/if}}
-
+    </div>
-      {{#if displayEdit}}
-        {{d-button action=(action "editPost")
-            icon="pencil-alt"
-            class="btn-default"
-            label=editButtonLabel}}
-      {{/if}}
   </div>
 {{/if}}

app/assets/stylesheets/common/base/history.scss

@@ -9,12 +9,9 @@
 
   #revision {
     overflow: auto;
+    border-bottom: 3px solid $primary-low;
   }
 
-  #revision-controls {
-    display: inline-block;
-    margin-bottom: 5px;
-  }
   table.markdown > tbody > tr > td,
   .revision-content {
     width: 47.5%;
@@ -27,8 +24,6 @@
 
   #revision-details {
     padding: 5px;
-    margin-top: 10px;
-    border-bottom: 3px solid $primary-low;
   }
 
   #revisions .row:first-of-type {

app/assets/stylesheets/desktop/history.scss

@@ -16,10 +16,10 @@
       background-color: $danger-medium;
     }
   }
-  #display-modes {
+
-    text-align: right;
+  #revision {
-    display: inline-block;
+    display: flex;
-    float: right;
+    justify-content: space-between;
   }
 
   #revisions {
@@ -59,4 +59,9 @@
   .modal-header {
     height: 42px;
   }
+
+  .modal-footer {
+    display: flex;
+    justify-content: space-between;
+  }
 }

app/assets/stylesheets/mobile/history.scss

@@ -28,4 +28,18 @@
       word-wrap: break-word;
     }
   }
+
+  .modal-footer {
+    text-align: center;
+  }
+
+  #revision-controls {
+    margin-bottom: 5px;
+  }
+
+  #revision-footer-buttons {
+    button {
+      @extend .btn-small;
+    }
+  }
 }