019b22caa1
refs https://github.com/TryGhost/Team/issues/1310 - we had a `<GhBrowserPreview>` component but it wasn't being used everywhere because it's behaviour didn't match the mobile/desktop switch with no iframe re-render that we needed for some screens - updated component to match all required behaviour - include a switch between desktop and mobile views - default fallbacks for `@title` and `@icon` arguments - switched design settings themes over to using the component instead of repeating the same set of markup
23 lines
1.1 KiB
Handlebars
23 lines
1.1 KiB
Handlebars
{{!-- changes only classes between desktop/mobile to avoid re-rendering yielded contents --}}
|
|
<div class="{{if @isMobilePreview "gh-pe-mobile-container flex justify-center" "gh-browserpreview-previewcontainer"}}" ...attributes>
|
|
{{#unless @isMobilePreview}}
|
|
<div class="gh-browserpreview-browser">
|
|
<div class="tabs">
|
|
<ul><li></li><li></li><li></li></ul>
|
|
<div>
|
|
{{#if (or @icon this.settings.icon)}}
|
|
<span class="favicon"><img src={{or @icon this.settings.icon}} alt="icon"></span>
|
|
{{else}}
|
|
<span class="favicon default">{{svg-jar "default-favicon"}}</span>
|
|
{{/if}}
|
|
<span class="site-title">{{or @title this.settings.title}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/unless}}
|
|
<div class="{{if @isMobilePreview "gh-pe-mobile-bezel" "gh-browserpreview-iframecontainer"}}">
|
|
<div class="{{if @isMobilePreview "gh-pe-mobile-screen"}}">
|
|
{{yield}}
|
|
</div>
|
|
</div>
|
|
</div> |