simon/mangareader
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Use flexbox for page layout
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Simon Bruder 2019-08-01 19:08:46 +00:00
parent 6eabe96a70
commit 4795aaa758
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/views/Reader.vue
View file

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