caribaud
/
melpomene
1
0
Fork 0
Code Issues 9 Pull Requests 1 Releases 3 Wiki Activity

Fixing progress bar display

This commit is contained in:
Christian Aribaud 2023-04-17 20:06:22 +02:00
parent c84c681277
commit def62b96bb
2 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
comic_reader.css
View File

@ -4,8 +4,14 @@
#reader-frame { #reader-frame {
overflow: hidden; display: flex;
flex-direction: column;
}
#reader-content {
flex: 1;
position: relative; position: relative;
overflow: hidden;
} }
#reader-pages { #reader-pages {
@ -128,15 +134,12 @@
} }
#reader-progress-container { #reader-progress-container {
height: var(--reader-progressbar-height);
bottom: var(--reader-progressbar-height);
position: relative;
background-color: dimgray; background-color: dimgray;
} }
#reader-progress-bar{ #reader-progress-bar{
height: var(--reader-progressbar-height);
background-color: whitesmoke; background-color: whitesmoke;
height: 100%;
width: 0%; width: 0%;
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;
} }

4
comic_reader_test_high_res.html
View File

@ -11,6 +11,8 @@
<body> <body>
<div id="reader-frame"> <div id="reader-frame">
<div id="reader-content">
<div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden> <div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
@ -48,6 +50,8 @@
</div> </div>
</div> </div>
</div>
<div id="reader-progress-container"> <div id="reader-progress-container">
<div id="reader-progress-bar"></div> <div id="reader-progress-bar"></div>
</div> </div>