da92eadecd
no issue
- modified `ui` service's `routeDidChange` handler to update it's `mainClass` property based on the new route's metadata
- used in the future for switching screen background colours
To use the feature, modify or add a `buildRouteInfoMetadata` hook in the route which you'd like to change, eg:
```js
export default AuthenticatedRoute.extend({
...
buildRouteInfoMetadata() {
return {
bodyClasses: ['my-body-class'],
mainClasses: ['grey-bg'] // <--------
};
}
});
```
The route hierarchy is taken into consideration with classes being added for all currently shown routes. For example if you wanted to add an `editor` class to all editor routes you could use the hook in `routes/editor.js` then if you added an `editor-new` class in `routes/editor/new.js` the resulting HTML output on the "New story" screen would be:
```html
<main class="gh-main editor editor-new">
```
26 lines
662 B
Handlebars
26 lines
662 B
Handlebars
{{#gh-app showSettingsMenu=ui.showSettingsMenu}}
|
|
{{#gh-skip-link anchor=".gh-main"}}Skip to main content{{/gh-skip-link}}
|
|
|
|
{{gh-alerts}}
|
|
|
|
<div class="gh-viewport {{if ui.showSettingsMenu 'settings-menu-expanded'}} {{if ui.showMobileMenu 'mobile-menu-expanded'}}">
|
|
{{#if showNavMenu}}
|
|
{{gh-nav-menu
|
|
icon=settings.settledIcon
|
|
}}
|
|
{{/if}}
|
|
|
|
<main class="gh-main {{this.ui.mainClass}}" role="main">
|
|
{{outlet}}
|
|
</main>
|
|
|
|
{{gh-notifications}}
|
|
|
|
{{gh-content-cover}}
|
|
|
|
{{gh-mobile-nav-bar}}
|
|
</div>{{!gh-viewport}}
|
|
{{/gh-app}}
|
|
|
|
{{ember-load-remover}}
|