2021-10-11 19:14:18 +03:00
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
2021-10-13 13:59:49 +03:00
<h2 class="gh-canvas-title" data-test-screen-title>Themes</h2>
2021-10-11 19:14:18 +03:00
<section class="view-actions">
2021-11-01 20:48:49 +03:00
<button type="button" class="mr4 gh-btn gh-advanced " {{ on "click" this .toggleAdvanced }} data-test-button="toggle-advanced"><span> {{ svg-jar ( if this .showAdvanced "arrow-up-small" "arrow-down-small" ) }} Advanced</span></button>
<button type="button" class="gh-btn gh-btn-primary" {{ on "click" this .startThemeUpload }} data-test-button="upload-theme"><span>Upload theme</span></button>
2021-10-11 19:14:18 +03:00
</section>
</GhCanvasHeader>
<section class="view-container">
2021-10-18 15:05:18 +03:00
{{ # liquid-if this .showAdvanced }}
2022-01-03 17:09:16 +03:00
<div class="gh-themes-container">
<GhThemeTable @themes= {{ this .themes }} />
2021-10-12 12:18:55 +03:00
</div>
2021-10-18 15:05:18 +03:00
{{ / liquid-if }}
2021-10-12 12:18:55 +03:00
2022-01-03 17:09:16 +03:00
<div class="gh-theme-directory-container">
<div class="theme-directory">
2021-10-18 15:02:28 +03:00
{{ # each this .themesList as | theme | }}
2021-11-01 20:48:49 +03:00
<LinkTo @route="settings.design.change-theme.view" @model= {{ theme .name }} class="td-item td-item-labs" data-test-theme-link= {{ theme .name }} >
2021-10-14 19:01:12 +03:00
<div class="gh-theme-browser">
<span class="gh-theme-browser-button"></span>
2021-10-14 13:39:48 +03:00
</div>
<div class="td-item-screenshot-labs relative">
2021-10-11 19:14:18 +03:00
<img style="object-fit:contain;" src= {{ theme .image }} alt=" {{ theme .name }} Theme" />
</div>
<div class="td-item-desc">
2021-10-18 18:43:02 +03:00
<div class="td-item-name"> {{ theme .name }}
{{ # if theme .isDefault }}
(Default)
{{ / if }}
{{ # if theme .isActive }}
<span class="gh-badge">Active</span>
{{ / if }}
</div>
<div class="td-item-category"> {{ theme .category }} </div>
2021-10-11 19:14:18 +03:00
</div>
2021-10-12 16:27:51 +03:00
</LinkTo>
2021-10-11 19:14:18 +03:00
{{ / each }}
</div>
</div>
</section>
2021-10-13 17:40:46 +03:00
</section>
2021-10-22 10:56:39 +03:00
<section class="gh-theme-directory-footer" style="background-image:url(assets/img/footer-marketplace-bg.png);">
Find and buy third-party, premium themes from independent developers in the <a href="https://ghost.org/themes/" target="_blank" rel="noopener noreferrer" class="link">Ghost Marketplace →</a>
2021-10-11 19:14:18 +03:00
</section>