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

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

@ -48,43 +48,16 @@ table.web-hooks.grid {
table.api-keys { table.api-keys {
margin-bottom: 0.25em; margin-bottom: 0.25em;
.key-controls {
text-align: right;
}
tr.revoked { tr.revoked {
color: var(--primary-medium); color: var(--primary-medium);
} }
@include breakpoint(tablet) { .d-admin-row__overview.key {
tr { width: 30%;
grid-template-columns: 0.25fr 1fr 1fr; }
}
td.key { .d-admin-row__content td {
grid-row: 1; vertical-align: middle;
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;
}
}
} }
} }