ember-legacy-class-transform
Version:
The default blueprint for ember-cli addons.
141 lines (136 loc) • 3.63 kB
HTML
<html>
<head>
<title>{{errorType}}</title>
{{#if liveReloadPath}}
<script src="{{liveReloadPath}}"></script>
{{/if}}
<style>
html, pre, code {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background-color: #faf4f1;
color: #444444;
}
pre, code {
font-size: 15px;
color: #865931;
margin: 0;
font-family: "SFMono-Light", monospace;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.ember-cli-logo {
width: 250px;
}
.content {
padding: 0 15px;
}
.container {
width: 1080px;
margin: 0 auto;
}
.error-header {
font-size: 2em;
}
.error-message {
font-weight: 500;
}
.callstack {
transition: height 0.5s;
height: 0px;
overflow: hidden;
}
.callstack h4 {
margin-top: 0;
margin-bottom: 25px;
}
.callstack pre, .callstack code {
font-size: 12px;
color: #865931;
}
.collapsible {
padding-top: 25px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 15px 0;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #252525;
}
label::before {
text-align: center;
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#toggle:checked ~ .callstack {
height: 600px;
}
#toggle:checked ~ label::before {
content: "-";
}
</style>
</head>
<body>
<header class="container">
<div>
<img class="ember-cli-logo" src="https://emberjs.com/images/brand/ember_CLI-Light-b1e20a3c.png" />
</div>
</header>
<main class="container">
<article class="content">
<h1 class="error-header">Dang! Looks like a {{errorType}}.</h1>
{{#if location.file}}
<h2 class="error-message">{{location.file}}{{#if location.line}}:{{location.line}}{{/if}}</h2>
{{/if}}
{{#if codeFrame}}
<pre><code class="javascript">{{codeFrame}}</code></pre>
{{/if}}
<div class="collapsible">
<input id="toggle" type="checkbox">
<label for="toggle">Expand stack frames</label>
<div class="callstack">
<h3>Broccoli Plugin: {{nodeName}}</h3>
<h4>{{errorMessage}}</h4>
{{#if stack}}
<pre>
<code class="markdown">{{stack}}</code>
</pre>
{{/if}}
{{#if instantiationStack}}
<pre>
<code class="markdown">{{instantiationStack}}</code>
</pre>
{{/if}}
{{#if broccoliBuilderErrorStack}}
<pre>
<code class="markdown">{{broccoliBuilderErrorStack}}</code>
</pre>
{{/if}}
</div>
</div>
</article>
<article class="content">
<h2>Environment</h2>
<span>{{versionString}}</span>
</article>
</main>
</body>
</html>