mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 03:44:29 +03:00
Fixed Zapier details responsive issues
This commit is contained in:
Sanne de Vries
parent
b92a3ff0f6
commit
c5e5ada1ee
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user