Ghost/ghost/admin/app/templates/settings/design/change-theme.hbs
2021-10-14 18:01:12 +02:00

42 lines
2.0 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>Themes</h2>
<section class="view-actions">
<button type="button" class="mr4 gh-btn {{if this.showAdvanced "gh-btn-green"}}" {{on "click" this.toggleAdvanced}}><span>Advanced</span></button>
<button type="button" class="gh-btn gh-btn-primary" {{on "click" this.themeManagement.upload}}><span>Upload theme</span></button>
</section>
</GhCanvasHeader>
<section class="view-container">
{{#if this.showAdvanced}}
<div class="gh-themes-container-labs">
<GhThemeTableLabs @themes={{this.themes}} />
</div>
{{/if}}
<div class="gh-theme-directory-container-labs">
<div class="theme-directory-labs">
{{#each this.marketplaceThemes as |theme|}}
<LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
<div class="gh-theme-browser">
<span class="gh-theme-browser-button"></span>
</div>
<div class="td-item-screenshot-labs relative">
<img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />
</div>
<div class="td-item-desc">
<div>{{theme.name}}</div>
<span>• {{theme.category}}</span>
</div>
</LinkTo>
{{/each}}
</div>
</div>
</section>
</section>
<section class="gh-theme-directory-footer-container">
<div class="gh-theme-directory-footer">
See more themes, free and premium, in <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="link">our official marketplace →</a>
</div>
</section>