From 3f836c837409784357a507d2b7a9261a4fd3ecdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B1=E5=8D=9A=E4=BA=9E?= <naruto0426@rulingcom.com>
Date: Fri, 23 Jun 2023 18:17:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AA=BF=E6=95=B4=E4=B8=8A=E4=B8=8B=E9=A0=81?=
 =?UTF-8?q?=E6=A8=A3=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/views/publications/_viewer.html.erb | 76 +++++++++++++------------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/app/views/publications/_viewer.html.erb b/app/views/publications/_viewer.html.erb
index 6936f26..b76646d 100644
--- a/app/views/publications/_viewer.html.erb
+++ b/app/views/publications/_viewer.html.erb
@@ -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>
 <%= stylesheet_link_tag "publications/pdf-turn.css" %>
 <%= javascript_include_tag "publications/pdf/pdf.worker.js" %>
 <%= javascript_include_tag "publications/pdf/pdf.js" %>
 <%= javascript_include_tag "publications/turn.min.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">
 div.flip-control {
   width: 400px;
@@ -19,39 +22,42 @@ div.flip-control a {
   margin-left: 10px;
 }
 #magazine {
-      margin: auto;
-      width: 100%;
-    }
+  margin: auto;
+  width: 100%;
+}
 
-    #magazine .turn-page {
-      background-color: #ccc;
-      background-size: 100% 100%;
-    }
+#magazine .turn-page {
+  background-color: #ccc;
+  background-size: 100% 100%;
+}
 
-    #magazine .loader {
-      background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
-      width: 24px;
-      height: 24px;
-      display: block;
-      position: absolute;
-      top: 238px;
-      left: 188px;
-    }
+#magazine .loader {
+  background-image: url(https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/loader.gif);
+  width: 24px;
+  height: 24px;
+  display: block;
+  position: absolute;
+  top: 238px;
+  left: 188px;
+}
 
-    #magazine .odd {
-      background-image: -webkit-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: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
+#magazine .odd {
+  background-image: -webkit-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: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
 
-    }
+}
 
-    #magazine .even {
-      background-image: -webkit-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: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
-    }
+#magazine .even {
+  background-image: -webkit-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: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
+}
+.publication .button-mid {
+  display: block;
+}
 </style>
 <script type="text/javascript">
   $(document).ready(function(){
@@ -169,11 +175,11 @@ div.flip-control a {
             $('#magazine').turn('next');
 
     });
-    $('#prev').click(function(){
+    $('.publication .prev-button').click(function(){
         $('#magazine').turn('previous');
         return false;
     });
-    $('#next').click(function(){
+    $('.publication .next-button').click(function(){
         $('#magazine').turn('next');
         return false;
     });