Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Apply admin table classes for consistent mobile styling on the API keys page (#29630) 

* UX: Apply admin table classes for consistent mobile styling on the API keys page

* apply prettier
This commit is contained in:
Ella E. 2024-11-06 18:38:25 -07:00 committed by GitHub
parent 0568d36133
commit b4f7a1b761
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
View File

@ -7,7 +7,7 @@
{{#if this.model}}
<LoadMore @selector=".api-keys tr" @action={{action "loadMore"}}>
<table class="api-keys grid">
<table class="d-admin-table api-keys">
<thead>
<th>{{i18n "admin.api.key"}}</th>
<th>{{i18n "admin.api.description"}}</th>
@ -18,16 +18,21 @@
</thead>
<tbody>
{{#each this.model as |k|}}
<tr class={{if k.revoked_at "revoked"}}>
<td class="key">
<tr class="d-admin-row__content {{if k.revoked_at 'revoked'}}">
<td class="d-admin-row__overview key">
{{#if k.revoked_at}}{{d-icon "circle-xmark"}}{{/if}}
{{k.truncatedKey}}
</td>
<td class="key-description">
<td class="d-admin-row__detail key-description">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.description"
}}</div>
{{k.shortDescription}}
</td>
<td class="key-user">
<div class="label">{{i18n "admin.api.user"}}</div>
<td class="d-admin-row__detail key-user">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.user"
}}</div>
{{#if k.user}}
<LinkTo @route="adminUser" @model={{k.user}}>
{{avatar k.user imageSize="small"}}
@ -36,19 +41,23 @@
{{i18n "admin.api.all_users"}}
{{/if}}
</td>
<td class="key-created">
<div class="label">{{i18n "admin.api.created"}}</div>
<td class="d-admin-row__detail key-created">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.created"
}}</div>
{{format-date k.created_at}}
</td>
<td class="key-last-used">
<div class="label">{{i18n "admin.api.last_used"}}</div>
<td class="d-admin-row__detail key-last-used">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.last_used"
}}</div>
{{#if k.last_used_at}}
{{format-date k.last_used_at}}
{{else}}
{{i18n "admin.api.never_used"}}
{{/if}}
</td>
<td class="key-controls">
<td class="d-admin-row__controls key-controls">
<DButton
@action={{route-action "show" k}}
@icon="far-eye"

37
app/assets/stylesheets/common/admin/api.scss
View File

@ -48,43 +48,16 @@ table.web-hooks.grid {
table.api-keys {
margin-bottom: 0.25em;
.key-controls {
text-align: right;
}
tr.revoked {
color: var(--primary-medium);
}
@include breakpoint(tablet) {
tr {
grid-template-columns: 0.25fr 1fr 1fr;
}
td.key {
grid-row: 1;
grid-column-start: 1;
grid-column-end: 1;
max-width: 100%;
}
td.key-description {
grid-row: 1;
grid-column-start: 2;
grid-column-end: -1;
max-width: 100%;
}
td.key-user {
grid-row: 2;
grid-column-start: 1;
}
td.key-controls {
grid-row: 2;
grid-column-end: -1;
grid-column-start: 2;
text-align: right;
.btn {
margin-bottom: 0.25em;
}
.d-admin-row__overview.key {
width: 30%;
}
.d-admin-row__content td {
vertical-align: middle;
}
}