IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-20 11:48:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Make the api-keys new and show page a little more responsive (#10629)

Browse Source
This commit is contained in:
Roman Rizzi 2020-09-11 10:38:28 -03:00 committed by GitHub
parent 81395be4c1
commit 636a3be827
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 98 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/admin/templates/api-keys-new.hbs
View File

@ -3,7 +3,7 @@
{{i18n "admin.api.all_api_keys"}}
{{/link-to}}
<div class="api-key">
<div class="api-key api-key-new">
{{#if model.id}}
{{#admin-form-row label="admin.api.key"}}
<div>{{model.key}}</div>
@ -39,7 +39,7 @@
{{#unless useGlobalKey}}
<div class="scopes-title">{{i18n "admin.api.scopes.title"}}</div>
<p>{{i18n "admin.api.scopes.description"}}</p>
<table class="scopes-table">
<table class="scopes-table grid">
<thead>
<tr>
<td></td>
@ -50,8 +50,8 @@
</thead>
<tbody>
{{#each-in scopes as |resource actions|}}
<tr>
<td class="scope-resource-name"><b>{{resource}}</b></td>
<tr class="scope-resource-name">
<td><b>{{resource}}</b></td>
<td></td>
<td></td>
<td></td>
@ -70,9 +70,7 @@
</td>
<td>
{{#each act.params as |p|}}
<div>
{{input maxlength="255" value=(get act p) placeholder=p}}
</div>
{{input maxlength="255" value=(get act p) placeholder=p}}
{{/each}}
</td>
</tr>

6
app/assets/javascripts/admin/templates/api-keys-show.hbs
View File

@ -3,7 +3,7 @@
{{i18n "admin.api.all_api_keys"}}
{{/link-to}}
<div class="api-key">
<div class="api-key api-key-show">
{{#admin-form-row label="admin.api.key"}}
{{#if model.revoked_at}}{{d-icon "times-circle"}}{{/if}}
{{model.truncatedKey}}
@ -57,6 +57,8 @@
{{#admin-form-row label="admin.api.revoked"}}
{{#if model.revoked_at}}
{{format-date model.revoked_at leaveAgo="true"}}
{{else}}
<span>{{i18n "no_value"}}</span>
{{/if}}
<div class="controls">
{{#if model.revoked_at}}
@ -83,7 +85,7 @@
{{#if model.api_key_scopes.length}}
<div class="scopes-title">{{i18n "admin.api.scopes.title"}}</div>
<table class="scopes-table">
<table class="scopes-table grid">
<thead>
<tr>
<td>{{i18n "admin.api.scopes.resource"}}</td>

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

@ -92,6 +92,64 @@ table.api-keys {
h2 {
margin-bottom: 10px;
}
.api-key-new {
.form-element,
.form-element-desc {
&.input-area {
width: 100%;
.value-list,
.select-kit,
input[type="text"] {
width: 100%;
margin: 0;
}
@include breakpoint(mobile-extra-large, min-width) {
width: 75%;
.value-list,
.select-kit,
input[type="text"] {
width: 50%;
}
}
}
&.label-area {
label {
margin: 0.5em 1em 0 0;
}
@include breakpoint(mobile-extra-large, min-width) {
width: 25%;
}
}
}
}
.api-key-show {
.form-element,
.form-element-desc {
&.input-area {
width: 75%;
@include breakpoint(mobile-medium) {
width: 100%;
}
.value-list,
.select-kit,
input[type="text"] {
width: 50%;
margin: 0;
}
}
&.label-area {
width: 25%;
label {
margin-right: 1em;
}
}
}
}
.api-key {
padding: 10px;
margin-bottom: 10px;
@ -100,22 +158,16 @@ table.api-keys {
float: left;
padding: 0.5em 0;
&.input-area {
width: 75%;
.value-list,
.select-kit,
input[type="text"] {
width: 50%;
margin: 0;
input[type="checkbox"] {
margin-top: 0.5em;
}
.ac-wrap {
width: 50% !important;
}
}
&.label-area {
width: 25%;
label {
margin: 0.5em 1em 0 0;
text-align: right;
text-align: left;
font-weight: bold;
}
}
@ -131,21 +183,39 @@ table.api-keys {
text-decoration: underline;
margin-top: 20px;
}
}
.scopes-table.grid {
margin: 20px 0;
tr {
grid-template-columns: repeat(4, 1fr);
input {
margin-bottom: 2px;
}
@include breakpoint(mobile-large) {
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 0.5em;
&.scope-resource-name {
grid-row-gap: 0;
}
}
}
.scope-resource-name {
font-size: $font-up-1;
}
.scope-tooltip {
font-size: $font-down-1;
}
.scope-name {
font-weight: bold;
font-size: $font-0;
display: inline;
}
.scope-tooltip {
font-size: $font-down-1;
}
}
.scopes-table {
margin: 20px 0 20px 0;
}
.scope-resource-name {
font-size: $font-up-1;
}
}