Commit 4c8a9b6e authored by David Trattnig's avatar David Trattnig
Browse files

Add visual divider between components

parent d40f25cc
......@@ -6,12 +6,14 @@ body {
margin: 0;
}
#common-area {
#common-area,
.common-divider {
margin-bottom: 0;
padding: 16px 32px;
background-color: rgba(0, 0, 0, 0.88);
color: white;
font-family: Helvetica, sans-serif;
display: block;
}
#common-area img#aura-logo {
......@@ -19,16 +21,19 @@ body {
margin: 0 0 8px 0;
}
#common-area h1 {
#common-area h1,
.common-divider h1 {
font-size: 16px;
margin-bottom: 32px;
}
#common-area p {
#common-area p,
.common-divider p {
max-width: 400px;
}
#common-area a:hover {
#common-area a:hover,
.common-divider a:hover {
text-decoration: underline;
}
......@@ -36,4 +41,5 @@ body {
.component-container {
margin: 32px;
width: calc(100% - 64px);
}
\ No newline at end of file
......@@ -31,9 +31,18 @@
<p></p>
</div>
<div id="episode-detail" class="component-container" style="min-height: 600px"></div>
<div class="common-divider">
<h2>Player Component</h2>
<p>
The embedded player below demonstrates how the communication with the episode
detail view is performed.
</p>
</div>
<div id="aura-player" class="component-container"></div>
<aura-service-worker></aura-service-worker>
<div id="episode-detail"></div>
<script>
var episodeIds = (ids = [
'2040245',
......@@ -152,13 +161,7 @@
},
})
})
</script>
<h2>Player Component</h2>
<hr />
<div id="aura-player" class="component-container"></div>
<script>
/** Inject component into HTML **/
document.addEventListener('DOMContentLoaded', function (event) {
new AuraPlayer({
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment