This repository has been archived by the owner on Nov 28, 2022. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
/
gh-unsplash.hbs
92 lines (85 loc) · 4.76 KB
/
gh-unsplash.hbs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
{{#liquid-wormhole class="unsplash"}}
{{!-- TODO: why does this modal background not cover the PSM without style override? --}}
<div class="fullscreen-modal-background" {{action "close"}} style="z-index: 999"></div>
<div class="absolute top-8 right-8 bottom-8 left-8 br4 overflow-hidden bg-white z-9999" data-unsplash>
{{!-- close button --}}
<button type="button" class="absolute top-6 right-6" {{action "close"}}>
{{svg-jar "close" class="w4 stroke-midlightgrey-l2"}}
</button>
<div class="flex flex-column h-100">
{{!-- static header --}}
<header class="flex-shrink-0 flex flex-row-l flex-column justify-between pt6 pr8 pb6 pl8 pt10-l pr20-l pb10-l pl20-l items-center">
<h1 class="flex items-center darkgrey-d2 w-100 nudge-top--4">
<a class="dib w8 mr2" href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit" target="_blank">{{svg-jar "unsplash" class="fill-darkgrey-d2"}}</a>
Unsplash
</h1>
<span class="gh-input-icon mw88-l flex-auto w-100 mt3 mt0-l">
{{svg-jar "search"}}
{{gh-text-input
class="gh-unsplash-search"
name="searchKeyword"
placeholder="Search free high-resolution photos"
tabindex="1"
shouldFocus=true
autocorrect="off"
value=(readonly this.unsplash.searchTerm)
input=(action "search" value="target.value")
focusIn=(action "setKeyScope")
focus-out=(action "resetKeyScope")
}}
</span>
</header>
{{!-- content container --}}
<div class="relative h-100 overflow-hidden">
{{!-- scrollable image container --}}
<div class="overflow-auto h-100 w-100 pr8 pl8 pr20-l pl20-l">
{{#if this.unsplash.photos}}
<section class="gh-unsplash-grid">
{{#each this.unsplash.columns as |photos|}}
<div class="gh-unsplash-grid-column">
{{#each photos as |photo|}}
{{gh-unsplash-photo photo=photo zoom=(action "zoomPhoto") select=(action "select")}}
{{/each}}
</div>
{{/each}}
</section>
{{else if (and this.unsplash.searchTerm (not this.unsplash.error this.unsplash.isLoading))}}
<section class="gh-unsplash-error h-100 flex items-center justify-center pb30">
<div>
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="No photos found" />
<h4>No photos found for '{{this.unsplash.searchTerm}}'</h4>
</div>
</section>
{{/if}}
{{#if this.unsplash.error}}
{{!-- TODO: add better error styles? --}}
<section class="gh-unsplash-error h-100 flex items-center justify-center pb30">
<div>
<img class="gh-unsplash-error-404" src="assets/img/unsplash-404.png" alt="Network error" />
<h4>{{this.unsplash.error}} (<a href="#" {{action "retry"}}>retry</a>)</h4>
</div>
</section>
{{/if}}
{{#if this.unsplash.isLoading}}
<div class="gh-unsplash-loading h-100 flex items-center justify-center pb30">
<div class="gh-loading-spinner"></div>
</div>
{{/if}}
{{gh-scroll-trigger
enter=(action "loadNextPage")
triggerOffset=1000}}
</div>
{{!-- zoomed image overlay --}}
{{#if this.zoomedPhoto}}
<div class="absolute flex justify-center top-0 right-0 bottom-0 left-0 pr20 pb10 pl20 bg-white overflow-hidden" {{action "closeZoom"}}>
{{gh-unsplash-photo
photo=this.zoomedPhoto
zoomed=true
zoom=(action "closeZoom")
select=(action "select")}}
</div>
{{/if}}
</div>
</div>
</div>
{{/liquid-wormhole}}