Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Shady dom css shifts #919

Merged
merged 9 commits into from
Jan 27, 2022
Merged

Shady dom css shifts #919

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9443897
use flexbox to propagate container heights/widths
iisa Jan 26, 2022
9cf875c
item-nav bump
iisa Jan 26, 2022
73712d2
cascade heights into main component
iisa Jan 26, 2022
9e0c074
open header
iisa Jan 26, 2022
5d85cf1
flex slot
iisa Jan 26, 2022
a4092d2
add wc polyfills
iisa Jan 26, 2022
e33db33
item-nav update
iisa Jan 26, 2022
0e24f2e
item nav bump
iisa Jan 27, 2022
e9ee70a
Merge branch 'master' into shady-dom-css-shifts
iisa Jan 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions BookReaderDemo/demo-internetarchive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/BookNavigator/book-navigator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -517,6 +517,7 @@ export class BookNavigator extends LitElement {
slot > * {
display: block;
height: inherit;
width: inherit;
}
.cover-img {
max-height: 300px;
Expand Down
27 changes: 14 additions & 13 deletions src/ia-bookreader/ia-bookreader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export class IaBookReader extends LitElement {

render() {
return html`
<div class="ia-bookreader">
<div class="main-component">
Copy link
Contributor

@cdrini cdrini Jan 26, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gaah, webcomponents/polyfills#477 ! Let's give this a tighter class name to avoid hitting other things; I started doing *_root; e.g. ia-bookreader__root so that it can't possibly in any way break/collide 😅

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL about polyfills class naming

<ia-item-navigator
?viewportInFullscreen=${this.fullscreen}
.basehost=${this.baseHost}
Expand Down Expand Up @@ -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;
Expand All @@ -160,6 +158,8 @@ export class IaBookReader extends LitElement {
--secondaryCTABorder: #999;
--primaryErrorCTAFill: #e51c26;
--primaryErrorCTABorder: #f8c6c8;
background-color: var(--primaryBGColor);
position: relative;
}

:host([fullscreen]),
Expand All @@ -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 {
Expand Down