UX: Adjust table to be responsive on mobile (#244)

* UX: Apply core admin table classes to be visually responsive; styling tweaks

* DEV: update spec to use new classes

* fix failing tests

admin/assets/javascripts/discourse/components/repo-status.gjs

@@ -45,18 +45,20 @@ export default class RepoStatus extends Component {
   }
 
   <template>
-    <tr class="repo {{if @repo.hasNewVersion 'new-version'}}">
+    <tr
-      <td>
+      class="d-admin-row__content repo {{if @repo.hasNewVersion 'has-update'}}"
-        <div class="repo__name">
+    >
+      <td class="d-admin-row__overview">
+        <div class="d-admin-row__overview-name">
           {{@repo.nameTitleized}}
         </div>
         {{#if @repo.author}}
-          <div class="repo__author">
+          <div class="d-admin-row__overview-author">
             {{@repo.author}}
           </div>
         {{/if}}
         {{#if @repo.plugin}}
-          <div class="repo__about">
+          <div class="d-admin-row__overview-about">
             {{@repo.plugin.about}}
             {{#if @repo.linkUrl}}
               <a
@@ -77,36 +79,57 @@ export default class RepoStatus extends Component {
         {{/if}}
       </td>
 
-      <td>
+      <td class="d-admin-row__detail">
+        <div class="d-admin-row__mobile-label">
+          {{i18n "admin.docker.repo.commit_hash"}}
+        </div>
         {{CommitUrl "current" @repo.version @repo.prettyVersion @repo.url}}
       </td>
 
-      <td>{{FormatDate @repo.latest.date leaveAgo="true"}}</td>
+      <td class="d-admin-row__detail">
-      <td>
+        <div class="d-admin-row__mobile-label">
-        <ul class="repo__latest-version">
+          {{i18n "admin.docker.repo.last_updated"}}
-          <li>
+        </div>
+        {{FormatDate @repo.latest.date leaveAgo="true"}}
+      </td>
+
+      <td class="d-admin-row__detail">
+        <div class="d-admin-row__mobile-label">
+          {{i18n "admin.docker.repo.latest_version"}}
+        </div>
+        <div class="repo__latest-version">
+          <div>
             {{CommitUrl
               "new"
               @repo.latest.version
               @repo.prettyLatestVersion
               @repo.url
             }}
-          </li>
+          </div>
-          <li class="new-commits">
+          <div class="new-commits">
             {{NewCommits
               @repo.latest.commits_behind
               @repo.version
               @repo.latest.version
               @repo.url
             }}
-          </li>
+          </div>
-        </ul>
+        </div>
       </td>
-      <td class="repo__status">
+
+      <td class="d-admin-row__control">
         {{#if @repo.checkingStatus}}
+          <div class="status-label --loading">
             {{i18n "admin.docker.checking"}}
+          </div>
         {{else if @repo.upToDate}}
+          <div role="status" class="status-label --success">
+            <div class="status-label-indicator">
+            </div>
+            <div class="status-label-text">
               {{i18n "admin.docker.up_to_date"}}
+            </div>
+          </div>
         {{else}}
           <DButton
             @action={{this.upgrade}}

admin/assets/javascripts/discourse/templates/update-index.hbs

@@ -36,13 +36,13 @@
   </p>
 {{else}}
 
-  <table class="table admin-repos" id="repos">
+  <table class="d-admin-table" id="repos">
     <thead>
-      <th style="width: 40%">{{i18n "admin.docker.repo.name"}}</th>
+      <th>{{i18n "admin.docker.repo.name"}}</th>
       <th>{{i18n "admin.docker.repo.commit_hash"}}</th>
       <th>{{i18n "admin.docker.repo.last_updated"}}</th>
       <th>{{i18n "admin.docker.repo.latest_version"}}</th>
-      <th align="center">{{i18n "admin.docker.repo.status"}}</th>
+      <th>{{i18n "admin.docker.repo.status"}}</th>
     </thead>
     <tbody>
       {{#each this.model as |repo|}}

assets/stylesheets/common/docker-manager.scss

@@ -33,48 +33,14 @@
     white-space: pre;
   }
 
-  .check-circle {
+  .repo__new-version {
-    color: var(--success);
+    font-size: var(--font-down-1);
-  }
-
-  table#repos {
-    margin-top: 1rem;
-
-    td:first-child {
-      width: 3%;
-      padding-left: 8px;
-    }
-
-    th {
-      border-top: none;
-    }
-
-    button {
-      padding-left: 15%;
-      padding-right: 15%;
-    }
-  }
-
-  .new-version {
-    h4 {
-      font-size: 1rem;
     font-weight: bold;
-      margin: 0 0 1rem 0;
+    margin: var(--space-1) 0 var(--space-1) 0;
-    }
-
-    ul {
-      list-style: none;
-      margin: 0 0 1rem 0;
-      padding: 0;
-    }
-
-    li.new-commits {
-      font-style: italic;
-    }
   }
 
   .commit-hash {
-    color: #959595;
+    color: var(--primary);
   }
 
   .upgrade-actions {
@@ -144,46 +110,71 @@
     }
   }
 
-  .repo__name {
+  .d-admin-table {
-    font-weight: bold;
+    margin-bottom: var(--space-6);
-  }
-
-  .repo__author {
-    font-size: var(--font-down-2);
-    padding: 0 0 0.25em 0;
-  }
-
-  .repo__new-version {
-    font-size: var(--font-down-1);
-    font-weight: bold;
-    padding: 0.25em 0 0 0;
-  }
-
-  .repo__about {
-    padding: 0.25em 0 0.25em 0;
-  }
-
-  ul.repo__latest-version {
-    list-style: none;
-    margin: 0;
   }
 
   tr.repo {
-    td {
+    td:first-child {
-      padding: 1em 0;
+      width: 45%;
+
+      @include breakpoint("tablet") {
+        width: auto;
+      }
     }
 
-    &.new-version {
+    td:last-child {
-      background-color: var(--tertiary-very-low);
+      width: 12%; // set width to minimize layout shift
 
-      td:first-child {
+      @include breakpoint("tablet") {
+        width: auto;
+      }
+    }
+
+    &.has-update {
+      background-color: var(--tertiary-very-low);
       border-left: solid 3px var(--tertiary);
     }
+
+    .repo__latest-version {
+      @include breakpoint("tablet") {
+        text-align: right;
+      }
+    }
   }
 
-    td.repo__status {
+  .status-label {
-      text-align: right;
+    --d-border-radius: 0.75rem;
-      padding-right: 0.5em;
+    --success-low: #f5fff5;
+
+    display: flex;
+    flex-wrap: nowrap;
+    width: fit-content;
+
+    &.--loading {
+      color: var(--primary-medium);
+    }
+
+    &.--success {
+      background-color: var(--success-low);
+      padding: var(--space-1) var(--space-2);
+      border-radius: var(--d-border-radius);
+
+      .status-label-indicator {
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background-color: var(--success);
+        flex-shrink: 0;
+        margin-right: var(--space-1);
+        margin-top: 0.4rem;
+      }
+
+      .status-label-text {
+        color: var(--success);
+        font-size: var(--font-down-1);
+      }
     }
   }
 
@@ -197,8 +188,4 @@
       margin-bottom: 0;
     }
   }
-
-  .admin-repos th:last-child {
-    text-align: center;
-  }
 }

spec/system/admin_update_spec.rb

@@ -12,9 +12,11 @@ RSpec.describe "Admin update", type: :system do
     visit("/admin/update")
 
     expect(page).to have_css("h3", exact_text: I18n.t("js.admin.docker.update_title"))
-    expect(page).to have_css("tr.repo .repo__name", exact_text: "Discourse")
+    expect(page).to have_css("tr.repo .d-admin-row__overview-name", exact_text: "Discourse")
-    expect(page).to have_css("tr.repo .repo__name", exact_text: "Docker Manager")
+    expect(page).to have_css("tr.repo .d-admin-row__overview-name", exact_text: "Docker Manager")
-    expect(page).to have_css("tr.repo .repo__about a[href='https://meta.discourse.org/t/12655']")
+    expect(page).to have_css(
+      "tr.repo .d-admin-row__overview-about a[href='https://meta.discourse.org/t/12655']",
+    )
   ensure
     puts page.html if ENV["CI"]
   end

test/javascripts/integration/components/repo-status-test.js

@@ -63,10 +63,10 @@ module("Integration | Component | RepoStatus", function (hooks) {
       .hasText("v2.2.0.beta6 +101", "tag version is used when present");
 
     assert
-      .dom("li.new-commits a")
+      .dom("div.new-commits a")
       .hasText("3 new commits", "shows number of new commits");
     assert.strictEqual(
-      query("li.new-commits a").href.trim(),
+      query("div.new-commits a").href.trim(),
       "https://github.com/discourse/discourse/compare/8f65e4f...2b006c0",
       "links to GitHub diff page"
     );
@@ -98,7 +98,7 @@ module("Integration | Component | RepoStatus", function (hooks) {
     );
 
     assert.strictEqual(
-      query("div.repo__author").textContent.trim(),
+      query("div.d-admin-row__overview-author").textContent.trim(),
       "By Discourse",
       "shows plugin author"
     );