TryGhost/Ghost

View on GitHub
ghost/admin/app/templates/application.hbs

Summary

Maintainability
Test Coverage
<GhApp>
    <GhSkipLink @anchor=".gh-main">Skip to main content</GhSkipLink>

    {{#if this.upgradeStatus.refreshRequired}}
        <div class="gh-update-banner">
            {{!-- template-lint-disable no-invalid-link-text --}}
            <span>Ghost has been updated! To get access to the latest features, refresh or <a href="javascript:window.location.reload(true)">click here</a>.</span>
        </div>
    {{/if}}

    <GhAlerts />

    <div class="gh-viewport {{if this.ui.showMobileMenu 'mobile-menu-expanded'}}">
        {{#if this.showNavMenu}}
            <GhNavMenu />
        {{/if}}

        <main class="gh-main {{this.ui.mainClass}}">
            {{outlet}}

            {{#if this.showBilling}}
                <GhBillingModal @billingWindowOpen={{this.billing.billingWindowOpen}} />
            {{/if}}

            <GhExploreModal />

        </main>

        <GhNotifications />

        <GhContentCover />

        {{#if this.session.user}}
            {{#unless this.session.user.isContributor}}
                <GhMobileNavBar />
            {{/unless}}
        {{/if}}
    </div>

    {{#if this.showScriptExtension}}
        {{{this.showScriptExtension.container}}}
        {{!-- template-lint-disable no-forbidden-elements --}}
        <script src="{{this.showScriptExtension.src}}"></script>
    {{/if}}

    {{#if this.settings.accentColor}}
        <style>
            :root {
                --accent-color: {{this.settings.accentColor}};
                --adjusted-accent-color: {{this.ui.adjustedAccentColor}};
                --kg-accent-color: {{this.settings.accentColor}};
            }

            .gh-btn-accent {
                background-color: var(--adjusted-accent-color);
                color: #fff;
            }

            .gh-btn-accent:hover {
                background-color: {{hex-adjust this.ui.adjustedAccentColor l=-15}};
                color: #fff;
            }

        </style>
    {{/if}}
</GhApp>

<div id="unsplash-selector-wormhole"></div>

<EpmModalContainer />
<EmberLoadRemover />