internetarchive / internetarchive/bookreader

Some demos not working

Open
#1,103 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.2k
Forks
491
Avg merge
2d 15h
Merged PRs (30d)
3

Description

**Description**
I'm experiencing the same bug described here: https://stackoverflow.com/questions/71876803/how-to-get-the-demo-of-the-internet-archive-bookreader-working-in-2022

The problem seems related to `css` `var`: `--br-height` not being defined, so that:
```css
.BookReader {
height: var(--br-height);
...
}
```
in [BookReaderDemo.css#L32-L36](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/BookReaderDemo.css#L32-L36) sets the `height` to `0` for the elements of class `BookReader` in the following, not-working, demos:

- [demo-advanced.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-advanced.html)
- [demo-iif](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-iiif.html)
- [demo-multiple.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-multiple.html)
- [demo-preview-pages.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-preview-pages.html)
- [demo-simple.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-simple.html)
- [immersion-1up.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/immersion-1up.html)
- [viewmode-cycle.html](http://127.0.0.1:8000/BookReaderDemo/viewmode-cycle.html)

The problem doesn't affect full-screen-like demos such as [demo-fullscreen-mobile.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-fullscreen-mobile.html) where the `height` for `.BookReader` is defined inline in the `head` (https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-fullscreen-mobile.html#L24-L27).

And the problem doesn't affect internet-archive-like demos such as [demo-internetarchive.html](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-internetarchive.html) where the `div` with `id` `BookReader` is inside a `` `tag` (https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-internetarchive.html#L45-L61) whose `--br-height` `var` is defined in [BookReaderDemo.css#L26-L30](https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/BookReaderDemo.css#L26-L30).

**Proposal**
The problem could be solved by adding an inline `css` rule in the `head` of not working demos, similary to what is done for full-screen demos :
```css
.BookReader{--br-height: calc(100vh - 100px)}
```
Or perhaps by adding a similar rule directly in `BookReaderDemo.css`
[edited: typo]

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.