Fixed Zapier details responsive issues

This commit is contained in:
Sanne de Vries 2021-09-09 10:56:56 +02:00
parent b92a3ff0f6
commit c5e5ada1ee
2 changed files with 115 additions and 49 deletions

View File

@ -368,7 +368,7 @@
display: flex;
align-items: center;
position: absolute;
top: -4px;
top: -3px;
right: -3px;
}
@ -380,6 +380,7 @@
}
.app-button-regenerate {
height: 26px;
display: flex;
align-items: center;
border: 1px solid var(--lightgrey);
@ -390,6 +391,7 @@
}
.app-button-copy {
height: 26px;
display: flex;
align-items: center;
background: var(--black);
@ -402,6 +404,68 @@
/* Zapier templates */
/* ---------------------------------------------------------- */
.gh-zapier-data-container {
margin: 1.6em 0;
}
.gh-zapier-data-container .gh-zapier-data {
display: flex;
align-items: center;
}
@media (max-width: 500px) {
.gh-zapier-data-container .gh-zapier-data {
flex-direction: column;
align-items: flex-start;
}
}
.gh-zapier-data .data-label {
width: 128px;
height: 36px;
padding: 8px 8px 8px 0;
color: var(--midgrey);
font-size: 1.4rem;
line-height: 1.45;
font-weight: 400;
white-space: nowrap;
}
.gh-zapier-data .data {
width: 100%;
height: 36px;
padding: 8px;
color: var(--darkgrey);
font-size: 1.4rem;
line-height: 1.45;
font-weight: 500;
border-radius: 3px;
overflow: hidden;
}
.gh-zapier-data .data.highlight-hover:hover {
background: var(--whitegrey-l1);
}
@media (max-width: 500px) {
.gh-zapier-data .data {
padding: 4px 0;
}
.gh-zapier-data .data.highlight-hover:hover {
background: transparent;
}
}
.gh-zapier-data .admin-key,
.gh-zapier-data .api-url {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: break-word;
word-break: break-word;
}
.gh-settings-zapier-templates .apps-grid-cell:hover {
background: var(--white);
}
@ -504,6 +568,10 @@
width: 160px;
}
.app-custom-api-table .data.highlight-hover:hover {
background: var(--white) !important;
}
.apps-card-app-orb {
width: 32px;
height: 32px;

View File

@ -10,63 +10,61 @@
<section class="view-container">
<section class="gh-main-section no-heading">
<div class="gh-main-section-block">
<div class="gh-main-section-block overflow-hidden">
<div class="gh-main-section-content app-detail-heading app-grid">
<div class="app-cell">
<img class="app-icon" src="assets/img/zapier.svg" />
</div>
<div class="app-cell">
<div class="app-cell overflow-hidden">
<h3>Zapier</h3>
<p>Automation for your favorite apps</p>
<table class="list">
<tbody>
<tr>
<td class="data-label">Admin API key</td>
<td class="data highlight-hover">
<div class="relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
<span class="truncate" data-test-text="admin-key">
{{this.integration.adminKey.secret}}
</span>
<div class="app-api-buttons child">
<button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="app-button-regenerate" data-tooltip="Regenerate">
{{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
</button>
<button type="button" {{action (perform this.copyAdminKey)}} class="app-button-copy">
{{#if this.copyAdminKey.isRunning}}
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
{{else}}
<div class="gh-zapier-data-container">
<div class="gh-zapier-data">
<div class="data-label">Admin API key</div>
<div class="data highlight-hover">
<div class="relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
<span class="admin-key" data-test-text="admin-key">
{{this.integration.adminKey.secret}}
</span>
<div class="app-api-buttons child">
<button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="app-button-regenerate">
{{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
</button>
<button type="button" {{action (perform this.copyAdminKey)}} class="app-button-copy">
{{#if this.copyAdminKey.isRunning}}
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
{{else}}
Copy
{{/if}}
</button>
</div>
</div>
{{#if (eq this.regeneratedKeyType this.integration.adminKey.type)}}
<div class="green"> Admin API Key was successfully regenerated </div>
{{/if}}
</div>
</div>
<div class="gh-zapier-data">
<div class="data-label">API URL</div>
<div class="data highlight-hover">
<div class="relative flex items-center {{unless this.copyApiUrl.isRunning "hide-child-instant"}}">
<span class="api-url" data-test-text="api-url">
{{this.apiUrl}}
</span>
<div class="app-api-buttons child">
<button type="button" {{action (perform this.copyApiUrl)}} class="app-button-copy">
{{#if this.copyApiUrl.isRunning}}
{{svg-jar "check-circle" class="w3 v-mid mr2"}} Copied
{{else}}
Copy
{{/if}}
</button>
</div>
{{/if}}
</button>
</div>
{{#if (eq this.regeneratedKeyType this.integration.adminKey.type)}}
<div class="green"> Admin API Key was successfully regenerated </div>
{{/if}}
</td>
</tr>
<tr>
<td class="data-label">API URL</td>
<td class="data highlight-hover">
<div class="relative flex items-center {{unless this.copyApiUrl.isRunning "hide-child-instant"}}">
<span data-test-text="api-url">
{{this.apiUrl}}
</span>
<div class="app-api-buttons child">
<button type="button" {{action (perform this.copyApiUrl)}} class="app-button-copy">
{{#if this.copyApiUrl.isRunning}}
{{svg-jar "check-circle" class="w3 v-mid mr2"}} Copied
{{else}}
Copy
{{/if}}
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>