124fa8f168
- Moves where they appear up to the <App /> component.
- Instead of a <Notification /> wrapping component to move whatever you use for a notification up to where they need to appear (via ember-cli-flash), we now use a {{notification}} modifier now we have modifiers.
- Global notifications/flashes are no longer special styles of their own. You just use the {{notification}} modifier to hoist whatever component/element you want up to the top of the page. This means we can re-use our existing <Notice /> component for all our global UI notifications (this is the user visible change here)
40 lines
1.1 KiB
Handlebars
40 lines
1.1 KiB
Handlebars
<div
|
|
class="app-view"
|
|
...attributes
|
|
>
|
|
{{yield}}
|
|
<header>
|
|
<div>
|
|
<div>
|
|
<nav aria-label="Breadcrumb" data-test-breadcrumbs>
|
|
<YieldSlot @name="breadcrumbs">
|
|
{{document-attrs class="with-breadcrumbs"}}
|
|
{{yield}}
|
|
</YieldSlot>
|
|
</nav>
|
|
<div class="title">
|
|
<YieldSlot @name="header">
|
|
{{yield}}
|
|
</YieldSlot>
|
|
<div class="actions">
|
|
<YieldSlot @name="actions">
|
|
<PortalTarget @name="app-view-actions" />
|
|
{{yield}}
|
|
</YieldSlot>
|
|
</div>
|
|
</div>
|
|
<YieldSlot @name="nav">
|
|
{{yield}}
|
|
</YieldSlot>
|
|
</div>
|
|
</div>
|
|
<YieldSlot @name="toolbar">
|
|
<input type="checkbox" id="toolbar-toggle" />
|
|
{{yield}}
|
|
</YieldSlot>
|
|
</header>
|
|
<div>
|
|
<YieldSlot @name="content">{{yield}}</YieldSlot>
|
|
</div>
|
|
</div>
|