Wraps ‹dia-po› contents in a self-centering ‹div› (#3)

petitatelier · Mar 9, 2019 · 6ec6851 · 6ec6851
1 parent 054a41b
commit 6ec6851
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/demos/dia-show.html b/demos/dia-show.html
@@ -18,8 +18,13 @@
   <main>
     <dia-show slide="s01" display="tv02">
       <dia-slide id="s01">
-        <dia-po display="proj01"><h1>This is slide `s01` displayed on `proj01`</h1></dia-po>
-        <dia-po display="tv01"></dia-po>
+        <dia-po display="proj01">
+          <h1>This is slide `s01` displayed on `proj01`</h1>
+          <p>Some text</p>
+        </dia-po>
+        <dia-po display="tv01">
+          <p>Some more text</p>
+        </dia-po>
         <dia-po display="tv02" default>Default s01 diapo on tv02</dia-po>
         <dia-po display="pres01"></dia-po>
         <dia-po display="pres02"></dia-po>

diff --git a/packages/dia-show/dia-po.js b/packages/dia-show/dia-po.js
@@ -27,9 +27,7 @@ export class DiaPo extends LitElement {
 
   render() {
     return html`
-      <slot>
-        <div>‹dia-po ${this.display}›</div>
-      </slot>
+      <div><slot>‹dia-po ${this.display}›</slot></div>
     `;
   }
 

diff --git a/packages/dia-show/shared-styles.js b/packages/dia-show/shared-styles.js
@@ -106,6 +106,8 @@ const
       display: flex; flex-direction: column;
       flex-grow: 1; box-sizing: border-box;
       background-color: var(--background-color, white);
+      align-items: center;
+      justify-content: center;
     }
     :host([ default]) {
       box-shadow: 1px 1px 5px 1px #dfdfdf;