Skip to content

Commit

Permalink
UX: Adjust table to be responsive on mobile (#244)
Browse files Browse the repository at this point in the history 
* UX: Apply core admin table classes to be visually responsive; styling tweaks

* DEV: update spec to use new classes

* fix failing tests
  • Loading branch information
@ellaestigoy
ellaestigoy authored Oct 22, 2024
1 parent 8b08c19 commit 06cc8db
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 97 deletions.
57 changes: 40 additions & 17 deletions admin/assets/javascripts/discourse/components/repo-status.gjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,20 @@ export default class RepoStatus extends Component {
}

<template>
<tr class="repo {{if @repo.hasNewVersion 'new-version'}}">
<td>
<div class="repo__name">
<tr
class="d-admin-row__content repo {{if @repo.hasNewVersion 'has-update'}}"
>
<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
Expand All @@ -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>
<ul class="repo__latest-version">
<li>
<td class="d-admin-row__detail">
<div class="d-admin-row__mobile-label">
{{i18n "admin.docker.repo.last_updated"}}
</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>
<li class="new-commits">
</div>
<div class="new-commits">
{{NewCommits
@repo.latest.commits_behind
@repo.version
@repo.latest.version
@repo.url
}}
</li>
</ul>
</div>
</div>
</td>
<td class="repo__status">

<td class="d-admin-row__control">
{{#if @repo.checkingStatus}}
{{i18n "admin.docker.checking"}}
<div class="status-label --loading">
{{i18n "admin.docker.checking"}}
</div>
{{else if @repo.upToDate}}
{{i18n "admin.docker.up_to_date"}}
<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}}
Expand Down
6 changes: 3 additions & 3 deletions admin/assets/javascripts/discourse/templates/update-index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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|}}
Expand Down
129 changes: 58 additions & 71 deletions assets/stylesheets/common/docker-manager.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,48 +33,14 @@
white-space: pre;
}

.check-circle {
color: var(--success);
}

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;
}

ul {
list-style: none;
margin: 0 0 1rem 0;
padding: 0;
}

li.new-commits {
font-style: italic;
}
.repo__new-version {
font-size: var(--font-down-1);
font-weight: bold;
margin: var(--space-1) 0 var(--space-1) 0;
}

.commit-hash {
color: #959595;
color: var(--primary);
}

.upgrade-actions {
Expand Down Expand Up @@ -144,46 +110,71 @@
}
}

.repo__name {
font-weight: bold;
}

.repo__author {
font-size: var(--font-down-2);
padding: 0 0 0.25em 0;
.d-admin-table {
margin-bottom: var(--space-6);
}

.repo__new-version {
font-size: var(--font-down-1);
font-weight: bold;
padding: 0.25em 0 0 0;
}
tr.repo {
td:first-child {
width: 45%;

.repo__about {
padding: 0.25em 0 0.25em 0;
}
@include breakpoint("tablet") {
width: auto;
}
}

ul.repo__latest-version {
list-style: none;
margin: 0;
}
td:last-child {
width: 12%; // set width to minimize layout shift

tr.repo {
td {
padding: 1em 0;
@include breakpoint("tablet") {
width: auto;
}
}

&.new-version {
&.has-update {
background-color: var(--tertiary-very-low);
border-left: solid 3px var(--tertiary);
}

td:first-child {
border-left: solid 3px var(--tertiary);
.repo__latest-version {
@include breakpoint("tablet") {
text-align: right;
}
}
}

.status-label {
--d-border-radius: 0.75rem;
--success-low: #f5fff5;

td.repo__status {
text-align: right;
padding-right: 0.5em;
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);
}
}
}

Expand All @@ -197,8 +188,4 @@
margin-bottom: 0;
}
}

.admin-repos th:last-child {
text-align: center;
}
}
8 changes: 5 additions & 3 deletions spec/system/admin_update_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@
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 .repo__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-name", exact_text: "Discourse")
expect(page).to have_css("tr.repo .d-admin-row__overview-name", exact_text: "Docker Manager")
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
Expand Down
6 changes: 3 additions & 3 deletions test/javascripts/integration/components/repo-status-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
);
Expand Down Expand Up @@ -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"
);
Expand Down

0 comments on commit 06cc8db

Please sign in to comment.