mirror of
https://github.com/TryGhost/Ghost-Admin.git
synced 2023-12-14 02:33:04 +01:00
d6058dbf27
no issue Keeps component JS backing files and template files in the same directory which avoids hunting across directories when working with components. Also lets you see all components when looking at one directory, whereas previously template-only or js-only components may not have been obvious without looking at both directories. - ran [codemod](https://github.com/ember-codemods/ember-component-template-colocation-migrator/) for app-level components - manually moved in-repo-addon component templates in `lib/koenig-editor` - removed all explicit `layout` imports as JS/template associations are now made at build-time removing the need for them - updated `.embercli` to default to new flat component structure
93 lines
4.8 KiB
Handlebars
93 lines
4.8 KiB
Handlebars
<LiquidWormhole @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"}}
|
|
<GhTextInput
|
|
@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|}}
|
|
<GhUnsplashPhoto @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}}
|
|
|
|
<GhScrollTrigger
|
|
@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"}}>
|
|
<GhUnsplashPhoto
|
|
@photo={{this.zoomedPhoto}}
|
|
@zoomed={{true}}
|
|
@zoom={{action "closeZoom"}}
|
|
@select={{action "select"}} />
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</LiquidWormhole>
|