pdfs fit nicley, display more pages and buttons are fixed to bottom and all inlined

matches.py

@@ -8,6 +8,7 @@ from create_db import Card, User, get_session
 bp = Blueprint('matches', __name__, url_prefix='/matches')
 
 def get_matches(user_id):
+    #@TODO this is buggy
     dbsession = get_session()
 
     list_of_matches = []

share.py

@@ -5,7 +5,7 @@ from create_db import User, Card, get_session
 
 from hashlib import md5
 
-
+#@TODO najbrž je treba narediti tako da org card tudi dobi share id in se ostalo, kar to obsega
 def share(card, user_id):
     dbsession = get_session()
     
@@ -13,6 +13,10 @@ def share(card, user_id):
     h = md5(str(card.id).encode("utf-8")).hexdigest()
     card.share_id = h
     
+    owner_card = dbsession.query(Card).filter(Card.id == card.id).first()
+    owner_card.share_id = h
+    dbsession.commit()
+
     # all users 
     users = dbsession.query(User).filter(User.id != user_id).all()
     for user in users:

static/style.css

@@ -138,11 +138,6 @@ html {
     height: calc(100vh - 332px);
   }
 
-
-
-
-
-
   .drop-zone {
     max-width: 200px;
     height: 200px;
@@ -170,7 +165,7 @@ html {
 
   button {
     border-radius: 0px;
-    width: 20%;
+    width: 18%;
     height: 70px;
     font-size: 130%
   }

templates/deck/index.html

@@ -7,62 +7,86 @@
   <header>
       <p>Download: <a href="{{ card['item_location'] }}">{{ card['title'] }}</a></p>
     </header>    
+    <div style="background-color: blue; height: fit-content;" id="pdf-doc"></div>
+  </article>
   
-    <canvas id="pdf-doc"></canvas>
-
-    <form method="post">
+    <form method="post" style="position: fixed; bottom:0%; width: fill-available; width: -moz-available; width: -webkit-fill-available;">
         <input type="hidden" name="card_id" value="{{ card['id'] }}">
         <span style="display: inline;">
-        <button style="background-color: #736B1E" rbutton" type="submit" name="rate" value="Yes" accesskey="1">Yes</button> <!--ti keyi so alt+shit+key...-->
+          <button style="background-color: #736B1E" id="rbutton" type="submit" name="rate" value="Yes" accesskey="1">Yes</button> <!--ti keyi so alt+shit+key...-->
           <button style="background-color: #ED8008;" id="rbutton" type="submit" name="rate" value="Maybe" accesskey="2">Maybe</button>
           <button style="background-color: #ED3f1C;" id="rbutton" type="submit" name="rate" value="No" accesskey="3">No</button>
           <button style="background-color: #BF1B1B;" id="rbutton" type="submit" name="rate" value="Delete" accesskey="d">Delete</button>
+          <button style="background-color: #D9D2C6;" type="submit" name="share" value="share" accesskey="s">Share</button>
         </span>      
-        
-      <button style="margin-top: 1rem; background-color: #D9D2C6;" type="submit" name="share" value="share" accesskey="s">Share</button>
       </form>
-  </article>
 
   <script type="text/javascript" src="{{ url_for('static', filename='js/pdf.js') }}"></script>
   <script type="text/javascript" src="{{ url_for('static', filename='js/pdf.worker.js') }}"></script>
   <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function (){
-      var zoomed = false;
-      var canvas = document.getElementById('pdf-doc');
-      var context = canvas.getContext('2d');
 
-      var openPage = function(pdfFile, pageNumber) {
-          pdfFile.getPage(pageNumber).then(function(page) {
+      var currPage = 1; //Pages are 1-based not 0-based
+      var numPages = 0;
+      var thePDF = null;
+
+      //This is where you start
+      var doc = pdfjsLib.getDocument('{{ card["item_location"] }}');
+      doc.promise.then(function(pdf) {
+        //Set PDFJS global object (so we can easily access in our page functions
+        thePDF = pdf;
+        
+        //How many pages it has
+        numPages = pdf.numPages;
+
+        //Start with first page
+        pdf.getPage( 1 ).then( handlePages );
+      });
+
+      function handlePages(page)
+      {
+          //This gives us the page's dimensions at full scale
           var scale = 1.5;
           var viewport = page.getViewport({ scale: scale, });
+
+          //We'll create a canvas for each page to draw it on
+          var canvas = document.createElement( "canvas" );
+          canvas.style.display = "block";
+          var context = canvas.getContext('2d');
+          
+          //Add it to the web page
+          document.getElementById('pdf-doc').appendChild(canvas);
+          
           // Support HiDPI-screens.
           var outputScale = window.devicePixelRatio || 1;
 
           canvas.width = Math.floor(viewport.width * outputScale);
           canvas.height = Math.floor(viewport.height * outputScale);
-            canvas.style.width = Math.floor(viewport.width) + "px";
-            canvas.style.height =  Math.floor(viewport.height) + "px";
+          canvas.style.width = "100%";
+          canvas.style.height =  Math.floor(canvas.style.width * viewport.width / viewport.height);
+
 
           var transform = outputScale !== 1
           ? [outputScale, 0, 0, outputScale, 0, 0]
           : null;
-
             var renderContext = {
               canvasContext: context,
               viewport: viewport,
               transform: transform
               };
               
+          //Draw it on the canvas
           page.render(renderContext);
-          });
-      };
 
-      pdfjsLib.disableStream = true;
-      var doc = pdfjsLib.getDocument('{{ card["item_location"] }}');
-      doc.promise.then(function(pdf) {
-        // Do something with the PDF file stored in the `pdf` variable
-        openPage(pdf, 1);
-      });
+
+          //Move to next page
+          currPage++;
+          if ( thePDF !== null && currPage <= Math.min(numPages, 10) )
+          {
+              thePDF.getPage( currPage ).then( handlePages );
+          }
+      }
   });
   </script>
+
 {% endblock %}