s

app/pub/css/an.css

@@ -9,13 +9,6 @@ h1 {
     font-size: 1.4em;
     text-align: center;
 }
-    #stuff-bar {
-        display: flex;
-        align-items: center;
-        height: 100px;
-        flex-wrap: wrap;
-    }
-
 #brand_title{
     color: #4e4f55;
     text-decoration:none;
@@ -45,11 +38,12 @@ h1 {
     width: 100%;
     background: #69c;
     display: flex;
-    height: 51px;
+    height: 50px;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 1.1em;
+    margin: 0px auto;
 }
 
 
@@ -62,156 +56,48 @@ h1 {
         padding: 8px;
     }
 
- 
+#stuff-bar {
- .zoompdf span {
-    cursor: pointer;
-}
-#zoomnav {
-    width: 15%;
-    display: -ms-flexbox;
     display: flex;
-    display: -webkit-box;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
     align-items: center;
-    float: left;
+    height: 50px;
-    margin-right: 2%;
+    background: #2c2e36;
+    margin: 0px auto;
+    color: white;
+    font-size: 1.4em;
+    justify-content: center;
 }
-.zoom-loop {
+    #stuff-bar a {
-    font-size: 2.5em;
+        color: white;
+    }
+#zoomnav, #pagenav {
+    width: 45%;
     display: flex;
     justify-content: center;
-    align-content: stretch;
-}
-.zoompdf {
-    width: 50%;
-    font-size: 2.5em;
-    height: 100%;
-    text-align: center;
-}
-#pagenav {
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 82%;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    -webkit-box-pack: left;
-    -ms-flex-pack: left;
-    justify-content: left;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
     align-items: center;
+}
+    #zoomnav div, #pagenav div {
+        margin-right: 15px;
+    }
+    #zoomnav span {
+        cursor: pointer;
     }
     #currpage {
-    list-style-type: none;
+        background: white;
-    color: white;
+        color: #2c2e36;
-    margin-right: 15px;
+        padding: 2px 10px;
-    float: left;
+        border-radius: 8px;
-    font-size: 3.5em;
+        font-weight: bold;
-    background: #2c2e35;
-    padding: 5px 25px;
-}
-#loc {
-    display: flex;
-    flex-wrap: wrap;
-}
-.nav {
         font-size: 1.3em;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    text-decoration: none;
     }
 
 
-
 #pdfprogress {
     text-align: center;
     font-weight: bold;
-    margin-top: 13px;
+    margin: 20px;
     font-size: 1.2em;
 }    
 
-#pdfnav {
-    font-size: 1.1em;
-    width: 100%;
-    font-weight:bold;
-    display: flex;
-    justify-content: center;
-    padding:0px;
-}
-
-#buttom-zoomin{
-    list-style-type:none;
-    float: left;
-    padding: 2px 10px;
-    font-size: 1.6em;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    border: 3px solid #2c2e35;
-    border-radius: 20px;
-    margin-right: 15px;
-}
-
-#zoompdf{
-    list-style-type:none;
-    color:#2c2e35;
-    margin-right: 15px;
-    float: left;
-    font-size: 2em;
-}
-
-#buttom-zoomout{
-    list-style-type:none;
-    float: left;
-    padding: 2px 10px;
-    font-size: 1.6em;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    border: 3px solid #2c2e35;
-    border-radius: 20px;
-}
-
-
-#pdfnav{
-    font-size: 1.1em;
-    width: 100%;
-    font-weight:bold;
-    display: flex;
-    justify-content: center;
-    padding:0px;
-}
-
-    .nav a, .navprev a, #pdfnav a{
-        color:#2c2e35;
-        text-decoration: none;
-    }
-
-    .navprev{
-        list-style-type:none;
-        margin-right: 15px;
-        float: left;
-        border: 3px solid #2c2e35;
-        border-radius: 28px;
-        padding: 2px 10px;
-        font-size: 1.3em;
-        display: flex;
-        align-items: center;
-    }
-
-    #navnext{
-        list-style-type:none;
-        float: left;
-        border: 3px solid #2c2e35;
-        border-radius: 28px;
-        padding: 2px 10px;
-        font-size: 1.3em;
-        display: flex;
-        align-items: center;
-    }
 @media screen and (max-width: 560px) {
     .navprev {
         font-size:1em;

app/pub/scripts/anviewer.js

@@ -42,7 +42,7 @@ function renderPage() {
           pageNumPending = null;
          
         }
-          el_title.innerHTML = 'Приятного чтения ↓';
+          el_title.innerHTML = '';
       });
     });
     
@@ -83,13 +83,13 @@ function pdfzoomout(){
 
 
 function resize_plus(){
-  cnt += 4;
+  cnt += 5;
   newpdfzoom(cnt);
 }
 
 
 function resize_minus(){  
-  cnt -= 4;
+  cnt -= 5;
   newpdfzoom(cnt);
 }
 

app/views/anpdf2.phtml

@@ -17,29 +17,29 @@
         <?endif?>  
     </p>
 
-<div id="pdfprogress">Идет обращение к серверу...</div>
 <div id="stuff-bar">
 <div id="zoomnav">
-    <div class="zoompdf zoom-loop">🔍</div>
-    <div class="zoompdf"> 
-        <div id="title_plus" onclick="resize_plus()">
-          <span >+</span>
-        </div>
-        <div id="zoomstatus">100%</zoom>
   <div id="title_minus" onclick="resize_minus()">
-          <span>–</span>
+    <span><i class="fa fa-search-minus" aria-hidden="true"></i></span>
   </div>
+
+  <div id="zoomstatus">100%</div>
+
+  <div id="title_plus" onclick="resize_plus()">
+    <span><i class="fa fa-search-plus" aria-hidden="true"></i></span>
   </div>
+
 </div>
 
 <div id="pagenav">
-    
+            <?if (isset($prevurl)):?><div class="navpage"><a href="<?=$prevurl?>"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i></a></div><?endif?>
-            <?if (isset($prevurl)):?><div class="navprev"><a href="<?=$prevurl?>">&lt;&nbsp;Предыдущая страница</a></div><?endif?>
             <div id="currpage"><?=$page?></div>
-            <?if (isset($nexturl)):?><div class="navprev"><a href="<?=$nexturl?>">Следующая страница&nbsp;&gt;</a></div><?endif?>
+            <?if (isset($nexturl)):?><div class="navpage"><a href="<?=$nexturl?>"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></div><?endif?>
 </div>
 </div>
 
+<div id="pdfprogress">Идет обращение к серверу...</div>
+
 <canvas id="the-canvas" style="width:100%"></canvas>
 <script>startpdfviewer();</script>
 <div id="pagenav">

app/views/layout.phtml

@@ -6,6 +6,7 @@
   <link rel="stylesheet" type="text/css" href="/pub/css/an.css?ver=27">
   <link rel="icon" type="image/ico" href="https://argumenti.ru/favicon.ico">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://use.fontawesome.com/29b1d5a52d.js"></script>
 </head>
 <body>