TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Fixed Zapier details responsive issues

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
ghost/admin/app/styles/layouts/apps.css
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;

36
ghost/admin/app/templates/integrations/zapier.hbs
View File

@ -10,26 +10,25 @@
<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="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="truncate" data-test-text="admin-key">
<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" data-tooltip="Regenerate">
<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">
@ -44,13 +43,13 @@
{{#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>
</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 data-test-text="api-url">
<span class="api-url" data-test-text="api-url">
{{this.apiUrl}}
</span>
<div class="app-api-buttons child">
@ -63,10 +62,9 @@
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>