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
This commit is contained in:
Ella E.
GitHub
parent
8b08c190ae
commit
06cc8dba9d
|
|
@ -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
|
||||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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|}}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -144,46 +110,71 @@
|
|||
}
|
||||
}
|
||||
|
||||
.repo__name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.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;
|
||||
.d-admin-table {
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
tr.repo {
|
||||
td {
|
||||
padding: 1em 0;
|
||||
}
|
||||
td:first-child {
|
||||
width: 45%;
|
||||
|
||||
&.new-version {
|
||||
background-color: var(--tertiary-very-low);
|
||||
|
||||
td:first-child {
|
||||
border-left: solid 3px var(--tertiary);
|
||||
@include breakpoint("tablet") {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
td.repo__status {
|
||||
text-align: right;
|
||||
padding-right: 0.5em;
|
||||
td:last-child {
|
||||
width: 12%; // set width to minimize layout shift
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-label {
|
||||
--d-border-radius: 0.75rem;
|
||||
--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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 .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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue