Shady dom css shifts (#919)

internetarchive · Jan 27, 2022 · f4d3e15 · f4d3e15
1 parent 1319c2e
commit f4d3e15
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 20 deletions.
diff --git a/BookReaderDemo/demo-internetarchive.html b/BookReaderDemo/demo-internetarchive.html
@@ -7,6 +7,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <!-- WC dependencies -->
+    <script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2Ces5%2CglobalThis"></script>
+    <script type="text/javascript" src="https://unpkg.com/[email protected]/polyfill-support.js"></script>
+    <script type="text/javascript" src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-bundle.js"></script>
+
     <!-- JS dependencies -->
     <script src="../BookReader/webcomponents-bundle.js"></script>
     <script src="../BookReader/jquery-1.10.1.js"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
   "private": false,
   "dependencies": {
     "@internetarchive/ia-activity-indicator": "^0.0.1",
-    "@internetarchive/ia-item-navigator": "^0.0.4",
+    "@internetarchive/ia-item-navigator": "0.0.5",
     "@internetarchive/ia-menu-slider": "^1.1.1",
     "@internetarchive/ia-sharing-options": "^0.1.4",
     "@internetarchive/icon-bookmark": "^1.1.3",

diff --git a/src/BookNavigator/book-navigator.js b/src/BookNavigator/book-navigator.js
@@ -517,6 +517,7 @@ export class BookNavigator extends LitElement {
     slot > * {
       display: block;
       height: inherit;
+      width: inherit;
     }
     .cover-img {
       max-height: 300px;

diff --git a/src/ia-bookreader/ia-bookreader.js b/src/ia-bookreader/ia-bookreader.js
@@ -105,7 +105,7 @@ export class IaBookReader extends LitElement {
 
   render() {
     return html`
-      <div class="ia-bookreader">
+      <div class="main-component">
         <ia-item-navigator
           ?viewportInFullscreen=${this.fullscreen}
           .basehost=${this.baseHost}
@@ -148,8 +148,6 @@ export class IaBookReader extends LitElement {
     return css`
       :host {
         display: block;
-        height: inherit;
-        min-height: inherit;
         --primaryBGColor: var(--black, #000);
         --secondaryBGColor: #222;
         --tertiaryBGColor: #333;
@@ -160,6 +158,8 @@ export class IaBookReader extends LitElement {
         --secondaryCTABorder: #999;
         --primaryErrorCTAFill: #e51c26;
         --primaryErrorCTABorder: #f8c6c8;
+        background-color: var(--primaryBGColor);
+        position: relative;
       }
 
       :host([fullscreen]),
@@ -170,20 +170,21 @@ export class IaBookReader extends LitElement {
         min-height: unset;
       }
 
-      div[slot="main"],
-      div[slot="main"] > * {
-        height: inherit;
+      .main-component {
+        height: 100%;
+        width: 100%;
+        min-height: inherit;
       }
 
-      slot {
-        display: block;
+      div[slot="header"],
+      div[slot="main"] {
+        display: flex;
+        width: 100%;
       }
 
-      .ia-bookreader {
-        background-color: var(--primaryBGColor);
-        position: relative;
-        min-height: inherit;
-        height: inherit;
+      slot {
+        display: block;
+        flex: 1;
       }
 
       ia-item-navigator {