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;
} }

70
comic_reader_test_high_res.html
View File

@ -11,41 +11,45 @@
<body> <body>
<div id="reader-frame"> <div id="reader-frame">
<div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden> <div id="reader-content">
<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_E35P03.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
</div>
<div id="focus-overlay"> <div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden>
<div class="top"></div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
<div class="left"></div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
<div class="center"></div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>
<div class="right"></div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P04.jpg"/>
<div class="bottom"></div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P05.jpg"/>
</div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P06.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P07.jpg"/>
<div id="nav-controls"> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P08.jpg"/>
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P09.jpg"/>
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P10.jpg"/>
</div> <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P11.jpg"/>
<img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P12.jpg"/>
<div id="help-menu">
<div id="help-controls" style="opacity:1">
<div><div class="key">F</div>: Toggle fullscreen</div>
<div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</div>
<div><div class="key">&rarr;</div>/ scroll down / clic center or right : next panel</div>
<div><div class="key">SHIFT</div> + <div class="key">&larr;</div>/<div class="key">&rarr;</div>: previous / next page</div>
</div> </div>
<div id="focus-overlay">
<div class="top"></div>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
<div id="nav-controls">
<div class="left" id="nav-left" onclick="moveReader(false,false)"></div>
<div class="right" id="nav-right" onclick="moveReader(true,false)"></div>
</div>
<div id="help-menu">
<div id="help-controls" style="opacity:1">
<div><div class="key">F</div>: Toggle fullscreen</div>
<div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</div>
<div><div class="key">&rarr;</div>/ scroll down / clic center or right : next panel</div>
<div><div class="key">SHIFT</div> + <div class="key">&larr;</div>/<div class="key">&rarr;</div>: previous / next page</div>
</div>
</div>
</div> </div>
<div id="reader-progress-container"> <div id="reader-progress-container">