UX: fix revision history modal on mobile

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

@@ -3,11 +3,16 @@
     <div id="revision-controls">
       <button title="{{i18n post.revisions.controls.first}}" {{bind-attr class=":btn :standard displayGoToFirst::invisible" disabled=loading}} {{action "loadFirstVersion"}}><i class="fa fa-fast-backward"></i></button>
       <button title="{{i18n post.revisions.controls.previous}}" {{bind-attr class=":btn :standard displayGoToPrevious::invisible" disabled=loading}} {{action "loadPreviousVersion"}}><i class="fa fa-backward"></i></button>
-      <div id="revision-numbers" {{bind-attr class="displayRevisions::invisible"}}>{{{boundI18n revisionsTextKey previousBinding="previousVersion" currentBinding="version" totalBinding="revisions_count"}}}</div>
+      <div id="revision-numbers" {{bind-attr class="displayRevisions::invisible"}}>
+        {{#if loading}}
+          <div id='revision-loading'><i class='fa fa-spinner fa-spin'></i>{{i18n loading}}</div>
+        {{else}}
+          {{boundI18n revisionsTextKey previousBinding="previousVersion" currentBinding="version" totalBinding="revisions_count"}}
+        {{/if}}
+      </div>
       <button title="{{i18n post.revisions.controls.next}}" {{bind-attr class=":btn :standard displayGoToNext::invisible" disabled=loading}} {{action "loadNextVersion"}}><i class="fa fa-forward"></i></button>
       <button title="{{i18n post.revisions.controls.last}}" {{bind-attr class=":btn :standard displayGoToLast::invisible" disabled=loading}} {{action "loadLastVersion"}}><i class="fa fa-fast-forward"></i></button>
     </div>
-    {{#if loading}}<div id='revision-loading'><i class='fa fa-spinner fa-spin'></i>{{i18n loading}}</div>{{/if}}
     <div id="display-modes">
       <button {{bind-attr class=":btn displayingInline:btn-primary:standard"}} title="{{i18n post.revisions.displays.inline.title}}" {{action "displayInline"}}>{{{i18n post.revisions.displays.inline.button}}}</button>
       {{#unless site.mobileView}}

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

@@ -1,70 +1,16 @@
 // styles that apply to the popup that appears when you show the edit history of a post
 
 .modal.history-modal {
-  .modal-inner-container {
-    min-width: 960px;
-    min-height: 500px;
-  }
-  #revision-controls {
-    float: left;
-    .btn[disabled]:hover {
-      color: $primary;
-    }
-  }
   #revision-numbers {
     display: inline-block;
-    min-width: 80px;
+    min-width: 100px;
     text-align: center;
   }
-  #display-modes {
-    text-align: right;
-  }
   #revision-loading {
-    float: left;
-    margin: 5px 0 0 10px;
     .fa {
       margin-right: 7px;
     }
   }
-  #revision-details {
-    background-color: scale-color-diff();
-    padding: 5px;
-    margin-top: 10px;
-  }
-  #revisions {
-    word-wrap: break-word;
-    .row, table {
-      margin-top: 10px;
-      padding-bottom: 10px;
-      border-bottom: 1px dotted;
-    }
-  }
-  img {
-    max-width: 670px;
-    height: auto;
-  }
-  .inline-diff {
-    width: 670px;
-  }
-  .markdown {
-    font-family: monospace;
-    font-size: 12px;
-    width: 100%;
-    border-collapse: collapse;
-    border-spacing: 0;
-    td {
-      width: 50%;
-      vertical-align: top;
-      max-width: 440px;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-  }
-  .span8, .markdown {
-    img {
-      max-width: 400px;
-    }
-  }
   ins, .diff-ins {
     code, img {
       border: 2px solid $success;
@@ -126,9 +72,6 @@
     background-color: lighten($highlight, 23%);
     padding: 3px 5px 5px 5px;
   }
-  .modal-header {
-    height: 42px;
-  }
   .fa-ban {
     color: #f00;
   }

app/assets/stylesheets/desktop.scss

@@ -15,6 +15,7 @@
 @import "desktop/topic";
 @import "desktop/upload";
 @import "desktop/user";
+@import "desktop/history";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 

app/assets/stylesheets/desktop/history.scss

@@ -0,0 +1,59 @@
+// styles that apply to the popup that appears when you show the edit history of a post
+
+.modal.history-modal {
+  .modal-inner-container {
+    min-width: 960px;
+    min-height: 500px;
+  }
+  #revision-controls {
+    float: left;
+    .btn[disabled]:hover {
+      color: $primary;
+    }
+  }
+  #display-modes {
+    text-align: right;
+  }
+  #revision-details {
+    background-color: scale-color-diff();
+    padding: 5px;
+    margin-top: 10px;
+  }
+  #revisions {
+    word-wrap: break-word;
+    .row, table {
+      margin-top: 10px;
+      padding-bottom: 10px;
+      border-bottom: 1px dotted;
+    }
+  }
+  img {
+    max-width: 670px;
+    height: auto;
+  }
+  .inline-diff {
+    width: 670px;
+  }
+  .markdown {
+    font-family: monospace;
+    font-size: 12px;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    td {
+      width: 50%;
+      vertical-align: top;
+      max-width: 440px;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+  }
+  .span8, .markdown {
+    img {
+      max-width: 400px;
+    }
+  }
+  .modal-header {
+    height: 42px;
+  }
+}

app/assets/stylesheets/mobile.scss

@@ -16,6 +16,7 @@
 @import "mobile/topic";
 @import "mobile/upload";
 @import "mobile/user";
+@import "mobile/history";
 
 /* These files doesn't actually exist, they are injected by DiscourseSassImporter. */
 

app/assets/stylesheets/mobile/history.scss

@@ -0,0 +1,23 @@
+.modal.history-modal {
+  .modal-body {
+    max-height: 100% !important;
+  }
+  button {
+    float: none;
+  }
+  #display-modes {
+    display: none;
+  }
+  #revision-numbers {
+    line-height: 2em;
+  }
+  #revision-details {
+    background-color: scale-color-diff();
+    padding: 5px;
+    margin-top: 10px;
+  }
+  img {
+    max-width: 95%;
+    height: auto;
+  }
+}