chiu
/
publication
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

調整上下頁樣式

This commit is contained in:
邱博亞 2023-06-23 18:17:59 +08:00
parent 9b0762f1e9
commit 3f836c8374
1 changed files with 41 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
app/views/publications/_viewer.html.erb
View File

@ -1,14 +1,17 @@
<div id="magazine"> <div class="publication">
<div id="magazine">
</div>
<ul class="button-mid">
<i class="fa fa-angle-left prev-button" aria-label="上一張"></i>
<i class="fa fa-angle-right next-button" aria-label="下一張"></i>
</ul>
</div> </div>
<%= stylesheet_link_tag "publications/pdf-turn.css" %> <%= stylesheet_link_tag "publications/pdf-turn.css" %>
<%= javascript_include_tag "publications/pdf/pdf.worker.js" %> <%= javascript_include_tag "publications/pdf/pdf.worker.js" %>
<%= javascript_include_tag "publications/pdf/pdf.js" %> <%= javascript_include_tag "publications/pdf/pdf.js" %>
<%= javascript_include_tag "publications/turn.min.js" %> <%= javascript_include_tag "publications/turn.min.js" %>
<%= javascript_include_tag "publications/pdf-turn.js" %> <%= javascript_include_tag "publications/pdf-turn.js" %>
<div class="flip-control">
<a href="#" id="prev"> Previous </a>
<a href="#" id="next"> Next </a>
</div>
<style type="text/css"> <style type="text/css">
div.flip-control { div.flip-control {
width: 400px; width: 400px;
@ -19,39 +22,42 @@ div.flip-control a {
margin-left: 10px; margin-left: 10px;
} }
#magazine { #magazine {
margin: auto; margin: auto;
width: 100%; width: 100%;
} }
#magazine .turn-page { #magazine .turn-page {
background-color: #ccc; background-color: #ccc;
background-size: 100% 100%; background-size: 100% 100%;
} }
#magazine .loader { #magazine .loader {
background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif); background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
width: 24px; width: 24px;
height: 24px; height: 24px;
display: block; display: block;
position: absolute; position: absolute;
top: 238px; top: 238px;
left: 188px; left: 188px;
} }
#magazine .odd { #magazine .odd {
background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%); background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%); background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%); background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%); background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
} }
#magazine .even { #magazine .even {
background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%); background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%); background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%); background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%); background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
} }
.publication .button-mid {
display: block;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function(){ $(document).ready(function(){
@ -169,11 +175,11 @@ div.flip-control a {
$('#magazine').turn('next'); $('#magazine').turn('next');
}); });
$('#prev').click(function(){ $('.publication .prev-button').click(function(){
$('#magazine').turn('previous'); $('#magazine').turn('previous');
return false; return false;
}); });
$('#next').click(function(){ $('.publication .next-button').click(function(){
$('#magazine').turn('next'); $('#magazine').turn('next');
return false; return false;
}); });