mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-26 04:13:30 +03:00
✨ Highlight new integrations directory (#1070)
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
Kevin Ansfield
parent
ef551b6061
commit
59ce575e69
@ -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;
|
||||
}
|
||||
|
||||
@ -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
BIN
ghost/admin/public/assets/img/buffer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
1
ghost/admin/public/assets/img/disqus.svg
Normal file
1
ghost/admin/public/assets/img/disqus.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 584 B |
BIN
ghost/admin/public/assets/img/google-analytics.png
Normal file
BIN
ghost/admin/public/assets/img/google-analytics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
ghost/admin/public/assets/img/mailchimp.png
Normal file
BIN
ghost/admin/public/assets/img/mailchimp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
ghost/admin/public/assets/img/more.png
Normal file
BIN
ghost/admin/public/assets/img/more.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
1
ghost/admin/public/assets/img/revue.svg
Normal file
1
ghost/admin/public/assets/img/revue.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 860 B |
1
ghost/admin/public/assets/img/typeform.svg
Normal file
1
ghost/admin/public/assets/img/typeform.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 554 B |
BIN
ghost/admin/public/assets/img/youtube.png
Normal file
BIN
ghost/admin/public/assets/img/youtube.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue
Block a user