UX: improve history modal layout (#23675)

app/assets/javascripts/discourse/app/components/modal/history/revisions.hbs

@@ -1,7 +1,7 @@
 <div id="revisions" data-post-id={{@model.post_id}} class={{@hiddenClasses}}>
   {{#if @model.title_changes}}
     <div class="row">
-      <h2>{{html-safe @titleDiff}}</h2>
+      <h2 class="revision__title">{{html-safe @titleDiff}}</h2>
     </div>
   {{/if}}
   {{#if @mobileView}}
@@ -39,15 +39,20 @@
     {{/if}}
   {{/if}}
   {{#if @model.tags_changes}}
-    <div class="row">
+    <div class="row -tag-revisions">
-      {{i18n "tagging.changed"}}
+      <span class="discourse-tags">
-      {{#each @previousTagChanges as |t|}}
+        {{#each @previousTagChanges as |t|}}
-        {{discourse-tag t.name style=(if t.deleted "diff-del")}}
+          {{discourse-tag t.name extraClass=(if t.deleted "diff-del")}}
-      {{/each}}
+        {{/each}}
-      &rarr;&nbsp;
+      </span>
-      {{#each @currentTagChanges as |t|}}
+      {{#if (and @mobileView @previousTagChanges @currentTagChanges)}}
-        {{discourse-tag t.name style=(if t.inserted "diff-ins")}}
+        &rarr;&nbsp;
-      {{/each}}
+      {{/if}}
+      <span class="discourse-tags">
+        {{#each @currentTagChanges as |t|}}
+          {{discourse-tag t.name extraClass=(if t.inserted "diff-ins")}}
+        {{/each}}
+      </span>
     </div>
   {{/if}}
   {{#if @model.featured_link_changes}}

app/assets/javascripts/discourse/app/components/modal/history/topic-footer.hbs

@@ -1,37 +1,41 @@
 <div id="revision-controls">
-  <DButton
+  <div class="revision-controls--back">
-    class="btn-default first-revision"
+    <DButton
-    @action={{@loadFirstVersion}}
+      class="btn-default first-revision"
-    @icon="fast-backward"
+      @action={{@loadFirstVersion}}
-    @title="post.revisions.controls.first"
+      @icon="fast-backward"
-    @disabled={{@loadFirstDisabled}}
+      @title="post.revisions.controls.first"
-  />
+      @disabled={{@loadFirstDisabled}}
-  <DButton
+    />
-    class="btn-default previous-revision"
+    <DButton
-    @action={{@loadPreviousVersion}}
+      class="btn-default previous-revision"
-    @icon="backward"
+      @action={{@loadPreviousVersion}}
-    @title="post.revisions.controls.previous"
+      @icon="backward"
-    @disabled={{@loadPreviousDisabled}}
+      @title="post.revisions.controls.previous"
-  />
+      @disabled={{@loadPreviousDisabled}}
+    />
+  </div>
   <div id="revision-numbers" class={{unless @displayRevisions "invisible"}}>
     <ConditionalLoadingSpinner @condition={{@loading}} @size="small">
       {{html-safe @revisionsText}}
     </ConditionalLoadingSpinner>
   </div>
-  <DButton
+  <div class="revision-controls--forward">
-    class="btn-default next-revision"
+    <DButton
-    @action={{@loadNextVersion}}
+      class="btn-default next-revision"
-    @icon="forward"
+      @action={{@loadNextVersion}}
-    @title="post.revisions.controls.next"
+      @icon="forward"
-    @disabled={{@loadNextDisabled}}
+      @title="post.revisions.controls.next"
-  />
+      @disabled={{@loadNextDisabled}}
-  <DButton
+    />
-    class="btn-default last-revision"
+    <DButton
-    @action={{@loadLastVersion}}
+      class="btn-default last-revision"
-    @icon="fast-forward"
+      @action={{@loadLastVersion}}
-    @title="post.revisions.controls.last"
+      @icon="fast-forward"
-    @disabled={{@loadLastDisabled}}
+      @title="post.revisions.controls.last"
-  />
+      @disabled={{@loadLastDisabled}}
+    />
+  </div>
 </div>
 
 <div id="revision-footer-buttons">

app/assets/javascripts/discourse/app/lib/render-tag.js

@@ -35,6 +35,9 @@ export function defaultRenderTag(tag, params) {
   if (siteSettings.tag_style || params.style) {
     classes.push(params.style || siteSettings.tag_style);
   }
+  if (params.extraClass) {
+    classes.push(params.extraClass);
+  }
   if (params.size) {
     classes.push(params.size);
   }

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

@@ -12,23 +12,59 @@
   }
 
   #revision {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 0.5em;
+    align-items: center;
     overflow: auto;
     border-bottom: 3px solid var(--primary-low);
   }
 
-  table.markdown > tbody > tr > td,
+  #revision-details {
-  .revision-content {
+    display: flex;
-    width: 47.5%;
+    align-items: baseline;
-    float: left;
+    gap: 0.5em;
-    min-height: 1px;
+    .d-icon {
-
+      align-self: center;
-    &:nth-of-type(2) {
-      margin-left: 5%;
     }
   }
 
-  #revision-details {
+  .revision__title,
-    padding: 5px;
+  .body-diff,
+  table.markdown > tbody > tr,
+  .-tag-revisions {
+    --gap-width: 1rem;
+    display: flex;
+    gap: 0 var(--gap-width);
+  }
+
+  .revision__title {
+    margin: 0;
+    line-height: var(--line-height-medium);
+  }
+
+  .-tag-revisions span,
+  .revision-content {
+    flex: 0 0 calc(50% - (var(--gap-width) / 2));
+  }
+
+  table.markdown {
+    tbody {
+      border: none;
+    }
+  }
+
+  #revision-controls {
+    display: flex;
+    align-items: center;
+    .btn {
+      margin: 0;
+    }
+  }
+
+  [class^="revision-controls--"] {
+    display: flex;
+    gap: 0 1em;
   }
 
   #revisions {
@@ -53,6 +89,14 @@
     }
   }
 
+  #revision-footer-buttons {
+    display: flex;
+    gap: 0.5em;
+    button {
+      margin: 0;
+    }
+  }
+
   ins,
   .diff-ins {
     code,
@@ -126,7 +170,7 @@
     padding: 3px 5px 5px 5px;
   }
   .d-icon-ban {
-    color: #f00;
+    color: var(--danger);
   }
   .hidden-revision-either {
     opacity: 0.5;

app/assets/stylesheets/desktop/history.scss

@@ -7,21 +7,6 @@
   .modal-body {
     height: 70vh;
   }
-  #revision-controls {
-    .btn[disabled] {
-      cursor: not-allowed;
-      background-color: var(--primary-low);
-    }
-    .btn-danger[disabled] {
-      background-color: var(--danger-medium);
-    }
-  }
-
-  #revision {
-    display: flex;
-    justify-content: space-between;
-    padding-bottom: 0.5em;
-  }
 
   #revisions {
     word-wrap: break-word;
@@ -46,14 +31,10 @@
   }
   .markdown {
     font-family: monospace;
-    font-size: var(--font-down-1);
     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;
     }
@@ -65,12 +46,8 @@
       box-sizing: border-box;
     }
   }
-  .modal-header {
-    height: 42px;
-  }
 
   .modal-footer {
-    display: flex;
     justify-content: space-between;
   }
 }

app/assets/stylesheets/mobile/history.scss

@@ -1,18 +1,14 @@
 .modal.history-modal {
-  button {
-    float: none;
-  }
   .modal-body {
     height: 62vh;
   }
   .modal-inner-container {
     min-height: 400px;
   }
-  #revision-numbers {
+
-    line-height: var(--line-height-large);
-  }
   img {
-    max-width: 95%;
+    box-sizing: border-box;
+    max-width: 100%;
     height: auto;
   }
   .revision-content {
@@ -23,12 +19,10 @@
     }
   }
 
-  .modal-footer {
-    text-align: center;
-  }
-
   #revision-controls {
-    margin-bottom: 5px;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 0.5em;
   }
 
   #revision-footer-buttons {
@@ -36,4 +30,8 @@
       @extend .btn-small;
     }
   }
+
+  .-tag-revisions {
+    display: block;
+  }
 }

config/locales/client.en.yml

@@ -4229,7 +4229,6 @@ en:
       other_tags: "Other Tags"
       selector_all_tags: "all tags"
       selector_no_tags: "no tags"
-      changed: "tags changed:"
       tags: "Tags"
       choose_for_topic: "optional tags"
       choose_for_topic_required: