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

✨ Highlight new integrations directory (#1070)

Browse Source 
no issue
- we have a new integrations directory in our docs so we’ve highlighted the most common directly on the integrations screen
This commit is contained in:
John O'Nolan 2018-11-13 16:18:31 +07:00 committed by Kevin Ansfield
parent ef551b6061
commit 59ce575e69
10 changed files with 167 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
ghost/admin/app/styles/layouts/apps.css
View File

@ -13,6 +13,94 @@
/* Main Layout
/* ---------------------------------------------------------- */
.integrations-directory {
display: grid;
justify-content: space-between;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 25px;
max-width: 1200px;
margin: 2vw 0 4vw;
}
.id-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100px;
padding: 10px;
text-align: center;
text-decoration: none;
color: var(--darkgrey);
border: var(--lightgrey) 1px solid;
background: #fff;
border-radius: 6px;
transition: all .8s ease;
}
.id-item:hover {
transform: translateY(-2%);
box-shadow: 0 0 1px rgba(0,0,0,.02), 0 8px 26px -4px rgba(0,0,0,.08);
transition: all .3s ease;
}
.id-item-logo {
display: flex;
justify-content: center;
align-items: center;
height: 38px;
width: 43px;
margin-top: 4px;
}
@media (max-width: 1320px) {
.integrations-directory {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.id-item:nth-child(7) {
display: none;
}
}
@media (max-width: 1160px) {
.integrations-directory {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.id-item:nth-child(6) {
display: none;
}
}
@media (max-width: 1020px) {
.integrations-directory {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.id-item:nth-child(5) {
display: none;
}
}
@media (max-width: 900px) {
.integrations-directory {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.id-item:nth-child(5),
.id-item:nth-child(6),
.id-item:nth-child(7) {
display: flex;
}
}
@media (max-width: 500px) {
.integrations-directory {
grid-template-columns: 1fr 1fr 1fr;
}
.id-item:nth-child(6),
.id-item:nth-child(7) {
display: none;
}
}
/* Built-in integrations */
.apps-grid-container {
margin: 2vw 0;
}

98
ghost/admin/app/templates/settings/integrations.hbs
View File

@ -3,10 +3,82 @@
<h2 class="gh-canvas-title" data-test-screen-title>Integrations</h2>
</header>
<div class="integrations-directory">
<a class="id-item" href="https://docs.ghost.org/integrations/disqus/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/disqus.svg" alt="Disqus Icon" />
</div>
<div class="f8 mt1">Disqus</div>
</a>
<a class="id-item" href="https://docs.ghost.org/integrations/google-analytics/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/google-analytics.png" alt="Google Analytics Icon" />
</div>
<div class="f8 mt1">Analytics</div>
</a>
<a class="id-item" href="https://docs.ghost.org/integrations/mailchimp/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/mailchimp.png" alt="Mailchimp Icon" />
</div>
<div class="f8 mt1">Mailchimp</div>
</a>
<a class="id-item" href="https://docs.ghost.org/integrations/typeform/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/typeform.svg" alt="Typeform Icon" />
</div>
<div class="f8 mt1">Typeform</div>
</a>
<a class="id-item" href="https://docs.ghost.org/integrations/youtube/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;" src="assets/img/youtube.png" alt="YouTube Icon" />
</div>
<div class="f8 mt1">YouTube</div>
</a>
<a class="id-item" href="https://docs.ghost.org/integrations/buffer/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/buffer.png" alt="Buffer Icon" />
</div>
<div class="f8 mt1">Buffer</div>
</a>
<a class="id-item" href="https://docs.ghost.org/integrations/revue/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;padding:1px 0;" src="assets/img/revue.svg" alt="Revue Icon" />
</div>
<div class="f8 mt1">Revue</div>
</a>
<a class="id-item" href="https://docs.ghost.org/integrations/" target="_blank" rel="noopener noreferrer">
<div class="id-item-logo">
<img class="w-100 h-100" style="object-fit:contain;padding:0 8px;" src="assets/img/more.png" alt="Three dots" />
</div>
<div class="f8 mt1">More</div>
</a>
</div>
<section class="apps-grid-container">
{{!-- TODO: move fully to spirit and normalize spacing --}}
<span class="apps-grid-title pb2">Built-in integrations</span>
<div class="apps-grid">
<div class="apps-grid-cell" data-test-app="zapier">
{{#link-to "settings.integrations.zapier" data-test-link="zapier"}}
<article class="apps-card-app">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zapiericon.png);background-size:45px;"></figure>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Zapier</h3>
<p class="apps-card-app-desc">Automation for your favourite apps</p>
</div>
</div>
<div class="gh-card-right">
<div class="apps-configured">
<span data-test-app-status>Configure</span>
{{svg-jar "arrow-right"}}
</div>
</div>
</article>
{{/link-to}}
</div>
<div class="apps-grid-cell" data-test-app="slack">
{{#link-to "settings.integrations.slack" data-test-link="slack"}}
<article class="apps-card-app">
@ -79,25 +151,7 @@
{{/link-to}}
</div>
<div class="apps-grid-cell" data-test-app="zapier">
{{#link-to "settings.integrations.zapier" data-test-link="zapier"}}
<article class="apps-card-app">
<div class="apps-card-left">
<figure class="apps-card-app-icon" style="background-image:url(assets/img/zapiericon.png);background-size:45px;"></figure>
<div class="apps-card-meta">
<h3 class="apps-card-app-title">Zapier</h3>
<p class="apps-card-app-desc">Automation for your favourite apps</p>
</div>
</div>
<div class="gh-card-right">
<div class="apps-configured">
<span data-test-app-status>Configure</span>
{{svg-jar "arrow-right"}}
</div>
</div>
</article>
{{/link-to}}
</div>
</div>
</section>
@ -143,9 +197,9 @@
{{#if fetchIntegrations.isRunning}}
<div class="gh-loading-spinner"></div>
{{else}}
<p class="ma0 pa0 tc midgrey">
Use API keys and webhooks to create custom integrations.<br>
No custom integrations.
<p class="ma0 pa0 tc midgrey lh-title">
Create your own custom Ghost integrations<br>
with dedicated API keys & webhooks
</p>
{{/if}}
</div>

BIN
ghost/admin/public/assets/img/buffer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
ghost/admin/public/assets/img/disqus.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><path d="M132.669 248.633c-30.422 0-58.237-11.117-79.743-29.506L0 226.357l20.447-50.465c-7.124-15.719-11.12-33.17-11.12-51.575C9.327 55.663 64.549 0 132.669 0 200.783 0 256 55.663 256 124.317c0 68.666-55.215 124.316-123.331 124.316zm67.346-124.672v-.346c0-35.873-25.298-61.453-68.917-61.453H83.986v124.317H130.4c43.958.001 69.615-26.647 69.615-62.518zm-68.398 31.974h-13.78v-63.22h13.78c20.239 0 33.672 11.538 33.672 31.438v.346c0 20.067-13.433 31.436-33.672 31.436z" fill="#2E9FFF"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 584 B

BIN
ghost/admin/public/assets/img/google-analytics.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
ghost/admin/public/assets/img/mailchimp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
ghost/admin/public/assets/img/more.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
ghost/admin/public/assets/img/revue.svg Normal file
View File

@ -0,0 +1 @@
<svg width="76" height="90" xmlns="http://www.w3.org/2000/svg"><g fill="#E15718" fill-rule="nonzero"><path d="M34.605 21.797c-4.142 0-7.129 3.048-7.129 3.048 2.392 4.358-1.645 19.901-3.402 26.206-2.124 7.651-5.057 18.94-6.9 26.115-1.838 7.176 10.974 5.247 11.832 3.12 1.276-3.128 5.362-17.609 7.852-29.088 3.343-15.418 4.505-19.966 4.505-22.636 0-5.795-3.345-6.765-6.758-6.765"/><path d="M72.768 80.28c-12.33-5.896-19.414-26.25-19.414-26.25s21.83-9.071 21.83-27.602c0-18.556-15.059-26.38-30.268-26.38-16.887 0-35.651 9.114-43.75 26.75-5.111 11.149 9.576 14.622 10.302 11.149C13.86 26.552 26.557 8.612 45.04 8.612c9.747 0 15.457 6.436 15.457 17.816 0 14.482-17.111 21.938-24.008 24.147-7.384 2.363-5.423 1.641-5.423 1.641-.315 1.15-1.96 8.513-1.89 9.31.143 1.462 13.472-3.678 13.472-3.678s6.987 31.634 21.166 31.634c9.782 0 10.862-8.293 8.955-9.202"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 860 B

1
ghost/admin/public/assets/img/typeform.svg Normal file
View File

@ -0,0 +1 @@
<svg width="86" height="89" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M40.28 87.561c12.464.154 21.16-3.994 30.135-12.175 8.975-8.18 14.306-16.867 14.741-28.73.436-11.862-3.412-21.43-12.564-30.581C63.441 6.923 51.64.9 39.4.899 27.158.898 18.967 6.252 11.385 16.07c-7.581 9.818-9.237 22.212-9.894 33.921-.657 11.71-1.15 17.111 6.608 24.625 7.758 7.514 19.718 12.791 32.182 12.945z" stroke="#262627"/><path d="M29.136 37.976v-4.885h25.918v4.885H44.679v27.998H39.51V37.976z" fill="#262627" fill-rule="nonzero"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 554 B

BIN
ghost/admin/public/assets/img/youtube.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB