|
|
|
@ -1,6 +1,6 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation" :style="{ 'grid-template-columns': showSidebar ? 'auto 250px' : 'auto' }">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation">
|
|
|
|
|
<div class="page-container">
|
|
|
|
|
<img :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll">
|
|
|
|
|
<!-- prefetching -->
|
|
|
|
|
<img style="display: none;" :src="info.pages[page-1]">
|
|
|
|
@ -105,10 +105,14 @@ export default {
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.reader {
|
|
|
|
|
display: grid;
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page-container {
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.current-page {
|
|
|
|
|
max-width: 50vw;
|
|
|
|
|
}
|
|
|
|
@ -126,6 +130,7 @@ img {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar {
|
|
|
|
|
flex: 0 0 250px;
|
|
|
|
|
background-color: #eee;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
position: sticky;
|
|
|
|
|