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

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

diff --git a/app/assets/javascripts/admin/templates/api-keys-new.hbs b/app/assets/javascripts/admin/templates/api-keys-new.hbs
index 5825354..7d6219f 100644
--- a/app/assets/javascripts/admin/templates/api-keys-new.hbs
+++ b/app/assets/javascripts/admin/templates/api-keys-new.hbs
@@ -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>
diff --git a/app/assets/javascripts/admin/templates/api-keys-show.hbs b/app/assets/javascripts/admin/templates/api-keys-show.hbs
index 4167716..771ecbd 100644
--- a/app/assets/javascripts/admin/templates/api-keys-show.hbs
+++ b/app/assets/javascripts/admin/templates/api-keys-show.hbs
@@ -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>
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 1bde84a..7bbb16d 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -92,30 +92,82 @@ table.api-keys {
   h2 {
     margin-bottom: 10px;
   }
-  .api-key {
-    padding: 10px;
-    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 {
-      float: left;
-      padding: 0.5em 0;
       &.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;
+    .form-element,
+    .form-element-desc {
+      float: left;
+      padding: 0.5em 0;
+      &.input-area {
+        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;
     }
-    .scope-name {
-      font-weight: bold;
-      font-size: $font-0;
-      display: inline;
+  }
+  .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;
     }
-  }
-  .scopes-table {
-    margin: 20px 0 20px 0;
-  }
 
-  .scope-resource-name {
-    font-size: $font-up-1;
+    .scope-name {
+      font-weight: bold;
+      font-size: $font-0;
+      display: inline;
+    }
   }
 }
 

GitHub sha: 636a3be8

This commit appears in #10629 which was approved by eviltrout. It was merged by romanrizzi.