mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-04 04:10:33 +03:00
74 lines
3.4 KiB
Handlebars
74 lines
3.4 KiB
Handlebars
|
{{#liquid-wormhole class="unsplash"}}
|
|||
|
|
<div class="gh-unsplash {{if ui.hasSideNav "gh-unsplash--with-sidenav"}}">
|
|||
|
|
<div class="gh-unsplash-window">
|
|||
|
|
<div class="gh-unsplash-container">
|
|||
|
|
<a class="gh-unsplash-logo" href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">{{inline-svg "unsplash"}}</a>
|
|||
|
|
<div class="gh-unsplash-close" aria-role="button" {{action "close"}}>{{inline-svg "close"}}</div>
|
|||
|
|
<header class="gh-unsplash-header">
|
|||
|
|
<h1 class="gh-unsplash-header-title">Unsplash</h1>
|
|||
|
|
<p class="gh-unsplash-header-desc">Beautiful, free photos.<br>
|
|||
|
|
Gifted by the world’s most generous community of photographers. 🎁</p>
|
|||
|
|
<span class="gh-input-icon">
|
|||
|
|
{{inline-svg "search"}}
|
|||
|
|
{{gh-input unsplash.searchTerm
|
|||
|
|
class="gh-unsplash-search"
|
|||
|
|
type="text"
|
|||
|
|
name="searchKeyword"
|
|||
|
|
placeholder="Search free high-resolution photos"
|
|||
|
|
tabindex="1"
|
|||
|
|
autocorrect="off"
|
|||
|
|
update=(action "updateSearch" target=unsplash)
|
|||
|
|
}}
|
|||
|
|
</span>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
{{#if unsplash.photos}}
|
|||
|
|
<section class="gh-unsplash-grid">
|
|||
|
|
{{#each unsplash.columns as |photos|}}
|
|||
|
|
<div class="gh-unsplash-grid-column">
|
|||
|
|
{{#each photos as |photo|}}
|
|||
|
|
{{gh-unsplash-photo photo=photo zoom=(action "zoomPhoto") insert=(action "insert")}}
|
|||
|
|
{{/each}}
|
|||
|
|
</div>
|
|||
|
|
{{/each}}
|
|||
|
|
</section>
|
|||
|
|
{{else if (and unsplash.searchTerm (not unsplash.error unsplash.isLoading))}}
|
|||
|
|
<section class="gh-unsplash-error">
|
|||
|
|
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="No photos found" />
|
|||
|
|
<h4>No photos found for '{{unsplash.searchTerm}}'</h4>
|
|||
|
|
</section>
|
|||
|
|
{{/if}}
|
|||
|
|
|
|||
|
|
{{#if unsplash.error}}
|
|||
|
|
{{!-- TODO: add better error styles? --}}
|
|||
|
|
<section class="gh-unsplash-error">
|
|||
|
|
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="Network error" />
|
|||
|
|
<h4>{{unsplash.error}} (<a href="#" {{action "retry"}}>retry</a>)</h4>
|
|||
|
|
</section>
|
|||
|
|
{{/if}}
|
|||
|
|
|
|||
|
|
{{#if unsplash.isLoading}}
|
|||
|
|
<div class="gh-unsplash-loading">
|
|||
|
|
<div class="gh-loading-spinner"></div>
|
|||
|
|
</div>
|
|||
|
|
{{/if}}
|
|||
|
|
|
|||
|
|
{{gh-scroll-trigger
|
|||
|
|
onEnterViewport=(action "loadNextPage")
|
|||
|
|
triggerOffset=1000}}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{{#if zoomedPhoto}}
|
|||
|
|
<div class="gh-unsplash-zoom" {{action "closeZoom"}}>
|
|||
|
|
{{gh-unsplash-photo
|
|||
|
|
photo=zoomedPhoto
|
|||
|
|
zoomed=true
|
|||
|
|
zoom=(action "closeZoom")
|
|||
|
|
insert=(action "insert")}}
|
|||
|
|
</div>
|
|||
|
|
{{/if}}
|
|||
|
|
|
|||
|
|
{{/liquid-wormhole}}
|