UX: Adding a sticky footer to the post history modal, removing bootstrap columns

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

@@ -1,4 +1,4 @@
-{{#d-modal-body title="history" maxHeight="80%"}}
+{{#d-modal-body title="history" maxHeight="70%"}}
   <div id="revision">
     <div id="revision-controls">
       {{d-button action="loadFirstVersion" icon="fast-backward" title="post.revisions.controls.first" disabled=loadFirstDisabled}}
@@ -119,9 +119,9 @@
     {{#links-redirect class="row"}}
       {{{bodyDiff}}}
     {{/links-redirect}}
-
-    <hr>
-
+  </div>
+{{/d-modal-body}}
+<div class="modal-footer">
     {{#if displayRevert}}
       {{d-button action="revertToVersion" icon="undo" label="post.revisions.controls.revert" class="btn-danger" disabled=loading}}
     {{/if}}
@@ -139,5 +139,4 @@
           icon="pencil"
           label=editButtonLabel}}
     {{/if}}
-  </div>
-{{/d-modal-body}}
+</div>

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

@@ -15,6 +15,14 @@
     display: inline-block;
   }
 
+  .revision-content {
+    width: 47.5%;
+    float: left;
+    &:nth-of-type(2) {
+      margin-left: 5%;
+    }
+  }
+
   #revisions .row:first-of-type {
     margin-top: 10px;
   }

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

@@ -115,8 +115,11 @@
   margin-bottom: 0;
 }
 .modal-footer {
-  padding: 14px 15px 15px;
+  padding: 14px 15px 10px;
   border-top: 1px solid $primary-low;
+  .btn {
+  margin: 0 5px 5px 0;
+  }
 }
 .modal-footer:before,
 .modal-footer:after {
@@ -151,6 +154,8 @@
   }
 
   .modal-body {
+    box-sizing: border-box;
+    width: 100%;
     &.full-height-modal {
       max-height: calc(100vh - 150px);
     }

app/assets/stylesheets/desktop/history.scss

@@ -64,9 +64,10 @@
       white-space: pre-wrap;
     }
   }
-  .span8, .markdown {
+  .revision-content, .markdown {
     img {
-      max-width: 400px;
+      max-width: 100%;
+      box-sizing: border-box;
     }
   }
   .modal-header {

app/assets/stylesheets/desktop/modal.scss

@@ -27,10 +27,6 @@
   padding: 15px;
 }
 
-.modal-footer .btn + .btn {
-  margin-left: 5px;
-  margin-bottom: 0;
-}
 .modal-footer .btn.right {
   float: right;
 }

app/assets/stylesheets/mobile/modal.scss

@@ -30,13 +30,7 @@
 // we need a little extra room on mobile for the
 // stuff inside the footer to fit
 .modal-footer {
-  padding-left: 7px;
-  padding-right: 7px;
-}
-
-.modal-footer .btn + .btn {
-  margin-left: 5px;
-  margin-bottom: 0;
+  padding: 15px 7px 10px 7px;
 }
 
 .modal-close {

lib/discourse_diff.rb

@@ -85,7 +85,7 @@ class DiscourseDiff
       i += 1
     end
 
-    "<div class=\"span8\">#{left.join}</div><div class=\"span8 offset1\">#{right.join}</div>"
+    "<div class=\"revision-content\">#{left.join}</div><div class=\"revision-content\">#{right.join}</div>"
   end
 
   def side_by_side_markdown