From 2eef9b32956e5e99ab5873a7c23bb99b8c99c4ce Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 29 Jan 2018 15:15:50 -0500
Subject: [PATCH] UX: Adding a sticky footer to the post history modal,
 removing bootstrap columns

---
 .../javascripts/discourse/templates/modal/history.hbs | 11 +++++------
 app/assets/stylesheets/common/base/history.scss       |  8 ++++++++
 app/assets/stylesheets/common/base/modal.scss         |  7 ++++++-
 app/assets/stylesheets/desktop/history.scss           |  5 +++--
 app/assets/stylesheets/desktop/modal.scss             |  4 ----
 app/assets/stylesheets/mobile/modal.scss              |  8 +-------
 lib/discourse_diff.rb                                 |  2 +-
 7 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/modal/history.hbs b/app/assets/javascripts/discourse/templates/modal/history.hbs
index 7b83a8961fb..0b2ca23a231 100644
--- a/app/assets/javascripts/discourse/templates/modal/history.hbs
+++ b/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>
diff --git a/app/assets/stylesheets/common/base/history.scss b/app/assets/stylesheets/common/base/history.scss
index 138784a7376..07f659a6ebe 100644
--- a/app/assets/stylesheets/common/base/history.scss
+++ b/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;
   }
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 3d98847638f..c47c9d4c2de 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/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);
     }
diff --git a/app/assets/stylesheets/desktop/history.scss b/app/assets/stylesheets/desktop/history.scss
index bbbff87c206..81241cb8b42 100644
--- a/app/assets/stylesheets/desktop/history.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index c58442f2464..d9504971101 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/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;
 }
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index f7a6892fc90..2eb136e07f6 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/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 {
diff --git a/lib/discourse_diff.rb b/lib/discourse_diff.rb
index 91e4115fedd..c1971ed7108 100644
--- a/lib/discourse_diff.rb
+++ b/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