Update canvas code

Author: djthorpe

example/index.html

@@ -115,22 +115,6 @@ <h1>Icons</h1>
       </js-tablebody>
     </js-content>
 
-    <js-content>
-      <js-tag texttransform="uppercase"><js-icon size="small">compass</js-icon> Map</js-tag>
-      <div style="height: 500px;">
-        <js-map id="map"
-          accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
-          <!-- add a source from the array (must currently be an array of GeoJSON features) -->
-          <js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
-
-          <!-- display the source on the map as polygons -->
-          <js-maplayer id="points" source="#area" type="fill"
-            paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
-        </js-map>
-      </div>
-    </js-content>
-
-
   </js-canvas>
 
   <!-- toast which persists on the screen for 10 seconds -->
@@ -145,6 +129,19 @@ <h1>Icons</h1>
         <js-close></js-close>
       </js-navitem>
     </js-nav>
+
+    <js-content>
+      <js-map id="map"
+      accessToken="pk.eyJ1IjoiZGp0aG9ycGUiLCJhIjoiY2x5ZnJhZjAzMDJsYTJqcjd6eWQ3cjRvcSJ9.LvoT_wihG5VQtv008P-MPw">
+        <!-- add a source from the array (must currently be an array of GeoJSON features) -->
+        <js-mapsource id="area" type="geojson" data="#array"></js-mapsource>
+
+        <!-- display the source on the map as polygons -->
+        <js-maplayer id="points" source="#area" type="fill"
+          paint='{ "fill-opacity": 0.2, "fill-color": "#aa0000" }'></js-maplayer>
+      </js-map>
+    </js-content> 
+
   </js-modal>
 
 </body>

src/canvas/CanvasElement.js

@@ -36,9 +36,6 @@ export class CanvasElement extends LitElement {
             flex-direction: row;
           }
         }
-        ::slotted(test) {
-          border: 0.05rem solid red;
-        }
       `;
   }
 

src/canvas/ContentElement.js

@@ -21,22 +21,15 @@ export class ContentElement extends LitElement {
 
   static get styles() {
     return css`
-        div {
-          display: block;
-          padding: var(--content-padding);
-        } 
-      `;
+      :host {
+        flex: 1;
+      }
+    `;
   }
 
   render() {
     return html`
-        <div class=${this.classes.join(' ') || nothing}><slot></slot></div>      
+        <slot></slot>
       `;
   }
-
-  // eslint-disable-next-line class-methods-use-this
-  get classes() {
-    const classes = [];
-    return classes;
-  }
 }

src/element/NavElement.js

@@ -27,7 +27,7 @@ export class NavElement extends LitElement {
   static get styles() {
     return css`
       :host {
-        flex: 1 0;
+        flex: 0;
       }
       ul {
         display: flex;

src/mapbox/MapElement.js

@@ -49,10 +49,14 @@ export class MapElement extends LitElement {
   static get styles() {
     return css`
       ${unsafeCSS(styles)}
-      #map {
+      :host {
+        display: flex;
         width: 100%;
         height: 100%;
       }
+      #map {
+        flex: 1;
+      }
       .mapboxgl-ctrl-logo {
         display: none !important;
       }

src/modal/ModalElement.js

@@ -50,22 +50,17 @@ export class ModalElement extends LitElement {
         margin: var(--modal-margin);
         border: var(--modal-border);
         border-radius: var(--modal-border-radius);        
-      }
-      .wrapper {
         display: flex;
-        position: relative;             
-        justify-content: center;
-        align-items: center;
-        flex-direction: row;
-      }        
+        flex-direction: column;
+      }
     `;
   }
 
   render() {
     return html`
       <div class=${this.canvasClasses.join(' ') || nothing}></div>
       <div class=${this.contentClasses.join(' ') || nothing}">
-        <div class="wrapper"><slot></slot></div>
+        <slot></slot>
       </div>
     `;
   }